From ea10049c4d9eea0ef619cdd41fae2e1152455570 Mon Sep 17 00:00:00 2001
From: TarunAdobe <ttomar@adobe.com>
Date: Wed, 26 Jul 2023 06:54:59 +0530
Subject: [PATCH] fix(tabs): allow bi-directional arrow key navigation in both
 orientations (#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>
---
 packages/tabs/src/Tabs.ts       |  3 +--
 packages/tabs/test/tabs.test.ts | 25 ++++++++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts
index 402bbdbb85..e64d6b018b 100644
--- 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
index 3dd6a4e9f1..99635a1cc5 100644
--- 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>(