@vaadin/popover 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

package/custom-elements.json

@@ -62,6 +62,20 @@
           "description": "A mixin providing common popover overlay functionality.",
           "name": "PopoverOverlayMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "attribute": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "bringToFront",
@@ -94,7 +108,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "attribute": "focus-trap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -355,12 +369,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Set to true to move focus into the overlay automatically on open.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
+              "fieldName": "autofocus",
+              "inheritedFrom": {
+                "name": "OverlayFocusMixin",
+                "package": "@vaadin/overlay/src/vaadin-overlay-focus-mixin.js"
+              }
+            },
             {
               "name": "focus-trap",
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, opening the overlay moves focus to the first focusable child,\nor to the overlay part with tabindex if there are no focusable children.",
+              "description": "Set to true to move focus into the overlay automatically on open\nand keep it inside: Tab and Shift+Tab cycle through the overlay's\ncontent until the overlay is closed.\n\nFocus moves to the first tabbable element in the tab order. This\ncan be the overlay itself if it has `tabindex` attribute set to `0`\non the host element or the `overlay` shadow DOM part.",
               "fieldName": "focusTrap",
               "inheritedFrom": {
                 "name": "OverlayFocusMixin",
@@ -1127,6 +1153,13 @@
               "description": "The `role` attribute value to be set on the popover.\nWhen not specified, defaults to 'dialog'.",
               "fieldName": "role"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            },
             {
               "name": "trigger",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,19 +37,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/lit-renderer": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/overlay": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/a11y-base": "25.3.0-rc1",
+    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/lit-renderer": "25.3.0-rc1",
+    "@vaadin/overlay": "25.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/aura": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.3.0-rc1",
+    "@vaadin/test-runner-commands": "25.3.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
+  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
 }

package/src/vaadin-popover-focus-controller.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getActiveTrappingNode } from '@vaadin/a11y-base/src/focus-trap-controller.js';
-import { getDeepActiveElement, getFocusableElements, isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
+import { getDeepActiveElement, getTabbableElements, isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 
 /**
  * Controller that routes Tab and Shift+Tab when a non-modal popover is opened.
@@ -56,6 +56,18 @@ export class PopoverFocusController {
       return;
     }
 
+    // Focus is on the popover itself: move into the content explicitly, so that
+    // the tab order does not depend on the browser's sequential focus navigation
+    // starting point (Firefox continues from the last clicked node).
+    if (!host.noTabFocus && isElementFocused(host)) {
+      const firstContent = getTabbableElements(host._overlayElement.$.content)[0];
+      if (firstContent) {
+        event.preventDefault();
+        firstContent.focus();
+        return;
+      }
+    }
+
     // Native Tab would land on the popover when DOM order places it right
     // after the current element. Skip past it via the logical list.
     const activeElement = getDeepActiveElement();
@@ -136,6 +148,11 @@ export class PopoverFocusController {
     if (event.key !== 'Tab') {
       return;
     }
+    // Another controller (e.g. the one of a parent popover) has already moved
+    // focus for this event, so this one must not move it a second time.
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.shiftKey) {
       this.__handleShiftTab(event);
     } else {
@@ -158,7 +175,7 @@ export class PopoverFocusController {
    * @private
    */
   __getLastPopoverFocusable() {
-    const lastContent = getFocusableElements(this.host._overlayElement.$.content).pop();
+    const lastContent = getTabbableElements(this.host._overlayElement.$.content).pop();
     return lastContent || this.host;
   }
 
@@ -171,7 +188,7 @@ export class PopoverFocusController {
   __getScopeFocusables() {
     const host = this.host;
     const scope = getActiveTrappingNode(host) || document.body;
-    return getFocusableElements(scope).filter((el) => el === host || !host.contains(el));
+    return getTabbableElements(scope).filter((el) => el === host || !host.contains(el));
   }
 
   /**

package/src/vaadin-popover-overlay.js

@@ -16,6 +16,7 @@ import { PopoverOverlayMixin } from './vaadin-popover-overlay-mixin.js';
 /**
  * An element used internally by `<vaadin-popover>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-popover-overlay
  * @extends HTMLElement
  * @private
@@ -78,11 +79,11 @@ class PopoverOverlay extends PopoverOverlayMixin(
   }
 
   /**
-   * Override method from OverlayFocusMixin to use owner as focus trap root
+   * Override method from OverlayFocusMixin to use owner as focus root
    * @protected
    * @override
    */
-  get _focusTrapRoot() {
+  get _focusRoot() {
     return this.owner;
   }
 

package/src/vaadin-popover.js

@@ -8,12 +8,14 @@ import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import {
-  hasOnlyNestedOverlays,
+  getOverlaysOnTop,
   isLastOverlay as isLastOverlayBase,
+  isNestedOverlay,
 } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { PopoverFocusController } from './vaadin-popover-focus-controller.js';
@@ -158,6 +160,14 @@ const isLastOverlay = (overlay) => {
   return isLastOverlayBase(overlay, filter);
 };
 
+/**
+ * Returns true if all the overlays shown on top of the given overlay are nested inside it.
+ * @param {HTMLElement} overlay
+ * @return {boolean}
+ * @protected
+ */
+const hasOnlyNestedOverlays = (overlay) => getOverlaysOnTop(overlay).every((el) => isNestedOverlay(overlay, el));
+
 /**
  * `<vaadin-popover>` is a Web Component for creating overlays
  * that are positioned next to specified DOM element (target).
@@ -207,6 +217,7 @@ const isLastOverlay = (overlay) => {
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} closed - Fired when the popover is closed.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-popover
  * @extends HTMLElement
  */
@@ -598,27 +609,15 @@ class Popover extends PopoverPositionMixin(
     }
 
     if (props.has('accessibleName')) {
-      if (this.accessibleName) {
-        this.setAttribute('aria-label', this.accessibleName);
-      } else {
-        this.removeAttribute('aria-label');
-      }
+      setOrRemoveAttribute(this, 'aria-label', this.accessibleName);
     }
 
     if (props.has('accessibleNameRef')) {
-      if (this.accessibleNameRef) {
-        this.setAttribute('aria-labelledby', this.accessibleNameRef);
-      } else {
-        this.removeAttribute('aria-labelledby');
-      }
+      setOrRemoveAttribute(this, 'aria-labelledby', this.accessibleNameRef);
     }
 
     if (props.has('modal')) {
-      if (this.modal) {
-        this.setAttribute('aria-modal', 'true');
-      } else {
-        this.removeAttribute('aria-modal');
-      }
+      setOrRemoveAttribute(this, 'aria-modal', this.modal);
     }
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -159,9 +159,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {