@vaadin/a11y-base 24.7.0-alpha5 → 24.7.0-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.7.0-alpha5",
+  "version": "24.7.0-alpha7",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,13 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.7.0-alpha5",
+    "@vaadin/component-base": "24.7.0-alpha7",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha5",
+    "@vaadin/chai-plugins": "24.7.0-alpha7",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "f9fa2bd652780a344d5e0329b8aafbcbd72ebd14"
+  "gitHead": "5f48d7024caa02773aff3aa53091326a42d1eeb1"
 }

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

@@ -38,4 +38,10 @@ export declare class KeyboardDirectionMixinClass {
    * Focus the given item. Override this method to add custom logic.
    */
   protected _focusItem(item: Element, navigating: boolean): void;
+
+  /**
+   * Returns whether the item is focusable. By default,
+   * returns true if the item is not disabled.
+   */
+  protected _isItemFocusable(item: Element): boolean;
 }

package/src/keyboard-direction-mixin.js

@@ -171,7 +171,7 @@ export const KeyboardDirectionMixin = (superclass) =>
 
         const item = items[idx];
 
-        if (!item.hasAttribute('disabled') && this.__isMatchingItem(item, condition)) {
+        if (this._isItemFocusable(item) && this.__isMatchingItem(item, condition)) {
           return idx;
         }
       }
@@ -189,4 +189,16 @@ export const KeyboardDirectionMixin = (superclass) =>
     __isMatchingItem(item, condition) {
       return typeof condition === 'function' ? condition(item) : true;
     }
+
+    /**
+     * Returns whether the item is focusable. By default,
+     * returns true if the item is not disabled.
+     *
+     * @param {Element} item
+     * @return {boolean}
+     * @protected
+     */
+    _isItemFocusable(item) {
+      return !item.hasAttribute('disabled');
+    }
   };

package/src/list-mixin.js

@@ -265,15 +265,6 @@ export const ListMixin = (superClass) =>
       super._onKeyDown(event);
     }
 
-    /**
-     * @param {!Element} item
-     * @return {boolean}
-     * @protected
-     */
-    _isItemHidden(item) {
-      return getComputedStyle(item).display === 'none';
-    }
-
     /**
      * @param {number} idx
      * @protected

package/src/tabindex-mixin.js

@@ -52,6 +52,10 @@ export const TabindexMixin = (superclass) =>
     _disabledChanged(disabled, oldDisabled) {
       super._disabledChanged(disabled, oldDisabled);
 
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        return;
+      }
+
       if (disabled) {
         if (this.tabindex !== undefined) {
           this._lastTabIndex = this.tabindex;
@@ -70,9 +74,39 @@ export const TabindexMixin = (superclass) =>
      * @protected
      */
     _tabindexChanged(tabindex) {
+      if (this.__shouldAllowFocusWhenDisabled()) {
+        return;
+      }
+
       if (this.disabled && tabindex !== -1) {
         this._lastTabIndex = tabindex;
         this.tabindex = -1;
       }
     }
+
+    /**
+     * Overrides the native `focus` method in order to prevent
+     * focusing the element when it is disabled. Note, setting
+     * `tabindex` to -1 does not prevent the element from being
+     * programmatically focusable.
+     *
+     * @protected
+     * @override
+     */
+    focus() {
+      if (!this.disabled || this.__shouldAllowFocusWhenDisabled()) {
+        super.focus();
+      }
+    }
+
+    /**
+     * Returns whether the component should be focusable when disabled.
+     * Returns false by default.
+     *
+     * @private
+     * @return {boolean}
+     */
+    __shouldAllowFocusWhenDisabled() {
+      return false;
+    }
   };