feat(DataList): Add aria attributes

Royal-Navy · Jul 16, 2020 · 62faccd · 62faccd
1 parent 820ac76
commit 62faccd
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 4 deletions.
diff --git a/packages/react-component-library/src/components/DataList/DataList.test.tsx b/packages/react-component-library/src/components/DataList/DataList.test.tsx
@@ -18,6 +18,24 @@ describe('DataList', () => {
       )
     })
 
+    it('should not set `aria-expanded` on the button', () => {
+      expect(wrapper.getByTestId('data-list-header')).not.toHaveAttribute(
+        'aria-expanded'
+      )
+    })
+
+    it('should not set `aria-label` on the button', () => {
+      expect(wrapper.getByTestId('data-list-header')).not.toHaveAttribute(
+        'aria-label'
+      )
+    })
+
+    it('should not set `aria-owns` on the button', () => {
+      expect(wrapper.getByTestId('data-list-header')).not.toHaveAttribute(
+        'aria-owns'
+      )
+    })
+
     it('should render the title', () => {
       expect(wrapper.queryByText('title')).toBeInTheDocument()
     })
@@ -43,21 +61,69 @@ describe('DataList', () => {
       )
     })
 
+    it('should set `aria-expanded` on the button to `false`', () => {
+      expect(wrapper.getByTestId('data-list-header')).toHaveAttribute(
+        'aria-expanded',
+        'false'
+      )
+    })
+
+    it('should set `aria-label` on the button to `Show data`', () => {
+      expect(wrapper.getByTestId('data-list-header')).toHaveAttribute(
+        'aria-label',
+        'Show data'
+      )
+    })
+
+    it('should set `aria-owns` on the button to the ID of the sheet', () => {
+      const sheetId = wrapper.getByTestId('data-list-sheet').getAttribute('id')
+
+      expect(wrapper.getByTestId('data-list-header')).toHaveAttribute(
+        'aria-owns',
+        sheetId
+      )
+    })
+
     it('should hide the items', () => {
-      expect(wrapper.queryByTestId('data-list').classList).not.toContain('is-expanded')
+      expect(wrapper.queryByTestId('data-list').classList).not.toContain(
+        'is-expanded'
+      )
     })
 
     it('should render the badge', () => {
       expect(wrapper.queryByTestId('badge')).toHaveTextContent('3')
     })
 
+    it('should set the `aria-hidden` attribute on the icon to `true`', () => {
+      expect(wrapper.queryByTestId('arrow-down-icon')).toHaveAttribute(
+        'aria-hidden',
+        'true'
+      )
+    })
+
     describe('when the header is clicked', () => {
       beforeEach(() => {
         wrapper.getByTestId('data-list-header').click()
       })
 
+      it('should set `aria-expanded` on the button to `true`', () => {
+        expect(wrapper.getByTestId('data-list-header')).toHaveAttribute(
+          'aria-expanded',
+          'true'
+        )
+      })
+
+      it('should set `aria-label` on the button to `Hide data`', () => {
+        expect(wrapper.getByTestId('data-list-header')).toHaveAttribute(
+          'aria-label',
+          'Hide data'
+        )
+      })
+
       it('should show the items', () => {
-        expect(wrapper.queryByTestId('data-list').classList).toContain('is-expanded')
+        expect(wrapper.queryByTestId('data-list').classList).toContain(
+          'is-expanded'
+        )
       })
     })
   })

diff --git a/packages/react-component-library/src/components/DataList/DataList.tsx b/packages/react-component-library/src/components/DataList/DataList.tsx
@@ -4,6 +4,7 @@ import { IconKeyboardArrowDown } from '@royalnavy/icon-library'
 
 import { Badge } from '../Badge'
 import { DataListItemProps } from '.'
+import { getId } from '../../helpers'
 
 export interface DataListProps extends ComponentWithClass {
   children:
@@ -13,6 +14,20 @@ export interface DataListProps extends ComponentWithClass {
   title: string
 }
 
+function getAriaAttributes(isCollapsible: boolean, expanded: boolean) {
+  const sheetId = getId('sheet')
+
+  if (isCollapsible) {
+    return {
+      'aria-expanded': expanded,
+      'aria-label': expanded ? 'Hide data' : 'Show data',
+      'aria-owns': sheetId,
+    }
+  }
+
+  return null
+}
+
 export const DataList: React.FC<DataListProps> = ({
   className,
   isCollapsible,
@@ -24,13 +39,16 @@ export const DataList: React.FC<DataListProps> = ({
     'is-collapsible': isCollapsible,
     'is-expanded': expanded,
   })
+  const ariaAttributes = getAriaAttributes(isCollapsible, expanded)
+  const sheetId = ariaAttributes && ariaAttributes['aria-owns']
 
   return (
     <dl className={classes} data-testid="data-list">
       <button
         className="rn-data-list__header"
         onClick={() => setExpanded(!expanded)}
         data-testid="data-list-header"
+        {...ariaAttributes}
       >
         <h2 className="rn-data-list__title">
           {title}
@@ -41,10 +59,16 @@ export const DataList: React.FC<DataListProps> = ({
           )}
         </h2>
         <span className="rn-data-list__action">
-          <IconKeyboardArrowDown />
+          <IconKeyboardArrowDown aria-hidden data-testid="arrow-down-icon" />
         </span>
       </button>
-      <div className="rn-data-list__sheet">{children}</div>
+      <div
+        className="rn-data-list__sheet"
+        data-testid="data-list-sheet"
+        id={sheetId}
+      >
+        {children}
+      </div>
     </dl>
   )
 }