Merge pull request #81 from oddbird/add-focus-restoration-support

Add focus restoration support

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Popover Attribute Polyfill Changelog
 
+## Unreleased
+
+- 🚀 NEW: Add support for focus restoration on popover close --
+  [#81](https://github.com/oddbird/popover-polyfill/pull/81)
+
 ## 0.0.10: 2023-03-03
 
 - 🚀 NEW: Add support for `aria-expanded` on invokers --

index.html

@@ -15,9 +15,15 @@ <h1>Popover Attribute Polyfill</h1>
     <div id="popovers">
       <div id="popover1" popover>Popover 1</div>
       <div id="popover2" popover="">Popover 2</div>
-      <div id="popover3" popover="auto">Popover 3</div>
+      <div id="popover3" popover="auto">
+        Popover 3. This popover has an autofocus link:
+        <a href="#" autofocus>I'm a link!</a>
+      </div>
       <div id="popover4" popover="hint">Invalid Popover ("hint")</div>
-      <div id="popover5" popover="manual">Popover 5</div>
+      <div id="popover5" popover="manual">
+        Popover 5. This popover has an autofocus link:
+        <a href="#" autofocus>I'm a link!</a>
+      </div>
       <div id="popover6" popover="invalid">Invalid Popover ("invalid")</div>
       <div id="popover7" popover="auto">Popover 7 (auto)</div>
       <div id="popover8" popover="auto">Popover 8 (auto)</div>

src/popover.ts

@@ -53,6 +53,7 @@ const queryAncestorAll = (
 
 export function apply() {
   const visibleElements = new WeakSet<HTMLElement>();
+  let lastFocusedElement: HTMLElement | null = null;
 
   // https://whatpr.org/html/8221/popover.html#check-popover-validity
   function checkPopoverValidity(
@@ -137,11 +138,14 @@ export function apply() {
         assertPopoverValidity(this, false);
         this.classList.add(':open');
         visibleElements.add(this);
+        const focusEl = this.hasAttribute('autofocus')
+          ? this
+          : this.querySelector('[autofocus]');
+        if (this.ownerDocument.activeElement instanceof HTMLElement) {
+          lastFocusedElement = this.ownerDocument.activeElement;
+        }
+        focusEl?.focus();
         if (this.popover === 'auto') {
-          const focusEl = this.hasAttribute('autofocus')
-            ? this
-            : this.querySelector('[autofocus]');
-          focusEl?.focus();
           for (const invoker of getInvokersFor(this)) {
             setInvokerAriaExpanded(invoker);
           }
@@ -166,6 +170,10 @@ export function apply() {
         this.classList.remove(':open');
         visibleElements.delete(this);
         if (this.popover === 'auto') {
+          if (lastFocusedElement) {
+            lastFocusedElement.focus();
+            lastFocusedElement = null;
+          }
           for (const invoker of getInvokersFor(this)) {
             setInvokerAriaExpanded(invoker);
           }