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 : {}, }; }