@vaadin/a11y-base 25.0.0-alpha17 → 25.0.0-alpha18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "25.0.0-alpha17",
+  "version": "25.0.0-alpha18",
   "publishConfig": {
     "access": "public"
   },
@@ -31,14 +31,14 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/component-base": "25.0.0-alpha17",
+    "@vaadin/component-base": "25.0.0-alpha18",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha17",
-    "@vaadin/test-runner-commands": "25.0.0-alpha17",
+    "@vaadin/chai-plugins": "25.0.0-alpha18",
+    "@vaadin/test-runner-commands": "25.0.0-alpha18",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^21.0.0"
   },
-  "gitHead": "8264c71309907be99368b09414f0f8d7f591e0b9"
+  "gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
 }

package/src/delegate-focus-mixin.js

@@ -73,18 +73,24 @@ export const DelegateFocusMixin = dedupeMixin(
         if (this.autofocus && !this.disabled) {
           requestAnimationFrame(() => {
             this.focus();
-            this.setAttribute('focus-ring', '');
           });
         }
       }
 
       /**
+       * @param {FocusOptions=} options
        * @protected
        * @override
        */
-      focus() {
+      focus(options) {
         if (this.focusElement && !this.disabled) {
           this.focusElement.focus();
+
+          // Set focus-ring attribute on programmatic focus by default
+          // unless explicitly disabled by `{ focusVisible: false }`.
+          if (!(options && options.focusVisible === false)) {
+            this.setAttribute('focus-ring', '');
+          }
         }
       }
 

package/src/focus-mixin.js

@@ -54,6 +54,21 @@ export const FocusMixin = dedupeMixin(
         }
       }
 
+      /**
+       * @param {FocusOptions=} options
+       * @protected
+       * @override
+       */
+      focus(options) {
+        super.focus(options);
+
+        // Set focus-ring attribute on programmatic focus by default
+        // unless explicitly disabled by `{ focusVisible: false }`.
+        if (!(options && options.focusVisible === false)) {
+          this.setAttribute('focus-ring', '');
+        }
+      }
+
       /**
        * Override to change how focused and focus-ring attributes are set.
        *

package/src/keyboard-direction-mixin.d.ts

@@ -32,12 +32,12 @@ export declare class KeyboardDirectionMixinClass {
   /**
    * Focus the item at given index. Override this method to add custom logic.
    */
-  protected _focus(index: number, navigating: boolean): void;
+  protected _focus(index: number, options: FocusOptions, navigating: boolean): void;
 
   /**
    * Focus the given item. Override this method to add custom logic.
    */
-  protected _focusItem(item: Element, navigating: boolean): void;
+  protected _focusItem(item: Element, options: FocusOptions, navigating: boolean): void;
 
   /**
    * Returns whether the item is focusable. By default,

package/src/keyboard-direction-mixin.js

@@ -38,13 +38,17 @@ export const KeyboardDirectionMixin = (superclass) =>
       return false;
     }
 
-    /** @protected */
-    focus() {
+    /**
+     * @param {FocusOptions=} options
+     * @protected
+     * @override
+     */
+    focus(options) {
       const items = this._getItems();
       if (Array.isArray(items)) {
         const idx = this._getAvailableIndex(items, 0, null, (item) => !isElementHidden(item));
         if (idx >= 0) {
-          this._focus(idx);
+          this._focus(idx, options);
         }
       }
     }
@@ -114,7 +118,7 @@ export const KeyboardDirectionMixin = (superclass) =>
 
       if (idx >= 0) {
         event.preventDefault();
-        this._focus(idx, true);
+        this._focus(idx, { focusVisible: true }, true);
       }
     }
 
@@ -150,30 +154,27 @@ export const KeyboardDirectionMixin = (superclass) =>
      * Focus the item at given index. Override this method to add custom logic.
      *
      * @param {number} index
+     * @param {FocusOptions=} options
      * @param {boolean} navigating
      * @protected
      */
-    _focus(index, navigating = false) {
+    _focus(index, options, navigating = false) {
       const items = this._getItems();
 
-      this._focusItem(items[index], navigating);
+      this._focusItem(items[index], options, navigating);
     }
 
     /**
      * Focus the given item. Override this method to add custom logic.
      *
      * @param {Element} item
+     * @param {FocusOptions=} options
      * @param {boolean} navigating
      * @protected
      */
-    _focusItem(item) {
+    _focusItem(item, options) {
       if (item) {
-        item.focus();
-
-        // Generally, the items are expected to implement `FocusMixin`
-        // that would set this attribute based on the `keydown` event.
-        // We set it manually to handle programmatic focus() calls.
-        item.setAttribute('focus-ring', '');
+        item.focus(options);
       }
     }
 

package/src/list-mixin.js

@@ -6,7 +6,6 @@
 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 { isElementHidden } from './focus-utils.js';
 import { KeyboardDirectionMixin } from './keyboard-direction-mixin.js';
@@ -108,7 +107,12 @@ export const ListMixin = (superClass) =>
       return this.orientation !== 'horizontal';
     }
 
-    focus() {
+    /**
+     * @param {FocusOptions=} options
+     * @protected
+     * @override
+     */
+    focus(options) {
       // In initialization (e.g vaadin-select) observer might not been run yet.
       if (this._observer) {
         this._observer.flush();
@@ -117,10 +121,10 @@ export const ListMixin = (superClass) =>
       const items = Array.isArray(this.items) ? this.items : [];
       const idx = this._getAvailableIndex(items, 0, null, (item) => item.tabIndex === 0 && !isElementHidden(item));
       if (idx >= 0) {
-        this._focus(idx);
+        this._focus(idx, options);
       } else {
         // Call `KeyboardDirectionMixin` logic to focus first non-disabled item.
-        super.focus();
+        super.focus(options);
       }
     }
 
@@ -132,7 +136,7 @@ export const ListMixin = (superClass) =>
 
       const slot = this.shadowRoot.querySelector('slot:not([name])');
       this._observer = new SlotObserver(slot, () => {
-        this._setItems(this._filterItems(getFlattenedElements(this)));
+        this._setItems(this._filterItems([...this.children]));
       });
     }
 
@@ -276,13 +280,13 @@ export const ListMixin = (superClass) =>
      * @param {number} idx
      * @protected
      */
-    _focus(idx) {
+    _focus(idx, options) {
       this.items.forEach((e, index) => {
         e.focused = index === idx;
       });
       this._setFocusable(idx);
       this._scrollToItem(idx);
-      super._focus(idx);
+      super._focus(idx, options);
     }
 
     /**

package/src/tabindex-mixin.js

@@ -95,12 +95,13 @@ export const TabindexMixin = (superclass) =>
      * `tabindex` to -1 does not prevent the element from being
      * programmatically focusable.
      *
+     * @param {FocusOptions=} options
      * @protected
      * @override
      */
-    focus() {
+    focus(options) {
       if (!this.disabled || this.__shouldAllowFocusWhenDisabled()) {
-        super.focus();
+        super.focus(options);
       }
     }