feat(TabSet): Set tabIndex and aria-hidden based on active

Royal-Navy · Jul 15, 2020 · d6358db · d6358db
1 parent c8f2d4d
commit d6358db
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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'
+          )
+        })
       })
     })