@vaadin/a11y-base 24.2.0-dev.f254716fe → 24.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
+    "@vaadin/component-base": "24.3.0-alpha1",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "9ca6f3ca220a777e8eea181a1f5717e39a732240"
 }

package/src/aria-hidden.js

@@ -23,12 +23,6 @@ let markerMap = {};
 /** @type {number} */
 let lockCount = 0;
 
-/**
- * @param {Element | Shadow} node
- * @return {Element | null}
- */
-const unwrapHost = (node) => (node ? node.host || unwrapHost(node.parentNode) : null);
-
 /**
  * @param {?Node} node
  * @return {boolean}
@@ -60,13 +54,12 @@ const correctTargets = (parent, targets) => {
         return null;
       }
 
-      if (parent.contains(target)) {
-        return target;
-      }
-
-      const correctedTarget = unwrapHost(target);
-      if (correctedTarget && parent.contains(correctedTarget)) {
-        return correctedTarget;
+      let node = target;
+      while (node && node !== parent) {
+        if (parent.contains(node)) {
+          return target;
+        }
+        node = node.getRootNode().host;
       }
 
       logError(target, 'is not contained inside', parent);
@@ -110,7 +103,13 @@ const applyAttributeToOthers = (originalTarget, parentNode, markerName, controlA
     }
 
     elementsToKeep.add(el);
-    keep(el.parentNode);
+
+    const slot = el.assignedSlot;
+    if (slot) {
+      keep(slot);
+    }
+
+    keep(el.parentNode || el.host);
   };
 
   targets.forEach(keep);
@@ -123,7 +122,9 @@ const applyAttributeToOthers = (originalTarget, parentNode, markerName, controlA
       return;
     }
 
-    [...parent.children].forEach((node) => {
+    const root = parent.shadowRoot;
+    const children = root ? [...parent.children, ...root.children] : [...parent.children];
+    children.forEach((node) => {
       // Skip elements that don't need to be hidden
       if (['template', 'script', 'style'].includes(node.localName)) {
         return;

package/src/delegate-focus-mixin.js

@@ -82,12 +82,9 @@ export const DelegateFocusMixin = dedupingMixin(
        * @override
        */
       focus() {
-        if (!this.focusElement || this.disabled) {
-          return;
+        if (this.focusElement && !this.disabled) {
+          this.focusElement.focus();
         }
-
-        this.focusElement.focus();
-        this._setFocused(true);
       }
 
       /**
@@ -95,11 +92,9 @@ export const DelegateFocusMixin = dedupingMixin(
        * @override
        */
       blur() {
-        if (!this.focusElement) {
-          return;
+        if (this.focusElement) {
+          this.focusElement.blur();
         }
-        this.focusElement.blur();
-        this._setFocused(false);
       }
 
       /**

package/src/list-mixin.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getNormalizedScrollLeft, setNormalizedScrollLeft } from '@vaadin/component-base/src/dir-utils.js';
+import { getFlattenedElements } from '@vaadin/component-base/src/dom-utils.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
 
 /**
@@ -134,8 +135,9 @@ export const ListMixin = (superClass) =>
 
       this.addEventListener('click', (e) => this._onClick(e));
 
-      this._observer = new FlattenedNodesObserver(this, () => {
-        this._setItems(this._filterItems(FlattenedNodesObserver.getFlattenedNodes(this)));
+      const slot = this.shadowRoot.querySelector('slot:not([name])');
+      this._observer = new SlotObserver(slot, () => {
+        this._setItems(this._filterItems(getFlattenedElements(this)));
       });
     }