@vaadin/a11y-base 24.1.5 → 24.2.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.1.5",
+  "version": "24.2.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.1.5",
+    "@vaadin/component-base": "24.2.0-alpha10",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.5.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "2150f0696b9205ed3651033301927516b87cf88f"
+  "gitHead": "ca16b5f88b00ae05fb6d7c7e9874525048e389f0"
 }

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)));
       });
     }
 

package/src/styles/sr-only-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const screenReaderOnly: CSSResult;

package/src/styles/sr-only-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd..
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @note Taken from Gaël Poupard gist
+ * @author Gaël Poupard
+ * @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
+ */
+import { css } from 'lit';
+
+export const screenReaderOnly = css`
+  .sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+  }
+`;