@vaadin/a11y-base 24.8.0-alpha13 → 24.8.0-alpha15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/a11y-base",
-  "version": "24.8.0-alpha13",
+  "version": "24.8.0-alpha15",
   "publishConfig": {
     "access": "public"
   },
@@ -32,14 +32,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.8.0-alpha13",
+    "@vaadin/component-base": "24.8.0-alpha15",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha13",
-    "@vaadin/test-runner-commands": "24.8.0-alpha13",
+    "@vaadin/chai-plugins": "24.8.0-alpha15",
+    "@vaadin/test-runner-commands": "24.8.0-alpha15",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "a2f9e5be1153c1996f03013b291c3b3659b9c283"
+  "gitHead": "d2d0d1bb5efa3a439e568c1693d2fee3cc18fc67"
 }

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