@vaadin/a11y-base 24.8.0-alpha9 → 25.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,15 +31,14 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.8.0-alpha9",
+    "@vaadin/component-base": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/src/delegate-focus-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { FocusMixin } from './focus-mixin.js';
 import { TabindexMixin } from './tabindex-mixin.js';
 
@@ -14,7 +14,7 @@ import { TabindexMixin } from './tabindex-mixin.js';
  * @mixes FocusMixin
  * @mixes TabindexMixin
  */
-export const DelegateFocusMixin = dedupingMixin(
+export const DelegateFocusMixin = dedupeMixin(
   (superclass) =>
     class DelegateFocusMixinClass extends FocusMixin(TabindexMixin(superclass)) {
       static get properties() {
@@ -42,6 +42,7 @@ export const DelegateFocusMixin = dedupingMixin(
             type: Object,
             readOnly: true,
             observer: '_focusElementChanged',
+            sync: true,
           },
 
           /**
@@ -228,6 +229,11 @@ export const DelegateFocusMixin = dedupingMixin(
           }
           this.tabindex = undefined;
         }
+
+        // Lit does not remove attribute when setting property to undefined
+        if (tabindex === undefined && this.hasAttribute('tabindex')) {
+          this.removeAttribute('tabindex');
+        }
       }
     },
 );

package/src/disabled-mixin.js

@@ -3,14 +3,14 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin to provide disabled property for field components.
  *
  * @polymerMixin
  */
-export const DisabledMixin = dedupingMixin(
+export const DisabledMixin = dedupeMixin(
   (superclass) =>
     class DisabledMixinClass extends superclass {
       static get properties() {

package/src/focus-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { isKeyboardActive } from './focus-utils.js';
 
 /**
@@ -11,7 +11,7 @@ import { isKeyboardActive } from './focus-utils.js';
  *
  * @polymerMixin
  */
-export const FocusMixin = dedupingMixin(
+export const FocusMixin = dedupeMixin(
   (superclass) =>
     class FocusMixinClass extends superclass {
       /**

package/src/keyboard-direction-mixin.js

@@ -30,6 +30,14 @@ export const KeyboardDirectionMixin = (superclass) =>
       return true;
     }
 
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get _tabNavigation() {
+      return false;
+    }
+
     /** @protected */
     focus() {
       const items = this._getItems();
@@ -67,7 +75,7 @@ export const KeyboardDirectionMixin = (superclass) =>
         return;
       }
 
-      const { key } = event;
+      const { key, shiftKey } = event;
       const items = this._getItems() || [];
       const currentIdx = items.indexOf(this.focused);
 
@@ -77,10 +85,10 @@ export const KeyboardDirectionMixin = (superclass) =>
       const isRTL = !this._vertical && this.getAttribute('dir') === 'rtl';
       const dirIncrement = isRTL ? -1 : 1;
 
-      if (this.__isPrevKey(key)) {
+      if (this.__isPrevKeyPressed(key, shiftKey)) {
         increment = -dirIncrement;
         idx = currentIdx - dirIncrement;
-      } else if (this.__isNextKey(key)) {
+      } else if (this.__isNextKeyPressed(key, shiftKey)) {
         increment = dirIncrement;
         idx = currentIdx + dirIncrement;
       } else if (key === 'Home') {
@@ -93,6 +101,17 @@ export const KeyboardDirectionMixin = (superclass) =>
 
       idx = this._getAvailableIndex(items, idx, increment, (item) => !isElementHidden(item));
 
+      if (
+        this._tabNavigation &&
+        key === 'Tab' &&
+        ((idx > currentIdx && event.shiftKey) || (idx < currentIdx && !event.shiftKey))
+      ) {
+        // Prevent "roving tabindex" logic and let the normal Tab behavior if
+        // - currently on the first focusable item and Shift + Tab is pressed,
+        // - currently on the last focusable item and Tab is pressed.
+        return;
+      }
+
       if (idx >= 0) {
         event.preventDefault();
         this._focus(idx, true);
@@ -101,20 +120,30 @@ export const KeyboardDirectionMixin = (superclass) =>
 
     /**
      * @param {string} key
+     * @param {boolean} shiftKey
      * @return {boolean}
      * @private
      */
-    __isPrevKey(key) {
-      return this._vertical ? key === 'ArrowUp' : key === 'ArrowLeft';
+    __isPrevKeyPressed(key, shiftKey) {
+      if (this._vertical) {
+        return key === 'ArrowUp';
+      }
+
+      return key === 'ArrowLeft' || (this._tabNavigation && key === 'Tab' && shiftKey);
     }
 
     /**
      * @param {string} key
+     * @param {boolean} shiftKey
      * @return {boolean}
      * @private
      */
-    __isNextKey(key) {
-      return this._vertical ? key === 'ArrowDown' : key === 'ArrowRight';
+    __isNextKeyPressed(key, shiftKey) {
+      if (this._vertical) {
+        return key === 'ArrowDown';
+      }
+
+      return key === 'ArrowRight' || (this._tabNavigation && key === 'Tab' && !shiftKey);
     }
 
     /**

package/src/keyboard-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
 
 /**
  * A mixin that manages keyboard handling.
@@ -12,7 +12,7 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
  *
  * @polymerMixin
  */
-export const KeyboardMixin = dedupingMixin(
+export const KeyboardMixin = dedupeMixin(
   (superclass) =>
     class KeyboardMixinClass extends superclass {
       /** @protected */

package/src/tabindex-mixin.js

@@ -27,6 +27,7 @@ export const TabindexMixin = (superclass) =>
           type: Number,
           reflectToAttribute: true,
           observer: '_tabindexChanged',
+          sync: true,
         },
 
         /**
@@ -60,9 +61,13 @@ export const TabindexMixin = (superclass) =>
         if (this.tabindex !== undefined) {
           this._lastTabIndex = this.tabindex;
         }
-        this.tabindex = -1;
+        this.setAttribute('tabindex', '-1');
       } else if (oldDisabled) {
-        this.tabindex = this._lastTabIndex;
+        if (this._lastTabIndex !== undefined) {
+          this.setAttribute('tabindex', this._lastTabIndex);
+        } else {
+          this.tabindex = undefined;
+        }
       }
     }
 
@@ -80,7 +85,7 @@ export const TabindexMixin = (superclass) =>
 
       if (this.disabled && tabindex !== -1) {
         this._lastTabIndex = tabindex;
-        this.tabindex = -1;
+        this.setAttribute('tabindex', '-1');
       }
     }