YKI(Frontend): Improve stepper accessibility [deploy]

Opetushallitus · Jan 19, 2024 · 7f024ba · 7f024ba
1 parent 30a12e0
commit 7f024ba
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 35 deletions.
diff --git a/frontend/packages/shared/src/components/CircularStepper/CircularStepper.tsx b/frontend/packages/shared/src/components/CircularStepper/CircularStepper.tsx
@@ -1,13 +1,12 @@
 import { CircularProgress, CircularProgressProps } from '@mui/material';
 
 import { Color } from '../../enums/common';
-import { H3 } from '../Text/Text';
 import './CircularStepper.scss';
 
 interface CircularStepperProps extends CircularProgressProps {
   value: number;
   phaseText: string;
-  ariaLabel: string;
+  ariaLabel: string | null;
 }
 
 export const CircularStepper = ({
@@ -19,13 +18,14 @@ export const CircularStepper = ({
     <div className="circular-stepper">
       <CircularProgress
         aria-label={ariaLabel}
+        aria-hidden={!ariaLabel}
         className="circular-stepper__progress"
         color={Color.Secondary}
         variant="determinate"
         {...rest}
       />
       <div className="circular-stepper__heading">
-        <H3>{phaseText}</H3>
+        <div>{phaseText}</div>
       </div>
     </div>
   );

diff --git a/frontend/packages/yki/public/i18n/fi-FI/public.json b/frontend/packages/yki/public/i18n/fi-FI/public.json
@@ -252,8 +252,11 @@
         "stepper": {
           "active": "Aktiivinen",
           "completed": "Suoritettu",
+          "label": "Ilmoittautumisen vaiheet.",
           "paymentAborted": "Maksu keskeytyi",
           "phase": "Vaihe",
+          "currentStep": "Nykyinen vaihe",
+          "nextStep": "Seuraava vaihe",
           "step": {
             "Done": "Valmis",
             "Identify": "Tunnistaudu",

diff --git a/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx b/frontend/packages/yki/src/components/registration/PublicRegistrationStepper.tsx
@@ -1,6 +1,7 @@
 import { Step, StepLabel, Stepper } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
 import { useSearchParams } from 'react-router-dom';
-import { CircularStepper, H2, Text } from 'shared/components';
+import { CircularStepper, Text } from 'shared/components';
 import { APIResponseStatus, Color } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
@@ -71,51 +72,72 @@ export const PublicRegistrationStepper = () => {
       ? PublicRegistrationFormStep.Payment
       : 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 = `${t('phase')} ${mobilePhaseText}: ${getDescription(
-    stepValue
-  )}`;
+  const mobileAriaLabel = `${t('phase')} ${mobilePhaseText}.
+  ${currentStep}
+  ${nextStep}`;
 
   if (isPhone) {
     return (
-      <div className="columns gapped-xxl public-registration__grid__circular-stepper-container">
-        <CircularStepper
-          value={mobileStepValue}
-          ariaLabel={mobileAriaLabel}
-          phaseText={mobilePhaseText}
-          color={isError ? Color.Error : Color.Secondary}
-          size={90}
-        />
-        <div className="rows">
-          <H2>{getDescription(stepValue)}</H2>
-          {!isError && <Text>{getNextInformation(stepValue)}</Text>}
+      <div
+        className="columns gapped-xxl public-registration__grid__circular-stepper-container"
+        aria-label={t('label')}
+        role="group"
+      >
+        <div aria-hidden={true}>
+          <CircularStepper
+            value={mobileStepValue}
+            ariaLabel={mobileAriaLabel}
+            phaseText={mobilePhaseText}
+            color={isError ? Color.Error : Color.Secondary}
+            size={90}
+          />
+          <div className="rows">
+            <div>{getDescription(stepValue)}</div>
+            {!isError && <Text>{getNextInformation(stepValue)}</Text>}
+          </div>
         </div>
+        <Text sx={visuallyHidden}>{mobileAriaLabel}</Text>
       </div>
     );
   } else {
+    // eslint-disable-next-line no-console
+    if (!getStepAriaLabel(1)) console.log('ei');
+
     return (
       <Stepper
         className="public-registration__grid__stepper"
+        aria-label={t('label')}
         activeStep={stepValue - 1}
+        role="group"
       >
-        {stepNumbers.map((i) => (
-          <Step key={i}>
-            <StepLabel
-              aria-label={getStepAriaLabel(i)}
-              error={isError && stepValue === i}
-              className={
-                stepValue === i && isError
-                  ? 'public-registration__grid__stepper__step-error'
-                  : stepValue < i
-                  ? 'public-registration__grid__stepper__step-disabled'
-                  : undefined
-              }
-            >
-              {getDescription(i)}
-            </StepLabel>
-          </Step>
-        ))}
+        <ul>
+          {stepNumbers.map((i) => (
+            <li key={i} aria-current={stepValue === i && 'step'}>
+              <Step key={i}>
+                <StepLabel
+                  error={isError && stepValue === i}
+                  className={
+                    stepValue === i && isError
+                      ? 'public-registration__grid__stepper__step-error'
+                      : stepValue < i
+                      ? 'public-registration__grid__stepper__step-disabled'
+                      : undefined
+                  }
+                >
+                  {getDescription(i)}
+                </StepLabel>
+              </Step>
+            </li>
+          ))}
+        </ul>
       </Stepper>
     );
   }