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

…loy]
Opetushallitus · Sep 19, 2024 · e816f16 · e816f16
1 parent 82afbbe
commit e816f16
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 40 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].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
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 { Step, StepLabel, Stepper } from '@mui/material';
 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].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
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.11.2] - 2024-09-16
+### Fixed
+- Improve CircularStepper accessibility
+
 ## [1.11.1] - 2024-09-13
 
 ### Fixed

diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.11.1",
+  "version": "1.11.2",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

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].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }
diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx
@@ -66,24 +66,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
@@ -92,9 +82,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].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   },
   "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>}

diff --git a/...i/src/tests/jest/components/registration/__snapshots__/InitRegistrationPage.test.tsx.snap b/...i/src/tests/jest/components/registration/__snapshots__/InitRegistrationPage.test.tsx.snap
@@ -687,7 +687,7 @@ exports[`InitRegistrationPage should prompt user to first identify if post-admis
                   className="MuiStepLabel-label Mui-active css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Identify
                   </p>
@@ -746,7 +746,7 @@ exports[`InitRegistrationPage should prompt user to first identify if post-admis
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Register
                   </p>
@@ -805,7 +805,7 @@ exports[`InitRegistrationPage should prompt user to first identify if post-admis
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Payment
                   </p>
@@ -864,7 +864,7 @@ exports[`InitRegistrationPage should prompt user to first identify if post-admis
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Done
                   </p>
@@ -1204,7 +1204,7 @@ exports[`InitRegistrationPage should prompt user to first identify if regular ad
                   className="MuiStepLabel-label Mui-active css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Identify
                   </p>
@@ -1263,7 +1263,7 @@ exports[`InitRegistrationPage should prompt user to first identify if regular ad
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Register
                   </p>
@@ -1322,7 +1322,7 @@ exports[`InitRegistrationPage should prompt user to first identify if regular ad
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Payment
                   </p>
@@ -1381,7 +1381,7 @@ exports[`InitRegistrationPage should prompt user to first identify if regular ad
                   className="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
                 >
                   <p
-                    className="MuiTypography-root MuiTypography-body1 css-1azqlft-MuiTypography-root"
+                    className="MuiTypography-root MuiTypography-body1 css-33u759-MuiTypography-root"
                   >
                     phase phaseNumber: step.Done
                   </p>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2588,15 +2588,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.akr@workspace:packages/akr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].1"
+    shared: "npm:@opetushallitus/[email protected].2"
   languageName: unknown
   linkType: soft
 
 "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].1"
+    shared: "npm:@opetushallitus/[email protected].2"
   languageName: unknown
   linkType: soft
 
@@ -2689,7 +2689,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].1":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].2":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -2700,7 +2700,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: "npm:^7.2.1"
-    shared: "npm:@opetushallitus/[email protected].1"
+    shared: "npm:@opetushallitus/[email protected].2"
   languageName: unknown
   linkType: soft
 
@@ -2709,7 +2709,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.yki@workspace:packages/yki"
   dependencies:
     multer: "npm:^1.4.5-lts.1"
-    shared: "npm:@opetushallitus/[email protected].1"
+    shared: "npm:@opetushallitus/[email protected].2"
   languageName: unknown
   linkType: soft