@vaadin/overlay 24.1.0-alpha9 → 24.1.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.1.0-alpha9",
+  "version": "24.1.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.1.0-alpha9",
-    "@vaadin/component-base": "24.1.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.1.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9"
+    "@vaadin/a11y-base": "24.1.0-beta2",
+    "@vaadin/component-base": "24.1.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.1.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -48,5 +48,5 @@
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
+  "gitHead": "83536fcc7d6661a593b2713cb99a8cb74f2fd868"
 }

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+
+export declare function OverlayFocusMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<OverlayFocusMixinClass> & T;
+
+export declare class OverlayFocusMixinClass {
+  /**
+   * When true, opening the overlay moves focus to the first focusable child,
+   * or to the overlay part with tabindex if there are no focusable children.
+   * @attr {boolean} focus-trap
+   */
+  focusTrap: boolean;
+
+  /**
+   * Set to true to enable restoring of focus when overlay is closed.
+   * @attr {boolean} restore-focus-on-close
+   */
+  restoreFocusOnClose: boolean;
+
+  /**
+   * Set to specify the element which should be focused on overlay close,
+   * if `restoreFocusOnClose` is set to true.
+   */
+  restoreFocusNode?: HTMLElement;
+
+  /**
+   * Release focus and restore focus after the overlay is closed.
+   */
+  protected _resetFocus(): void;
+
+  /**
+   * Store previously focused node when the overlay starts to open.
+   */
+  protected _storeFocus(): void;
+
+  /**
+   * Trap focus within the overlay after opening has completed.
+   */
+  protected _trapFocus(): void;
+}

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

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * 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 { 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';
+
+/**
+ * @polymerMixin
+ * @mixes ControllerMixin
+ */
+export const OverlayFocusMixin = (superClass) =>
+  class OverlayFocusMixin extends ControllerMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * When true, opening the overlay moves focus to the first focusable child,
+         * or to the overlay part with tabindex if there are no focusable children.
+         * @attr {boolean} focus-trap
+         */
+        focusTrap: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * Set to true to enable restoring of focus when overlay is closed.
+         * @attr {boolean} restore-focus-on-close
+         */
+        restoreFocusOnClose: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * Set to specify the element which should be focused on overlay close,
+         * if `restoreFocusOnClose` is set to true.
+         * @type {HTMLElement}
+         */
+        restoreFocusNode: {
+          type: HTMLElement,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.__ariaModalController = new AriaModalController(this);
+      this.__focusTrapController = new FocusTrapController(this);
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this.__ariaModalController);
+      this.addController(this.__focusTrapController);
+    }
+
+    /**
+     * Release focus and restore focus after the overlay is closed.
+     *
+     * @protected
+     */
+    _resetFocus() {
+      if (this.focusTrap) {
+        this.__ariaModalController.close();
+        this.__focusTrapController.releaseFocus();
+      }
+
+      if (this.restoreFocusOnClose) {
+        this.__restoreFocus();
+      }
+    }
+
+    /**
+     * Store previously focused node when the overlay starts to open.
+     *
+     * @protected
+     */
+    _storeFocus() {
+      if (this.restoreFocusOnClose) {
+        this.__storeFocus();
+      }
+    }
+
+    /**
+     * Trap focus within the overlay after opening has completed.
+     *
+     * @protected
+     */
+    _trapFocus() {
+      if (this.focusTrap) {
+        this.__ariaModalController.showModal();
+        this.__focusTrapController.trapFocus(this.$.overlay);
+      }
+    }
+
+    /** @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).
+      const activeElement = getDeepActiveElement();
+      if (activeElement !== document.body && !this._deepContains(activeElement)) {
+        return;
+      }
+
+      // 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;
+      }
+
+      // 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;
+      }
+    }
+  };

package/src/vaadin-overlay.d.ts

@@ -6,6 +6,7 @@
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 
 export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
 
@@ -119,7 +120,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
  */
-declare class Overlay extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement))) {
+declare class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(HTMLElement))) {
   /**
    * When true, the overlay is visible and attached to body.
    */
@@ -162,23 +163,6 @@ declare class Overlay extends ThemableMixin(DirMixin(ControllerMixin(HTMLElement
    */
   hidden: boolean;
 
-  /**
-   * When true move focus to the first focusable element in the overlay,
-   * or to the overlay if there are no focusable elements.
-   */
-  focusTrap: boolean;
-
-  /**
-   * Set to true to enable restoring of focus when overlay is closed.
-   */
-  restoreFocusOnClose: boolean;
-
-  /**
-   * Set to specify the element which should be focused on overlay close,
-   * if `restoreFocusOnClose` is set to true.
-   */
-  restoreFocusNode?: HTMLElement;
-
   /**
    * Returns true if this is the last one in the opened overlays stack.
    */

package/src/vaadin-overlay.js

@@ -5,12 +5,11 @@
  */
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 
 /**
  * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
@@ -74,9 +73,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DirMixin
- * @mixes ControllerMixin
+ * @mixes OverlayFocusMixin
  */
-class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
+class Overlay extends OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -224,34 +223,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
         observer: '_hiddenChanged',
       },
 
-      /**
-       * When true move focus to the first focusable element in the overlay,
-       * or to the overlay if there are no focusable elements.
-       * @type {boolean}
-       */
-      focusTrap: {
-        type: Boolean,
-        value: false,
-      },
-
-      /**
-       * Set to true to enable restoring of focus when overlay is closed.
-       * @type {boolean}
-       */
-      restoreFocusOnClose: {
-        type: Boolean,
-        value: false,
-      },
-
-      /**
-       * Set to specify the element which should be focused on overlay close,
-       * if `restoreFocusOnClose` is set to true.
-       * @type {HTMLElement}
-       */
-      restoreFocusNode: {
-        type: HTMLElement,
-      },
-
       /** @private */
       _mouseDownInside: {
         type: Boolean,
@@ -301,8 +272,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     if (isIOS) {
       this._boundIosResizeListener = () => this._detectIosNavbar();
     }
-
-    this.__focusTrapController = new FocusTrapController(this);
   }
 
   /**
@@ -325,8 +294,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     this.addEventListener('click', () => {});
     this.$.backdrop.addEventListener('click', () => {});
 
-    this.addController(this.__focusTrapController);
-
     processTemplates(this);
   }
 
@@ -482,14 +449,12 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
   /** @private */
   _openedChanged(opened, wasOpened) {
     if (opened) {
-      // Store focused node.
-      this.__restoreFocusNode = this._getActiveElement();
+      this._storeFocus();
+
       this._animatedOpening();
 
       afterNextRender(this, () => {
-        if (this.focusTrap) {
-          this.__focusTrapController.trapFocus(this.$.overlay);
-        }
+        this._trapFocus();
 
         const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
         this.dispatchEvent(evt);
@@ -501,9 +466,7 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
         this._addGlobalListeners();
       }
     } else if (wasOpened) {
-      if (this.focusTrap) {
-        this.__focusTrapController.releaseFocus();
-      }
+      this._resetFocus();
 
       this._animatedClosing();
 
@@ -611,27 +574,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     }
     if (this._placeholder) {
       this._exitModalState();
-
-      // Use this.restoreFocusNode if specified, otherwise fallback to the node
-      // which was focused before opening the overlay.
-      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
-
-      if (this.restoreFocusOnClose && restoreFocusNode) {
-        // 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).
-        const activeElement = this._getActiveElement();
-
-        if (activeElement === document.body || this._deepContains(activeElement)) {
-          // 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;
-      }
-
       this.setAttribute('closing', '');
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
@@ -747,20 +689,6 @@ class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
     }
   }
 
-  /**
-   * @return {!Element}
-   * @private
-   */
-  _getActiveElement() {
-    // Document.activeElement can be null
-    // https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
-    let active = document.activeElement || document.body;
-    while (active.shadowRoot && active.shadowRoot.activeElement) {
-      active = active.shadowRoot.activeElement;
-    }
-    return active;
-  }
-
   /**
    * @param {!Node} node
    * @return {boolean}