@vaadin/overlay 24.1.0 → 24.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.1.0",
+  "version": "24.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -36,17 +36,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.1.0",
-    "@vaadin/component-base": "~24.1.0",
-    "@vaadin/vaadin-lumo-styles": "~24.1.0",
-    "@vaadin/vaadin-material-styles": "~24.1.0",
-    "@vaadin/vaadin-themable-mixin": "~24.1.0"
+    "@vaadin/a11y-base": "~24.1.1",
+    "@vaadin/component-base": "~24.1.1",
+    "@vaadin/vaadin-lumo-styles": "~24.1.1",
+    "@vaadin/vaadin-material-styles": "~24.1.1",
+    "@vaadin/vaadin-themable-mixin": "~24.1.1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.0",
+    "@vaadin/testing-helpers": "^0.4.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "7fdfe7d5ceb4c305a894f8e9dc11e5b7d04cf1f2"
+  "gitHead": "c3a3d904885bd37ebb07a84b09617a340b4fab7e"
 }

package/src/vaadin-overlay-focus-mixin.d.ts

@@ -36,12 +36,28 @@ export declare class OverlayFocusMixinClass {
   protected _resetFocus(): void;
 
   /**
-   * Store previously focused node when the overlay starts to open.
+   * Save the previously focused node when the overlay starts to open.
    */
-  protected _storeFocus(): void;
+  protected _saveFocus(): void;
 
   /**
    * Trap focus within the overlay after opening has completed.
    */
   protected _trapFocus(): void;
+
+  /**
+   * Returns true if focus is still inside the overlay or on the body element,
+   * otherwise false.
+   *
+   * Focus shouldn't be restored if it's been moved elsewhere by another
+   * component or as a result of a user interaction e.g. the user clicked
+   * on a button outside the overlay while the overlay was open.
+   */
+  protected _shouldRestoreFocus(): boolean;
+
+  /**
+   * Returns true if the overlay contains the given node,
+   * including those within shadow DOM trees.
+   */
+  protected _deepContains(node: Node): boolean;
 }

package/src/vaadin-overlay-focus-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
+import { FocusRestorationController } from '@vaadin/a11y-base/src/focus-restoration-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
@@ -51,6 +52,7 @@ export const OverlayFocusMixin = (superClass) =>
 
       this.__ariaModalController = new AriaModalController(this);
       this.__focusTrapController = new FocusTrapController(this);
+      this.__focusRestorationController = new FocusRestorationController();
     }
 
     /** @protected */
@@ -59,6 +61,7 @@ export const OverlayFocusMixin = (superClass) =>
 
       this.addController(this.__ariaModalController);
       this.addController(this.__focusTrapController);
+      this.addController(this.__focusRestorationController);
     }
 
     /**
@@ -72,19 +75,19 @@ export const OverlayFocusMixin = (superClass) =>
         this.__focusTrapController.releaseFocus();
       }
 
-      if (this.restoreFocusOnClose) {
-        this.__restoreFocus();
+      if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
+        this.__focusRestorationController.restoreFocus();
       }
     }
 
     /**
-     * Store previously focused node when the overlay starts to open.
+     * Save the previously focused node when the overlay starts to open.
      *
      * @protected
      */
-    _storeFocus() {
+    _saveFocus() {
       if (this.restoreFocusOnClose) {
-        this.__storeFocus();
+        this.__focusRestorationController.saveFocus(this.restoreFocusNode);
       }
     }
 
@@ -100,49 +103,40 @@ export const OverlayFocusMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __storeFocus() {
-      // Store the focused node.
-      this.__restoreFocusNode = getDeepActiveElement();
-
-      // Determine and store the node that has the `focus-ring` attribute
-      // in order to restore the attribute when the overlay closes.
-      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-      if (restoreFocusNode) {
-        const restoreFocusNodeHost = (restoreFocusNode.assignedSlot || restoreFocusNode).getRootNode().host;
-        this.__restoreFocusRingNode = [restoreFocusNode, restoreFocusNodeHost].find((node) => {
-          return node && node.hasAttribute('focus-ring');
-        });
-      }
-    }
-
-    /** @private */
-    __restoreFocus() {
-      // If the activeElement is `<body>` or inside the overlay,
-      // we are allowed to restore the focus. In all the other
-      // cases focus might have been moved elsewhere by another
-      // component or by the user interaction (e.g. click on a
-      // button outside the overlay).
+    /**
+     * Returns true if focus is still inside the overlay or on the body element,
+     * otherwise false.
+     *
+     * Focus shouldn't be restored if it's been moved elsewhere by another
+     * component or as a result of a user interaction e.g. the user clicked
+     * on a button outside the overlay while the overlay was open.
+     *
+     * @protected
+     * @return {boolean}
+     */
+    _shouldRestoreFocus() {
       const activeElement = getDeepActiveElement();
-      if (activeElement !== document.body && !this._deepContains(activeElement)) {
-        return;
-      }
+      return activeElement === document.body || this._deepContains(activeElement);
+    }
 
-      // Use restoreFocusNode if specified, otherwise fallback to the node
-      // which was focused before opening the overlay.
-      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-      if (restoreFocusNode) {
-        // Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
-        // (e.g. combo-box overlay close on outside click).
-        setTimeout(() => restoreFocusNode.focus());
-        this.__restoreFocusNode = null;
+    /**
+     * Returns true if the overlay contains the given node,
+     * including those within shadow DOM trees.
+     *
+     * @param {Node} node
+     * @return {boolean}
+     * @protected
+     */
+    _deepContains(node) {
+      if (this.contains(node)) {
+        return true;
       }
-
-      // Restore the `focus-ring` attribute if it was present
-      // when the overlay was opening.
-      if (this.__restoreFocusRingNode) {
-        this.__restoreFocusRingNode.setAttribute('focus-ring', '');
-        this.__restoreFocusRingNode = null;
+      let n = node;
+      const doc = node.ownerDocument;
+      // Walk from node to `this` or `document`
+      while (n && n !== doc && n !== this) {
+        n = n.parentNode || n.host;
       }
+      return n === this;
     }
   };

package/src/vaadin-overlay.js

@@ -449,7 +449,7 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
   /** @private */
   _openedChanged(opened, wasOpened) {
     if (opened) {
-      this._storeFocus();
+      this._saveFocus();
 
       this._animatedOpening();
 
@@ -689,24 +689,6 @@ class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))
     }
   }
 
-  /**
-   * @param {!Node} node
-   * @return {boolean}
-   * @private
-   */
-  _deepContains(node) {
-    if (this.contains(node)) {
-      return true;
-    }
-    let n = node;
-    const doc = node.ownerDocument;
-    // Walk from node to `this` or `document`
-    while (n && n !== doc && n !== this) {
-      n = n.parentNode || n.host;
-    }
-    return n === this;
-  }
-
   /**
    * Brings the overlay as visually the frontmost one
    */