AKR:OTR:VKT:YKI(Frontend): Improve CircularStepper accessibility [dep…

…loy]
Opetushallitus · Sep 16, 2024 · 8b3b93f · 8b3b93f
1 parent 6a586c2
commit 8b3b93f
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 25 deletions.
diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].6"
+    "shared": "npm:@opetushallitus/[email protected].8"
   }
 }
diff --git a/frontend/packages/akr/src/components/contactRequest/ContactRequestStepper.tsx b/frontend/packages/akr/src/components/contactRequest/ContactRequestStepper.tsx
@@ -1,5 +1,4 @@
 import { Step, StepLabel, Stepper, Typography } from '@mui/material';
-import { visuallyHidden } from '@mui/utils';
 import { CircularStepper } from 'shared/components';
 import { useWindowProperties } from 'shared/hooks';
 
@@ -48,12 +47,10 @@ export const ContactRequestStepper = () => {
     <div aria-label={t('ariaLabel')} role="group">
       <CircularStepper
         value={value}
-        aria-hidden={true}
         ariaLabel={ariaLabel}
         phaseText={text}
         size={90}
       />
-      <Typography sx={visuallyHidden}>{ariaLabel}</Typography>
     </div>
   ) : (
     <Stepper

diff --git a/frontend/packages/otr/package.json b/frontend/packages/otr/package.json
@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].5"
+    "shared": "npm:@opetushallitus/[email protected].8"
   }
 }
diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.8] - 2024-09-16
+### Fixed
+- Improve CircularStepper accessibility
+
 ## [1.10.7] - 2024-08-07
 
 ### Added

diff --git a/frontend/packages/shared/src/components/CircularStepper/CircularStepper.tsx b/frontend/packages/shared/src/components/CircularStepper/CircularStepper.tsx
@@ -1,7 +1,10 @@
 import { CircularProgress, CircularProgressProps } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
 
+import { Text } from '../../components';
 import { Color } from '../../enums/common';
 import { H3 } from '../Text/Text';
+
 import './CircularStepper.scss';
 
 interface CircularStepperProps extends CircularProgressProps {
@@ -19,14 +22,16 @@ export const CircularStepper = ({
     <div className="circular-stepper">
       <CircularProgress
         aria-label={ariaLabel}
+        aria-hidden={true}
         className="circular-stepper__progress"
         color={Color.Secondary}
         variant="determinate"
         {...rest}
       />
-      <div className="circular-stepper__heading">
+      <div className="circular-stepper__heading" aria-hidden={true}>
         <H3>{phaseText}</H3>
       </div>
+      <Text sx={visuallyHidden}>{ariaLabel}</Text>
     </div>
   );
 };
diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].7"
+    "shared": "npm:@opetushallitus/[email protected].8"
   }
 }
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx
@@ -71,24 +71,14 @@ export const PublicEnrollmentStepper = ({
 
   const stepValue = Math.min(activeStep, doneStepNumber);
 
-  const currentStep = `${t('currentStep')}: ${getDescription(stepValue)}.`;
-  const nextStep =
-    stepValue + 1 <= doneStepNumber
-      ? `${t('nextStep')}: ${getDescription(stepValue + 1)}.`
-      : '';
-
   const mobileStepValue = stepValue * (100 / doneStepNumber);
   const mobilePhaseText = `${stepValue}/${doneStepNumber}`;
-  const mobileAriaLabel = `${getPhaseDescription(stepValue)}
-  ${currentStep}
-  ${nextStep}`;
 
   return isPhone ? (
     <div role="group" aria-label={t('phases')}>
       <CircularStepper
         value={mobileStepValue}
-        aria-hidden={true}
-        ariaLabel={mobileAriaLabel}
+        ariaLabel={getPhaseDescription(stepValue)}
         phaseText={mobilePhaseText}
         color={
           activeStep === PublicEnrollmentFormStep.Payment
@@ -97,9 +87,6 @@ export const PublicEnrollmentStepper = ({
         }
         size={90}
       />
-      <Typography sx={visuallyHidden}>
-        {getPhaseDescription(stepValue)}
-      </Typography>
     </div>
   ) : (
     <Stepper

diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].6"
+    "shared": "npm:@opetushallitus/[email protected].8"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx b/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx
@@ -86,15 +86,13 @@ export const PublicRegistrationStepper = () => {
       >
         <CircularStepper
           value={mobileStepValue}
-          aria-hidden={true}
           ariaLabel={mobileAriaLabel}
           phaseText={phaseText}
           color={isError ? Color.Error : Color.Secondary}
           size={90}
         />
-        <Text sx={visuallyHidden}>{mobileAriaLabel}</Text>
         <div className="rows">
-          <Typography component="p" variant="h2">
+          <Typography component="p" variant="h2" aria-hidden={true}>
             {getDescription(stepValue)}
           </Typography>
           {!isError && <Text>{getNextInformation(stepValue)}</Text>}