YKI:VKT:AKR(Frontend): Improve stepper accessibility [deploy]

Opetushallitus · Sep 17, 2024 · e60a2ad · e60a2ad
1 parent 1fe0973
commit e60a2ad
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 80 deletions.
diff --git a/frontend/packages/akr/public/i18n/en-GB/translation.json b/frontend/packages/akr/public/i18n/en-GB/translation.json
@@ -196,6 +196,8 @@
         "steps": {
           "active": "Active",
           "completed": "Completed",
+          "ariaLabel": "Contact request steps",
+          "phaseNumber": "{{current}} of {{total}}",
           "Done": "Complete!",
           "FillContactDetails": "Fill in contact details",
           "PreviewAndSend": "Preview and send",

diff --git a/frontend/packages/akr/public/i18n/fi-FI/translation.json b/frontend/packages/akr/public/i18n/fi-FI/translation.json
@@ -213,6 +213,8 @@
         "recipients": "Vastaanottajat",
         "steps": {
           "active": "Aktiivinen",
+          "ariaLabel": "Yhteydenottopyynnön vaiheet",
+          "phaseNumber": "{{current}} kautta {{total}}",
           "completed": "Suoritettu",
           "Done": "Valmis!",
           "FillContactDetails": "Täytä yhteystietosi",

diff --git a/frontend/packages/akr/public/i18n/sv-SE/translation.json b/frontend/packages/akr/public/i18n/sv-SE/translation.json
@@ -196,6 +196,8 @@
         "steps": {
           "active": "Aktiv",
           "completed": "Utfört",
+          "ariaLabel": "Kontaktförfrågans faser",
+          "phaseNumber": "{{current}} av {{total}}",
           "Done": "Klart!",
           "FillContactDetails": "Fyll i kontaktuppgifter",
           "PreviewAndSend": "Förhandsgranska och sänd",

diff --git a/frontend/packages/akr/src/components/contactRequest/ContactRequestStepper.tsx b/frontend/packages/akr/src/components/contactRequest/ContactRequestStepper.tsx
@@ -1,4 +1,5 @@
-import { Step, StepLabel, Stepper } from '@mui/material';
+import { Step, StepLabel, Stepper, Typography } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
 import { CircularStepper } from 'shared/components';
 import { useWindowProperties } from 'shared/hooks';
 
@@ -22,48 +23,57 @@ export const ContactRequestStepper = () => {
   const value = activeStep * (100 / maxStep);
   const stepAriaLabel = (step: number) => {
     const phaseDescription = t(ContactRequestFormStep[step]);
-    const phaseNumberPart = `${step}/${maxStep}`;
+    const phaseNumberPart = t('phaseNumber', {
+      current: step,
+      total: maxStep,
+    });
     if (step < activeStep) {
       return `${phasePrefix} ${phaseNumberPart}, ${t(
         'completed',
       )}: ${phaseDescription}`;
-    } else if (step == activeStep) {
-      return `${phasePrefix} ${phaseNumberPart}, ${t(
-        'active',
-      )}: ${phaseDescription}`;
     } else {
       return `${phasePrefix} ${phaseNumberPart}: ${phaseDescription}`;
     }
   };
+
   const text = `${activeStep}/${maxStep}`;
+  const ariaText = t('phaseNumber', {
+    current: activeStep,
+    total: maxStep,
+  });
 
-  const ariaLabel = `${translateCommon('phase')} ${text}: ${t(
-    ContactRequestFormStep[activeStep],
-  )}`;
+  const ariaLabel = `${translateCommon('phase')} ${ariaText}`;
 
   return isPhone ? (
-    <CircularStepper
-      value={value}
-      ariaLabel={ariaLabel}
-      phaseText={text}
-      size={90}
-    />
+    <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
+      aria-label={t('ariaLabel')}
+      role="group"
       className="contact-request-page__stepper"
       activeStep={activeStep - 1}
     >
       {stepNumbers.map((v) => (
         <Step key={v}>
           <StepLabel
+            aria-current={activeStep === v && 'step'}
             aria-label={stepAriaLabel(v)}
             className={
               activeStep < v
                 ? 'contact-request-page__stepper__step--disabled'
                 : undefined
             }
           >
-            {t(ContactRequestFormStep[v])}
+            <span aria-hidden={true}>{t(ContactRequestFormStep[v])}</span>
           </StepLabel>
         </Step>
       ))}

diff --git a/frontend/packages/akr/src/pages/ContactRequestPage.tsx b/frontend/packages/akr/src/pages/ContactRequestPage.tsx
@@ -1,4 +1,4 @@
-import { Grid, Paper } from '@mui/material';
+import { Grid, Paper, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { H1, HeaderSeparator, Text } from 'shared/components';
 import { useWindowProperties } from 'shared/hooks';
@@ -64,7 +64,9 @@ export const ContactRequestPage = () => {
       <div className="contact-request-page__grid__stepper-container columns gapped">
         <ContactRequestStepper />
         <div className="rows">
-          <H1>{t(`steps.${ContactRequestFormStep[activeStep]}`)}</H1>
+          <Typography component="p" variant="h2">
+            {t(`steps.${ContactRequestFormStep[activeStep]}`)}
+          </Typography>
           {ContactRequestFormStep[nextStep] && (
             <Text>
               {translateCommon('next')}:{' '}

diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
@@ -79,6 +79,7 @@
         "stepper": {
           "active": "Aktiivinen",
           "completed": "Suoritettu",
+          "label": "Ilmoittautumisen vaiheet",
           "phase": "Vaihe",
           "phaseNumber": "{{current}} kautta {{total}}",
           "phases": "Ilmoittautumisen vaiheet",

diff --git a/frontend/packages/vkt/public/i18n/sv-SE/public.json b/frontend/packages/vkt/public/i18n/sv-SE/public.json
@@ -78,6 +78,7 @@
         "stepper": {
           "active": "Aktiv",
           "completed": "Utfört",
+          "label": "Anmälningens faser",
           "phase": "Fas",
           "phaseNumber": "{{current}} av {{total}}",
           "phases": "Anmälningens faser",

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentPhoneGrid.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentPhoneGrid.tsx
@@ -88,7 +88,7 @@ export const PublicEnrollmentPhoneGrid = ({
 
   const getMobileStepperHeading = () => {
     const heading = (
-      <Typography component="h1" variant="h2">
+      <Typography component="p" variant="h2">
         {t(`stepHeading.common.${PublicEnrollmentFormStep[activeStep]}`)}
       </Typography>
     );

diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx
@@ -1,4 +1,6 @@
-import { Step, StepLabel, Stepper } from '@mui/material';
+import { Step, StepLabel, Stepper, Typography } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import { useEffect } from 'react';
 import { CircularStepper } from 'shared/components';
 import { Color } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
@@ -28,11 +30,12 @@ export const PublicEnrollmentStepper = ({
     return t(`step.${PublicEnrollmentFormStep[step]}`);
   };
 
-  const getStepAriaLabel = (stepNumber: number, stepIndex: number) => {
+  const getPhaseDescription = (stepNumber: number) => {
     const part = t('phaseNumber', {
-      current: stepIndex + 1,
-      total: steps.length,
+      current: stepNumber,
+      total: doneStepNumber,
     });
+
     const statusText = isStepCompleted(stepNumber) ? t('completed') : '';
     const partStatus = statusText ? `${part}, ${statusText}` : part;
 
@@ -63,49 +66,62 @@ 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 = `${t('phase')} ${mobilePhaseText}: ${t(
-    `step.${PublicEnrollmentFormStep[activeStep]}`,
-  )}`;
+  const mobileAriaLabel = `${getPhaseDescription(stepValue)}
+  ${currentStep}
+  ${nextStep}`;
 
   return isPhone ? (
-    <CircularStepper
-      value={mobileStepValue}
-      ariaLabel={mobileAriaLabel}
-      phaseText={mobilePhaseText}
-      color={
-        activeStep === PublicEnrollmentFormStep.Payment
-          ? Color.Error
-          : Color.Secondary
-      }
-      size={90}
-    />
+    <div role="group" aria-label={t('phases')}>
+      <CircularStepper
+        value={mobileStepValue}
+        aria-hidden={true}
+        ariaLabel={mobileAriaLabel}
+        phaseText={mobilePhaseText}
+        color={
+          activeStep === PublicEnrollmentFormStep.Payment
+            ? Color.Error
+            : Color.Secondary
+        }
+        size={90}
+      />
+      <Typography sx={visuallyHidden}>
+        {getPhaseDescription(stepValue)}
+      </Typography>
+    </div>
   ) : (
     <Stepper
       className="public-enrollment__grid__stepper"
       activeStep={getDesktopActiveStep()}
       aria-label={t('phases')}
+      role="group"
     >
       {steps.map((step, index) => (
         <Step
           data-testid={`enrollment-step-${index}`}
           key={step}
           completed={isStepCompleted(step)}
         >
-          {/* eslint-disable jsx-a11y/aria-role */}
           <StepLabel
             error={hasError(step)}
-            aria-label={getStepAriaLabel(step, index)}
-            role="text"
+            aria-current={getDesktopActiveStep() === step - 1 && 'step'}
             className={
               activeStep < step
                 ? 'public-enrollment__grid__stepper__step-disabled'
                 : undefined
             }
           >
-            {/* eslint-enable */}
-            {getDescription(step)}
+            <Typography sx={visuallyHidden}>
+              {getPhaseDescription(step)}
+            </Typography>
+            <span aria-hidden={true}>{getDescription(step)}</span>
           </StepLabel>
         </Step>
       ))}

diff --git a/frontend/packages/yki/public/i18n/en-GB/public.json b/frontend/packages/yki/public/i18n/en-GB/public.json
@@ -252,8 +252,10 @@
         "stepper": {
           "active": "Active",
           "completed": "Completed",
+          "label": "Registration steps",
           "paymentAborted": "Payment was cancelled",
           "phase": "Phase",
+          "phaseNumber": "{{current}} of {{total}}",
           "step": {
             "Done": "Done",
             "Identify": "Identify",

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,10 @@
         "stepper": {
           "active": "Aktiivinen",
           "completed": "Suoritettu",
+          "label": "Ilmoittautumisen vaiheet",
           "paymentAborted": "Maksu keskeytyi",
           "phase": "Vaihe",
+          "phaseNumber": "{{current}} kautta {{total}}",
           "step": {
             "Done": "Valmis",
             "Identify": "Tunnistaudu",

diff --git a/frontend/packages/yki/public/i18n/sv-SE/public.json b/frontend/packages/yki/public/i18n/sv-SE/public.json
@@ -252,8 +252,10 @@
         "stepper": {
           "active": "Aktiv",
           "completed": "Genomförd",
+          "label": "Anmälningens faser",
           "paymentAborted": "Betalningen kunde inte genomföras",
           "phase": "Skede",
+          "phaseNumber": "{{current}} av {{total}}",
           "step": {
             "Done": "Färdig",
             "Identify": "Identifiera dig",

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 { Step, StepLabel, Stepper, Typography } 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';
 
@@ -38,14 +39,6 @@ export const PublicRegistrationStepper = () => {
     .map(Number)
     .filter((i) => i <= doneStepNumber);
 
-  const getStatusText = (stepNumber: number) => {
-    if (stepNumber < activeStep) {
-      return t('completed');
-    } else if (stepNumber === activeStep) {
-      return t('active');
-    }
-  };
-
   const getDescription = (stepNumber: number) => {
     return t(`step.${PublicRegistrationFormStep[stepNumber]}`);
   };
@@ -60,9 +53,16 @@ export const PublicRegistrationStepper = () => {
     }
   };
 
-  const getStepAriaLabel = (stepNumber: number) => {
-    const part = `${stepNumber}/${stepNumbers.length}`;
-    const statusText = getStatusText(stepNumber);
+  const isStepCompleted = (step: number) => {
+    return step < activeStep;
+  };
+
+  const getPhaseDescription = (stepNumber: number) => {
+    const part = t('phaseNumber', {
+      current: stepNumber,
+      total: stepNumbers.length,
+    });
+    const statusText = isStepCompleted(stepNumber) ? t('completed') : '';
     const partStatus = statusText ? `${part}, ${statusText}` : part;
 
     return `${t('phase')} ${partStatus}: ${getDescription(stepNumber)}`;
@@ -74,23 +74,29 @@ export const PublicRegistrationStepper = () => {
       : Math.min(activeStep, doneStepNumber);
 
   const mobileStepValue = stepValue * (100 / doneStepNumber);
-  const mobilePhaseText = `${stepValue}/${doneStepNumber}`;
-  const mobileAriaLabel = `${t('phase')} ${mobilePhaseText}: ${getDescription(
-    stepValue,
-  )}`;
+  const phaseText = `${stepValue}/${doneStepNumber}`;
+  const mobileAriaLabel = `${getPhaseDescription(stepValue)}`;
 
   if (isPhone) {
     return (
-      <div className="columns gapped-xxl public-registration__grid__circular-stepper-container">
+      <div
+        className="columns gapped-xxl public-registration__grid__circular-stepper-container"
+        aria-label={t('label')}
+        role="group"
+      >
         <CircularStepper
           value={mobileStepValue}
+          aria-hidden={true}
           ariaLabel={mobileAriaLabel}
-          phaseText={mobilePhaseText}
+          phaseText={phaseText}
           color={isError ? Color.Error : Color.Secondary}
           size={90}
         />
+        <Text sx={visuallyHidden}>{mobileAriaLabel}</Text>
         <div className="rows">
-          <H2>{getDescription(stepValue)}</H2>
+          <Typography component="p" variant="h2">
+            {getDescription(stepValue)}
+          </Typography>
           {!isError && <Text>{getNextInformation(stepValue)}</Text>}
         </div>
       </div>
@@ -99,13 +105,15 @@ export const PublicRegistrationStepper = () => {
     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}
+              aria-current={stepValue === i && 'step'}
               className={
                 stepValue === i && isError
                   ? 'public-registration__grid__stepper__step-error'
@@ -114,7 +122,8 @@ export const PublicRegistrationStepper = () => {
                   : undefined
               }
             >
-              {getDescription(i)}
+              <Text sx={visuallyHidden}>{getPhaseDescription(i)}</Text>
+              <span aria-hidden={true}>{getDescription(i)}</span>
             </StepLabel>
           </Step>
         ))}