@vaadin/popover 25.0.0-alpha15 → 25.0.0-alpha16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha16",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha15",
-    "@vaadin/component-base": "25.0.0-alpha15",
-    "@vaadin/lit-renderer": "25.0.0-alpha15",
-    "@vaadin/overlay": "25.0.0-alpha15",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha15",
+    "@vaadin/a11y-base": "25.0.0-alpha16",
+    "@vaadin/component-base": "25.0.0-alpha16",
+    "@vaadin/lit-renderer": "25.0.0-alpha16",
+    "@vaadin/overlay": "25.0.0-alpha16",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha16",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha15",
-    "@vaadin/test-runner-commands": "25.0.0-alpha15",
+    "@vaadin/chai-plugins": "25.0.0-alpha16",
+    "@vaadin/test-runner-commands": "25.0.0-alpha16",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha15",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha16",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1ad98437e7600769bf66f870929feefbeef16edf"
+  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
 }

package/src/vaadin-popover-overlay.js

@@ -38,7 +38,7 @@ class PopoverOverlay extends PopoverOverlayMixin(
   render() {
     return html`
       <div id="backdrop" part="backdrop" hidden ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
+      <div part="overlay" id="overlay">
         <div part="arrow"></div>
         <div part="content" id="content"><slot></slot></div>
       </div>
@@ -69,10 +69,11 @@ class PopoverOverlay extends PopoverOverlayMixin(
   }
 
   /**
-   * @override
+   * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
+   * @override
    */
-  get _modalRoot() {
+  get _focusTrapRoot() {
     return this.owner;
   }
 

package/src/vaadin-popover.js

@@ -215,8 +215,21 @@ class Popover extends PopoverPositionMixin(
 
   static get styles() {
     return css`
-      :host {
-        display: contents;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+        outline: none;
+      }
+
+      :host,
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host(:focus) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
       }
     `;
   }
@@ -531,6 +544,16 @@ class Popover extends PopoverPositionMixin(
 
     this._overlayElement = this.$.overlay;
 
+    this.setAttribute('tabindex', '0');
+
+    this.addEventListener('focusin', (e) => {
+      this.__onFocusIn(e);
+    });
+
+    this.addEventListener('focusout', (e) => {
+      this.__onFocusOut(e);
+    });
+
     if (!this.hasAttribute('role')) {
       this.role = 'dialog';
     }
@@ -564,6 +587,14 @@ class Popover extends PopoverPositionMixin(
         this.removeAttribute('aria-labelledby');
       }
     }
+
+    if (props.has('modal')) {
+      if (this.modal) {
+        this.setAttribute('aria-modal', 'true');
+      } else {
+        this.removeAttribute('aria-modal');
+      }
+    }
   }
 
   /** @protected */
@@ -688,20 +719,18 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
-    // Move focus to the popover content on target element Tab
+    // Move focus to the popover on target element Tab
     if (this.target && isElementFocused(this.__getTargetFocusable())) {
       event.preventDefault();
-      overlayPart.focus();
+      this.focus();
       return;
     }
 
     // Move focus to the next element after target on content Tab
-    const lastFocusable = this.__getLastFocusable(overlayPart);
+    const lastFocusable = this.__getLastFocusable(this);
     if (lastFocusable && isElementFocused(lastFocusable)) {
       const focusable = this.__getNextBodyFocusable(this.__getTargetFocusable());
-      if (focusable && focusable !== overlayPart) {
+      if (focusable && focusable !== this) {
         event.preventDefault();
         focusable.focus();
         return;
@@ -711,7 +740,7 @@ class Popover extends PopoverPositionMixin(
     // Prevent focusing the popover content on previous element Tab
     const activeElement = getDeepActiveElement();
     const nextFocusable = this.__getNextBodyFocusable(activeElement);
-    if (nextFocusable === overlayPart && lastFocusable) {
+    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();
@@ -720,16 +749,14 @@ class Popover extends PopoverPositionMixin(
 
   /** @private */
   __onGlobalShiftTab(event) {
-    const overlayPart = this._overlayElement.$.overlay;
-
     // Prevent restoring focus after target blur on Shift + Tab
     if (this.target && isElementFocused(this.__getTargetFocusable()) && this.__shouldRestoreFocus) {
       this.__shouldRestoreFocus = false;
       return;
     }
 
-    // Move focus back to the target on overlay content Shift + Tab
-    if (this.target && isElementFocused(overlayPart)) {
+    // Move focus back to the target on popover Shift + Tab
+    if (this.target && isElementFocused(this)) {
       event.preventDefault();
       this.__getTargetFocusable().focus();
       return;
@@ -738,7 +765,7 @@ class Popover extends PopoverPositionMixin(
     // 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(overlayPart);
+      const lastFocusable = this.__getLastFocusable(this);
       if (lastFocusable) {
         event.preventDefault();
         lastFocusable.focus();
@@ -834,7 +861,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusIn() {
+  __onFocusIn() {
     this.__focusInside = true;
 
     // When using Tab to move focus, restoring focus is reset. However, if pressing Tab
@@ -845,7 +872,7 @@ class Popover extends PopoverPositionMixin(
   }
 
   /** @private */
-  __onOverlayFocusOut(event) {
+  __onFocusOut(event) {
     // Do not close the popover on overlay focusout if it's not the last one.
     // This covers the following cases of nested overlay based components:
     // 1. Moving focus to the nested overlay (e.g. vaadin-select, vaadin-menu-bar)
@@ -857,7 +884,6 @@ class Popover extends PopoverPositionMixin(
     if (
       (this.__hasTrigger('focus') && this.__mouseDownInside) ||
       event.relatedTarget === this.target ||
-      event.relatedTarget === this._overlayElement ||
       this.contains(event.relatedTarget)
     ) {
       return;
@@ -946,7 +972,7 @@ class Popover extends PopoverPositionMixin(
   /** @private */
   __onOverlayOpened() {
     if (this.autofocus && !this.modal) {
-      this._overlayElement.$.overlay.focus();
+      this.focus();
     }
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "25.0.0-alpha15",
+  "version": "25.0.0-alpha16",
   "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.0-alpha15",
+  "version": "25.0.0-alpha16",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {