fix(tabs): allow bi-directional arrow key navigation in both orientat…

…ions (#3410) * fix: refractored FocusGroup to improved tab navigation accessibility for screen readers * chore: added test to check arrowButtons functionality * fix(tabs): updated orientation to support screen readers expectations --------- Co-authored-by: Tarun Tomar <ttomar@Taruns-MacBook-Pro.local>
adobe · Jul 26, 2023 · ea10049 · ea10049
1 parent 67a21f0
commit ea10049
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 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/packages/tabs/test/tabs.test.ts b/packages/tabs/test/tabs.test.ts
@@ -419,7 +419,6 @@ describe('Tabs', () => {
             .true;
 
         firstTab.dispatchEvent(arrowLeftEvent());
-        firstTab.dispatchEvent(arrowUpEvent());
 
         await elementUpdated(el);
         expect(document.activeElement === secondTab, 'Focus second tab').to.be
@@ -440,6 +439,18 @@ describe('Tabs', () => {
 
         await elementUpdated(el);
         expect(el.selected).to.be.equal('first');
+
+        firstTab.dispatchEvent(arrowUpEvent());
+
+        await elementUpdated(el);
+        expect(document.activeElement === secondTab, 'Focus second tab').to.be
+            .true;
+
+        secondTab.dispatchEvent(arrowDownEvent());
+
+        await elementUpdated(el);
+        expect(document.activeElement === firstTab, 'Focus first tab').to.be
+            .true;
     });
 
     it('accepts keyboard based selection through shadow DOM', async () => {
@@ -481,7 +492,6 @@ describe('Tabs', () => {
         expect(activeElement === firstTab, 'Focus first tab').to.be.true;
 
         firstTab.dispatchEvent(arrowLeftEvent());
-        firstTab.dispatchEvent(arrowUpEvent());
 
         await elementUpdated(el);
         activeElement = rootNode.activeElement as Tab;
@@ -528,7 +538,6 @@ describe('Tabs', () => {
             .true;
 
         firstTab.dispatchEvent(arrowLeftEvent());
-        firstTab.dispatchEvent(arrowUpEvent());
 
         await elementUpdated(el);
         expect(document.activeElement === secondTab, 'Focus second tab').to.be
@@ -549,6 +558,16 @@ describe('Tabs', () => {
 
         await elementUpdated(el);
         expect(el.selected).to.be.equal('first');
+
+        firstTab.dispatchEvent(arrowRightEvent());
+
+        await elementUpdated(el);
+        expect(document.activeElement === secondTab, 'Focus second tab').to.be
+            .true;
+
+        secondTab.dispatchEvent(arrowLeftEvent());
+        expect(document.activeElement === firstTab, 'Focus first tab').to.be
+            .true;
     });
     it('selects through slotted DOM', async () => {
         const el = await fixture<Tabs>(