fix(tabs): updated orientation to support screen readers expectations

adobe · Jul 26, 2023 · 7c7c595 · 7c7c595
1 parent 2f27017
commit 7c7c595
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts
@@ -183,8 +183,7 @@ export class Tabs extends SizedMixin(Focusable) {
             });
             return firstFocusableElement ? focusInIndex : -1;
         },
-        direction: () =>
-            this.direction === 'horizontal' ? 'horizontal' : 'vertical',
+        direction: () => 'both',
         elementEnterAction: (el) => {
             if (!this.auto) return;
 

diff --git a/tools/reactive-controllers/src/FocusGroup.ts b/tools/reactive-controllers/src/FocusGroup.ts
@@ -230,9 +230,9 @@ export class FocusGroupController<T extends HTMLElement>
         }
         switch (this.direction) {
             case 'horizontal':
-                return code.startsWith('Arrow');
+                return code === 'ArrowLeft' || code === 'ArrowRight';
             case 'vertical':
-                return code.startsWith('Arrow');
+                return code === 'ArrowUp' || code === 'ArrowDown';
             case 'both':
             case 'grid':
                 return code.startsWith('Arrow');