fix(Timeline): Use visually hidden text for header rows

This resolves some errors being flagged by axe 4.5.
Royal-Navy · Jan 4, 2023 · 2086d47 · 2086d47
1 parent bcf8844
commit 2086d47
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 42 deletions.
diff --git a/packages/react-component-library/src/components/Timeline/TimelineColumnHeader.tsx b/packages/react-component-library/src/components/Timeline/TimelineColumnHeader.tsx
@@ -1,7 +1,14 @@
 import React from 'react'
 
-export const TimelineColumnHeader: React.FC = (props) => (
-  <div role="columnheader" {...props} />
+import { StyledVisuallyHiddenText } from '../../styled-components/partials/StyledVisuallyHiddenText'
+
+export const TimelineColumnHeader: React.FC<{ name: string }> = ({
+  name,
+  ...rest
+}) => (
+  <div role="columnheader" {...rest}>
+    <StyledVisuallyHiddenText>{name}</StyledVisuallyHiddenText>
+  </div>
 )
 
 TimelineColumnHeader.displayName = 'TimelineColumnHeader'
diff --git a/packages/react-component-library/src/components/Timeline/TimelineDays.tsx b/packages/react-component-library/src/components/Timeline/TimelineDays.tsx
@@ -41,10 +41,7 @@ export const TimelineDays: React.FC<TimelineDaysProps> = memo(
       currentScaleOption.widths.day < DISPLAY_THRESHOLDS.DAY
 
     const rowChildren = isBelowThreshold ? (
-      <TimelineColumnHeader
-        aria-label="No days"
-        data-testid="timeline-no-days"
-      />
+      <TimelineColumnHeader data-testid="timeline-no-days" name="No days" />
     ) : (
       <StyledDays>
         {days.map(({ date }, index) => (

diff --git a/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx
@@ -9,9 +9,8 @@ interface TimelineHeaderRowProps extends ComponentWithClass {
   isShort?: boolean
 }
 
-export const TimelineHeaderRow: React.FC<TimelineHeaderRowProps> = ({
-  name,
-  ...rest
-}) => <StyledHeaderRow isHeader ariaLabel={name} {...rest} />
+export const TimelineHeaderRow: React.FC<TimelineHeaderRowProps> = (props) => (
+  <StyledHeaderRow isHeader {...props} />
+)
 
 TimelineHeaderRow.displayName = 'TimelineHeaderRow'
diff --git a/packages/react-component-library/src/components/Timeline/TimelineHours.tsx b/packages/react-component-library/src/components/Timeline/TimelineHours.tsx
@@ -46,10 +46,7 @@ export const TimelineHours: React.FC<TimelineHoursProps> = ({ render }) => {
   }
 
   const rowChildren = isBelowThreshold ? (
-    <TimelineColumnHeader
-      aria-label="No hours"
-      data-testid="timeline-no-hours"
-    />
+    <TimelineColumnHeader name="No hours" data-testid="timeline-no-hours" />
   ) : (
     <StyledHours>
       {days.map(({ date }) => {

diff --git a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx
@@ -7,6 +7,7 @@ import { StyledNoEvents } from './partials/StyledNoEvents'
 import { StyledRow } from './partials/StyledRow'
 import { StyledRowContent } from './partials/StyledRowContent'
 import { StyledRowHeader } from './partials/StyledRowHeader'
+import { StyledVisuallyHiddenText } from '../../styled-components/partials/StyledVisuallyHiddenText'
 import { SubcomponentProps } from '../../common/SubcomponentProps'
 import { TimelineContext, TimelineEventsProps } from '.'
 import { useTimelineRowContent } from './hooks/useTimelineRowContent'
@@ -81,10 +82,14 @@ export const TimelineRow: React.FC<TimelineRowProps> = ({
               $isHeader={isHeader}
               data-testid="timeline-row-header"
               role="rowheader"
-              aria-label={ariaLabel || name}
+              aria-label={ariaLabel}
               {...restHeaderProps}
             >
-              {render ? render({ name }) : name}
+              {render && render({ name })}
+              {!render && isHeader && (
+                <StyledVisuallyHiddenText>{name}</StyledVisuallyHiddenText>
+              )}
+              {!render && !isHeader && name}
             </StyledRowHeader>
           )}
           <StyledRowContent

diff --git a/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx b/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx
@@ -45,10 +45,7 @@ export const TimelineWeeks: React.FC<TimelineWeeksProps> = memo(
       currentScaleOption.widths.day * 7 < DISPLAY_THRESHOLDS.WEEK
 
     const rowChildren = isBelowThreshold ? (
-      <TimelineColumnHeader
-        aria-label="No weeks"
-        data-testid="timeline-no-weeks"
-      />
+      <TimelineColumnHeader data-testid="timeline-no-weeks" name="No weeks" />
     ) : (
       <StyledWeeks>
         {weeks.map(({ startDate }, index) => (

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
@@ -386,12 +386,13 @@ describe('Timeline', () => {
         )
       })
 
-      it('should apply `aria-label` for row headers', () => {
+      it('adds text to the row headers', () => {
         const rowHeaders = wrapper.getAllByTestId('timeline-row-header')
 
-        expect(rowHeaders[0]).toHaveAttribute('aria-label', 'Months')
-        expect(rowHeaders[1]).toHaveAttribute('aria-label', 'Weeks')
-        expect(rowHeaders[2]).toHaveAttribute('aria-label', 'Days')
+        // Text is visually hidden
+        expect(rowHeaders[0]).toHaveTextContent('Months')
+        expect(rowHeaders[1]).toHaveTextContent('Weeks')
+        expect(rowHeaders[2]).toHaveTextContent('Days')
       })
     })
 
@@ -517,12 +518,13 @@ describe('Timeline', () => {
       )
     })
 
-    it('should apply `aria-label` for row headers', () => {
+    it('adds text to the row headers', () => {
       const rowHeaders = wrapper.getAllByTestId('timeline-row-header')
 
-      expect(rowHeaders[0]).toHaveAttribute('aria-label', 'Months')
-      expect(rowHeaders[1]).toHaveAttribute('aria-label', 'Weeks')
-      expect(rowHeaders[2]).toHaveAttribute('aria-label', 'Days')
+      // Text is visually hidden
+      expect(rowHeaders[0]).toHaveTextContent('Months')
+      expect(rowHeaders[1]).toHaveTextContent('Weeks')
+      expect(rowHeaders[2]).toHaveTextContent('Days')
     })
   })
 
@@ -1753,8 +1755,7 @@ describe('Timeline', () => {
     })
 
     it('should render a no hours column header', () => {
-      expect(wrapper.getByTestId('timeline-no-hours')).toHaveAttribute(
-        'aria-label',
+      expect(wrapper.getByTestId('timeline-no-hours')).toHaveTextContent(
         'No hours'
       )
     })
@@ -1773,8 +1774,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no weeks column header', () => {
-        expect(wrapper.getByTestId('timeline-no-weeks')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-weeks')).toHaveTextContent(
           'No weeks'
         )
       })
@@ -1784,8 +1784,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no days column header', () => {
-        expect(wrapper.getByTestId('timeline-no-days')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-days')).toHaveTextContent(
           'No days'
         )
       })
@@ -1795,8 +1794,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no hours column header', () => {
-        expect(wrapper.getByTestId('timeline-no-hours')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-hours')).toHaveTextContent(
           'No hours'
         )
       })
@@ -1817,8 +1815,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no weeks column header', () => {
-        expect(wrapper.getByTestId('timeline-no-weeks')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-weeks')).toHaveTextContent(
           'No weeks'
         )
       })
@@ -1828,8 +1825,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no days column header', () => {
-        expect(wrapper.getByTestId('timeline-no-days')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-days')).toHaveTextContent(
           'No days'
         )
       })
@@ -1839,8 +1835,7 @@ describe('Timeline', () => {
       })
 
       it('should render a no hours column header', () => {
-        expect(wrapper.getByTestId('timeline-no-hours')).toHaveAttribute(
-          'aria-label',
+        expect(wrapper.getByTestId('timeline-no-hours')).toHaveTextContent(
           'No hours'
         )
       })

diff --git a/packages/react-component-library/src/styled-components/partials/StyledVisuallyHiddenText.ts b/packages/react-component-library/src/styled-components/partials/StyledVisuallyHiddenText.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const StyledVisuallyHiddenText = styled.span`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`