feat(Timeline): Remove unwanted sidebar labels

Add aria-label alternative where Months, Weeks, Days are not displayed.
Royal-Navy · Oct 6, 2020 · 593dd0c · 593dd0c
1 parent c7a4ab1
commit 593dd0c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx
@@ -19,8 +19,9 @@ const StyledTimelineHeaderRow = styled<any>(TimelineRow)`
     `}
 `
 
-export const TimelineHeaderRow: React.FC<TimelineHeaderRowProps> = (props) => (
-  <StyledTimelineHeaderRow isHeader {...props} />
-)
+export const TimelineHeaderRow: React.FC<TimelineHeaderRowProps> = ({
+  name,
+  ...rest
+}) => <StyledTimelineHeaderRow isHeader ariaLabel={name} {...rest} />
 
 TimelineHeaderRow.displayName = 'TimelineHeaderRow'
diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx
@@ -69,7 +69,7 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
         className="timeline__months"
         data-testid="timeline-months"
         name="Months"
-        renderRowHeader={(name) => (
+        renderRowHeader={() => (
           <>
             <StyledNavigation
               className="timeline__navigation"
@@ -90,7 +90,6 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
                 data-testid="timeline-side-button-right"
               />
             </StyledNavigation>
-            {name}
           </>
         )}
       >

diff --git a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx
@@ -12,6 +12,7 @@ export interface TimelineRowProps extends ComponentWithClass {
     | React.ReactElement<TimelineEventsProps>
     | React.ReactElement<TimelineEventsProps>[]
   name?: string
+  ariaLabel?: string
   renderRowHeader?: (name: string) => React.ReactElement
   isHeader?: boolean
 }
@@ -58,6 +59,7 @@ const StyledRowContent = styled.div`
 export const TimelineRow: React.FC<TimelineRowProps> = ({
   children,
   name,
+  ariaLabel,
   renderRowHeader,
   isHeader,
   className,
@@ -79,6 +81,7 @@ export const TimelineRow: React.FC<TimelineRowProps> = ({
               isHeader={isHeader}
               data-testid="timeline-row-header"
               role="rowheader"
+              aria-label={ariaLabel || name}
             >
               {renderRowHeader ? renderRowHeader(name) : name}
             </StyledRowHeader>

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
@@ -173,7 +173,10 @@ describe('Timeline', () => {
     })
 
     it('should set the `role` attribute to `row` on the no data message', () => {
-      expect(wrapper.queryByTestId('timeline-no-data')).toHaveAttribute('role', 'row')
+      expect(wrapper.queryByTestId('timeline-no-data')).toHaveAttribute(
+        'role',
+        'row'
+      )
     })
 
     it('should set the `role` attribute to `cell` on the no data message text', () => {
@@ -321,12 +324,12 @@ describe('Timeline', () => {
         )
       })
 
-      it('should render the row headers', () => {
+      it('should apply `aria-label` for row headers', () => {
         const rowHeaders = wrapper.getAllByTestId('timeline-row-header')
 
-        expect(rowHeaders[0]).toHaveTextContent('Months')
-        expect(rowHeaders[1]).toHaveTextContent('Weeks')
-        expect(rowHeaders[2]).toHaveTextContent('Days')
+        expect(rowHeaders[0]).toHaveAttribute('aria-label', 'Months')
+        expect(rowHeaders[1]).toHaveAttribute('aria-label', 'Weeks')
+        expect(rowHeaders[2]).toHaveAttribute('aria-label', 'Days')
       })
     })
 
@@ -383,22 +386,17 @@ describe('Timeline', () => {
       it('should render the row headers', () => {
         const rowHeaders = wrapper.getAllByTestId('timeline-row-header')
 
-        expect(rowHeaders[0]).toHaveTextContent('Months')
-        expect(rowHeaders[1]).toHaveTextContent('Weeks')
-        expect(rowHeaders[2]).toHaveTextContent('Days')
         expect(rowHeaders[3]).toHaveTextContent('Row 1')
         expect(rowHeaders[4]).toHaveTextContent('Row 2')
       })
 
       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'
-        )
+        expect(
+          wrapper.getByTestId('timeline-side-button-left')
+        ).toHaveAttribute('aria-label', 'Navigate left')
+        expect(
+          wrapper.getByTestId('timeline-side-button-right')
+        ).toHaveAttribute('aria-label', 'Navigate right')
       })
 
       describe('and when the left button is clicked', () => {
@@ -471,12 +469,12 @@ describe('Timeline', () => {
       )
     })
 
-    it('should render the row headers', () => {
+    it('should apply `aria-label` for row headers', () => {
       const rowHeaders = wrapper.getAllByTestId('timeline-row-header')
 
-      expect(rowHeaders[0]).toHaveTextContent('Months')
-      expect(rowHeaders[1]).toHaveTextContent('Weeks')
-      expect(rowHeaders[2]).toHaveTextContent('Days')
+      expect(rowHeaders[0]).toHaveAttribute('aria-label', 'Months')
+      expect(rowHeaders[1]).toHaveAttribute('aria-label', 'Weeks')
+      expect(rowHeaders[2]).toHaveAttribute('aria-label', 'Days')
     })
   })
 
@@ -1288,9 +1286,7 @@ describe('Timeline', () => {
     })
 
     it('should render the arbitrary content', () => {
-      expect(
-        wrapper.getByText('Arbitrary event content')
-      ).toBeInTheDocument()
+      expect(wrapper.getByText('Arbitrary event content')).toBeInTheDocument()
     })
 
     it('should set the `aria-label` on the event', () => {