From 277b5c933251dfb9b8e55ea9ae896c544cefc385 Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Tue, 23 Nov 2021 11:47:29 -0700
Subject: [PATCH] fix(tabs): Fix focusability of the More button (#1350)

The "More" button in tabs should be focusable so that keyboard users and screen reader users can access it.

[category:Components]
---
 cypress/integration/Tabs.spec.ts              | 36 +++++++++++++++++++
 .../tabs/lib/overflow/useOverflowTarget.tsx   |  2 +-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/Tabs.spec.ts b/cypress/integration/Tabs.spec.ts
index ef946d7a35..7931ec6c99 100644
--- a/cypress/integration/Tabs.spec.ts
+++ b/cypress/integration/Tabs.spec.ts
@@ -497,6 +497,24 @@ describe('Tabs', () => {
       cy.findByRole('button', {name: 'More'}).should('not.exist');
     });
 
+    context('when the "First Tab" is focused', () => {
+      beforeEach(() => {
+        cy.findByRole('tab', {name: 'First Tab'})
+          .click()
+          .focus();
+      });
+
+      context('when the Tab key is pressed', () => {
+        beforeEach(() => {
+          cy.focused().tab();
+        });
+
+        it('should focus on the tab panel', () => {
+          cy.findByRole('tabpanel', {name: 'First Tab'}).should('have.focus');
+        });
+      });
+    });
+
     context('when tab list container is only 500px wide', () => {
       beforeEach(() => {
         cy.findByRole('button', {name: '500px'}).click();
@@ -510,6 +528,24 @@ describe('Tabs', () => {
         cy.findByRole('button', {name: 'More'}).should('exist');
       });
 
+      context('when the "First Tab" is focused', () => {
+        beforeEach(() => {
+          cy.findByRole('tab', {name: 'First Tab'})
+            .click()
+            .focus();
+        });
+
+        context('when the Tab key is pressed', () => {
+          beforeEach(() => {
+            cy.focused().tab();
+          });
+
+          it('should focus on the "More" button', () => {
+            cy.findByRole('button', {name: 'More'}).should('have.focus');
+          });
+        });
+      });
+
       context('when the "More" button is clicked', () => {
         beforeEach(() => {
           cy.findByRole('button', {name: 'More'}).click();
diff --git a/modules/react/tabs/lib/overflow/useOverflowTarget.tsx b/modules/react/tabs/lib/overflow/useOverflowTarget.tsx
index c362f2fcd7..bfb27870a1 100644
--- a/modules/react/tabs/lib/overflow/useOverflowTarget.tsx
+++ b/modules/react/tabs/lib/overflow/useOverflowTarget.tsx
@@ -35,7 +35,7 @@ export const useOverflowTarget = createHook(
     return {
       ref: elementRef,
       'aria-hidden': isHidden,
-      tabIndex: -1,
+      tabIndex: isHidden ? -1 : 0,
       style: isHidden ? hiddenStyle : {},
     };
   }