From d6358db341b5700483107dd8d189430db097118a Mon Sep 17 00:00:00 2001
From: m7kvqbe1 <m7kvqbe1@royalnavy.io>
Date: Wed, 15 Jul 2020 10:57:42 +0100
Subject: [PATCH] feat(TabSet): Set `tabIndex` and `aria-hidden` based on
 active

---
 .../src/components/TabSet/TabContent.tsx      |  2 +
 .../src/components/TabSet/TabItem.tsx         |  1 +
 .../src/components/TabSet/TabSet.test.tsx     | 48 +++++++++++++++++++
 3 files changed, 51 insertions(+)

diff --git a/packages/react-component-library/src/components/TabSet/TabContent.tsx b/packages/react-component-library/src/components/TabSet/TabContent.tsx
index a24af8ac71..1ccc856c12 100644
--- a/packages/react-component-library/src/components/TabSet/TabContent.tsx
+++ b/packages/react-component-library/src/components/TabSet/TabContent.tsx
@@ -21,6 +21,8 @@ export const TabContent: React.FC<TabContentProps> = ({
       className={classes}
       role="tabpanel"
       aria-labelledby={tabId}
+      aria-hidden={!isActive}
+      tabIndex={0}
       data-testid="content"
     >
       {children}
diff --git a/packages/react-component-library/src/components/TabSet/TabItem.tsx b/packages/react-component-library/src/components/TabSet/TabItem.tsx
index 1222c1e4f9..ef86cd9611 100644
--- a/packages/react-component-library/src/components/TabSet/TabItem.tsx
+++ b/packages/react-component-library/src/components/TabSet/TabItem.tsx
@@ -29,6 +29,7 @@ export const TabItem = forwardRef<HTMLLIElement, TabItemProps>(
         role="tab"
         aria-controls={tabId}
         aria-selected={!!isActive}
+        tabIndex={!isActive ? -1 : 0}
       >
         <button className={tabClasses} onClick={handleClick}>
           <div>{children}</div>
diff --git a/packages/react-component-library/src/components/TabSet/TabSet.test.tsx b/packages/react-component-library/src/components/TabSet/TabSet.test.tsx
index afb250cfc8..dc865b33c0 100644
--- a/packages/react-component-library/src/components/TabSet/TabSet.test.tsx
+++ b/packages/react-component-library/src/components/TabSet/TabSet.test.tsx
@@ -87,6 +87,30 @@ describe('TabSet', () => {
         expect(wrapper.queryAllByTestId('content').length).toEqual(2)
       })
 
+      it('should set the `tabIndex` values correctly', () => {
+        expect(wrapper.getAllByTestId('tab')[0]).toHaveAttribute(
+          'tabIndex',
+          '0'
+        )
+
+        expect(wrapper.getAllByTestId('tab')[1]).toHaveAttribute(
+          'tabIndex',
+          '-1'
+        )
+      })
+
+      it('should set the `aria-hidden` attributes correctly', () => {
+        expect(wrapper.getAllByTestId('content')[0]).toHaveAttribute(
+          'aria-hidden',
+          'false'
+        )
+
+        expect(wrapper.getAllByTestId('content')[1]).toHaveAttribute(
+          'aria-hidden',
+          'true'
+        )
+      })
+
       describe('when the user clicks on a tab', () => {
         beforeEach(() => {
           wrapper.getByText('Title 2').click()
@@ -102,6 +126,30 @@ describe('TabSet', () => {
           expect(onChangeSpy).toHaveBeenCalledTimes(1)
           expect(onChangeSpy).toHaveBeenCalledWith(1)
         })
+
+        it('should set the first tab `tabIndex` to -1', () => {
+          expect(wrapper.getAllByTestId('tab')[0]).toHaveAttribute(
+            'tabIndex',
+            '-1'
+          )
+
+          expect(wrapper.getAllByTestId('tab')[1]).toHaveAttribute(
+            'tabIndex',
+            '0'
+          )
+        })
+
+        it('should set the `aria-hidden` attributes correctly', () => {
+          expect(wrapper.getAllByTestId('content')[0]).toHaveAttribute(
+            'aria-hidden',
+            'true'
+          )
+
+          expect(wrapper.getAllByTestId('content')[1]).toHaveAttribute(
+            'aria-hidden',
+            'false'
+          )
+        })
       })
     })