@vaadin/popover 25.0.4 → 25.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.0.4",
+  "version": "25.0.7",
   "publishConfig": {
     "access": "public"
   },
@@ -36,24 +36,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.0.4",
-    "@vaadin/component-base": "~25.0.4",
-    "@vaadin/lit-renderer": "~25.0.4",
-    "@vaadin/overlay": "~25.0.4",
-    "@vaadin/vaadin-themable-mixin": "~25.0.4",
+    "@vaadin/a11y-base": "~25.0.7",
+    "@vaadin/component-base": "~25.0.7",
+    "@vaadin/lit-renderer": "~25.0.7",
+    "@vaadin/overlay": "~25.0.7",
+    "@vaadin/vaadin-themable-mixin": "~25.0.7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.0.4",
-    "@vaadin/chai-plugins": "~25.0.4",
-    "@vaadin/test-runner-commands": "~25.0.4",
+    "@vaadin/aura": "~25.0.7",
+    "@vaadin/chai-plugins": "~25.0.7",
+    "@vaadin/test-runner-commands": "~25.0.7",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.0.4",
+    "@vaadin/vaadin-lumo-styles": "~25.0.7",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "17170982c3efa1d426af4fabb70ea36b70151347"
+  "gitHead": "8f3a780477d7dbe30fd473470ede41458e5217b9"
 }

package/src/vaadin-popover.js

@@ -6,6 +6,7 @@
 import './vaadin-popover-overlay.js';
 import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { getActiveTrappingNode } from '@vaadin/a11y-base/src/focus-trap-controller.js';
 import {
   getDeepActiveElement,
   getFocusableElements,
@@ -741,24 +742,53 @@ class Popover extends PopoverPositionMixin(
       return;
     }
 
-    // Move focus to the next element after target on content Tab
-    const lastFocusable = this.__getLastFocusable(this);
-    if (lastFocusable && isElementFocused(lastFocusable)) {
-      const focusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
-      if (focusable && focusable !== this) {
+    // Cache filtered focusable list for this keystroke to avoid redundant DOM traversals
+    const focusables = this.__getScopeFocusables();
+
+    // Move focus to the next element after target on last content Tab,
+    // or when popover itself is focused and has no focusable content
+    const lastFocusable = this.__getLastFocusable();
+    const isFocusOut = lastFocusable ? isElementFocused(lastFocusable) : isElementFocused(this);
+    if (isFocusOut) {
+      let focusable = this.__getNextScopeFocusable(this.__getTargetFocusable(), focusables);
+      // If the next element after the target is the popover itself (DOM position
+      // differs from logical position), skip past it to the actual next element.
+      if (focusable === this) {
+        focusable = this.__getNextScopeFocusable(this, focusables);
+      }
+      if (focusable) {
         event.preventDefault();
         focusable.focus();
         return;
       }
+      // No next element after the target in the scope. When inside a focus trap,
+      // wrap explicitly to the first focusable. Don't fall through - the
+      // FocusTrapController uses DOM order which may differ from the popover's
+      // logical tab position.
+      if (getActiveTrappingNode(this) && focusables[0]) {
+        event.preventDefault();
+        focusables[0].focus();
+        return;
+      }
     }
 
-    // Prevent focusing the popover content on previous element Tab
+    // Handle cases where Tab from the current element would land on the popover
     const activeElement = getDeepActiveElement();
-    const nextFocusable = this.__getNextBodyFocusable(activeElement);
-    if (nextFocusable === this && lastFocusable) {
-      // Move focus to the last overlay focusable and do NOT prevent keydown
-      // to move focus outside the popover content (e.g. to the URL bar).
-      lastFocusable.focus();
+    const nextFocusable = this.__getNextScopeFocusable(activeElement, focusables);
+    if (nextFocusable === this) {
+      // The popover should only be Tab-reachable from its target (handled above).
+      // Skip the popover when Tab from any other element would land on it
+      // due to its DOM position.
+      const focusableAfterPopover = this.__getNextScopeFocusable(this, focusables);
+      if (focusableAfterPopover) {
+        event.preventDefault();
+        focusableAfterPopover.focus();
+      } else if (getActiveTrappingNode(this) && focusables[0]) {
+        // Popover is last in DOM scope but shouldn't be Tab-reachable from
+        // non-target elements. Wrap to first focusable in focus trap.
+        event.preventDefault();
+        focusables[0].focus();
+      }
     }
   }
 
@@ -777,30 +807,125 @@ class Popover extends PopoverPositionMixin(
       return;
     }
 
-    // Move focus back to the popover on next element Shift + Tab
-    const nextFocusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
-    if (nextFocusable && isElementFocused(nextFocusable)) {
-      const lastFocusable = this.__getLastFocusable(this);
-      if (lastFocusable) {
+    // Don't intercept if focus is inside the popover content.
+    // The browser's native Shift+Tab handles navigation within
+    // the overlay (e.g. between focusable content and the popover element itself).
+    const activeElement = getDeepActiveElement();
+    if (this.contains(activeElement)) {
+      return;
+    }
+
+    // Cache filtered focusable list for this keystroke to avoid redundant DOM traversals
+    const focusables = this.__getScopeFocusables();
+
+    // Get previous focusable element excluding the popover
+    const prevFocusable = this.__getPrevScopeFocusable(activeElement, focusables);
+    const targetFocusable = this.__getTargetFocusable();
+
+    // Intercept Shift+Tab when the previous focusable (excluding the popover)
+    // is the target. Instead of moving to the target, redirect focus into
+    // the popover's last focusable content (or the popover itself).
+    if (prevFocusable === targetFocusable) {
+      event.preventDefault();
+      this.__focusLastOrSelf();
+      return;
+    }
+
+    // Move focus into the popover when:
+    // 1. There is no previous focusable element in the focus trap (at the
+    //    beginning, would wrap around), and
+    // 2. The target is the last focusable in the focus trap (making the
+    //    popover logically last).
+    // Don't fall through - the FocusTrapController uses DOM order which
+    // may differ from the popover's logical tab position.
+    if (!prevFocusable && getActiveTrappingNode(this)) {
+      const list = focusables.filter((el) => el !== this);
+      if (list.at(-1) === targetFocusable) {
+        event.preventDefault();
+        this.__focusLastOrSelf();
+        return;
+      }
+      // Popover is last in DOM but target is not the last focusable.
+      // Wrap to last non-popover focusable to prevent FocusTrapController
+      // from landing on the popover.
+      const last = list.at(-1);
+      if (last) {
+        event.preventDefault();
+        last.focus();
+        return;
+      }
+    }
+
+    // Get previous focusable element including the popover (simulates native Tab order)
+    const prevFocusableNative = this.__getPrevScopeFocusable(activeElement, focusables, true);
+    // Skip the popover when native Shift+Tab would land on it
+    // and redirect to the actual previous element
+    if (prevFocusableNative === this) {
+      if (prevFocusable) {
         event.preventDefault();
-        lastFocusable.focus();
+        prevFocusable.focus();
+      } else if (getActiveTrappingNode(this)) {
+        // Popover is first in DOM scope but shouldn't be Shift+Tab-reachable
+        // from non-target elements. Wrap to last non-popover focusable.
+        const list = focusables.filter((el) => el !== this);
+        const last = list.at(-1);
+        if (last) {
+          event.preventDefault();
+          last.focus();
+        }
       }
     }
   }
 
+  /**
+   * Returns whether the element is a light DOM child of this popover
+   * (i.e. slotted popover content, excluding the popover element itself).
+   * @param {Element} el
+   * @return {boolean}
+   * @private
+   */
+  __isPopoverContent(el) {
+    return el !== this && this.contains(el);
+  }
+
+  /**
+   * Returns focusable elements within the current scope (active focus trap or
+   * document body) with popover light DOM children filtered out.
+   * @return {Element[]}
+   * @private
+   */
+  __getScopeFocusables() {
+    const scope = getActiveTrappingNode(this) || document.body;
+    return getFocusableElements(scope).filter((el) => !this.__isPopoverContent(el));
+  }
+
   /** @private */
-  __getNextBodyFocusable(target) {
-    const focusables = getFocusableElements(document.body);
+  __getNextScopeFocusable(target, focusables = this.__getScopeFocusables()) {
     const idx = focusables.findIndex((el) => el === target);
-    return focusables[idx + 1];
+    return idx >= 0 ? focusables[idx + 1] : undefined;
+  }
+
+  /** @private */
+  __getPrevScopeFocusable(target, focusables = this.__getScopeFocusables(), includePopover = false) {
+    const list = includePopover ? focusables : focusables.filter((el) => el !== this);
+    const idx = list.findIndex((el) => el === target);
+    // Returns null both when target is the first element (idx === 0)
+    // and when target is not found in the list (idx === -1)
+    return idx > 0 ? list[idx - 1] : null;
   }
 
   /** @private */
-  __getLastFocusable(container) {
-    const focusables = getFocusableElements(container);
+  __getLastFocusable() {
+    // Search within the overlay's content area to avoid returning the popover element itself
+    const focusables = getFocusableElements(this._overlayElement.$.content);
     return focusables.pop();
   }
 
+  /** @private */
+  __focusLastOrSelf() {
+    (this.__getLastFocusable() || this).focus();
+  }
+
   /** @private */
   __getTargetFocusable() {
     if (!this.target) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.4",
+  "version": "25.0.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

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