Merge pull request #913 from ZopaPublic/malformed-aria

Malformed aria on Progress and Accordion
ZopaPublic · Dec 6, 2023 · 63ff8b8 · 63ff8b8
2 parents 777e948 + 48524c2
commit 63ff8b8
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 64 deletions.
diff --git a/src/components/molecules/Progress/Progress.tsx b/src/components/molecules/Progress/Progress.tsx
@@ -5,6 +5,7 @@ import { colors, typography } from '../../../constants';
 import { Colors } from '../../../constants/colors';
 import Text from '../../atoms/Text/Text';
 import { useThemeContext } from '../../styles/Theme';
+import HiddenText from '../../atoms/HiddenText/HiddenText';
 
 export interface ProgressionStyleProps {
   /**
@@ -106,11 +107,13 @@ const Progress = ({ totalSteps, currentStep, withStep = false, progressColor, ..
 
   return (
     <ProgressWrapper>
+      <HiddenText id="in-progress">In progress</HiddenText>
       <ProgressBar
         role="progressbar"
         aria-valuemax={totalSteps}
         aria-valuenow={currentStep}
-        aria-label={`Static progress bar showing step ${currentStep} of ${totalSteps}`}
+        aria-valuetext={`Static progress bar showing step ${currentStep} of ${totalSteps}`}
+        aria-labelledby="in-progress"
         {...rest}
       >
         {renderPoints()}