feat(Timeline): Add aria-label to buttons

Navigation buttons require some text which can be read by a screenreader.
Royal-Navy · Sep 7, 2020 · eeb4c9f · eeb4c9f
1 parent 8bcbc67
commit eeb4c9f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx
@@ -43,17 +43,18 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
         renderRowHeader={(name) => (
           <>
             <div
-              aria-hidden
               className="timeline__navigation"
               data-testid="timeline-navigation"
             >
               <Button
+                aria-label="Navigate left"
                 variant="secondary"
                 icon={<IconChevronLeft />}
                 onClick={(_) => dispatch({ type: TIMELINE_ACTIONS.GET_PREV })}
                 data-testid="timeline-side-button-left"
               />
               <Button
+                aria-label="Navigate right"
                 variant="secondary"
                 icon={<IconChevronRight />}
                 onClick={(_) => dispatch({ type: TIMELINE_ACTIONS.GET_NEXT })}

diff --git a/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx b/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx
@@ -359,10 +359,14 @@ describe('Timeline', () => {
         expect(rowHeaders[4]).toHaveTextContent('Row 2')
       })
 
-      it('should set the `aria-hidden` to `true` for the timeline navigation', () => {
-        expect(wrapper.getByTestId('timeline-navigation')).toHaveAttribute(
-          'aria-hidden',
-          'true'
+      it('should set the `aria-label` attributes for the timeline navigation buttons', () => {
+        expect(wrapper.getByTestId('timeline-side-button-left')).toHaveAttribute(
+          'aria-label',
+          'Navigate left'
+        )
+        expect(wrapper.getByTestId('timeline-side-button-right')).toHaveAttribute(
+          'aria-label',
+          'Navigate right'
         )
       })