YKI(Frontend): Improve stepper accessibility [deploy]

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

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
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,39 +72,57 @@ 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}
+              aria-current={stepValue === i && 'step'}
               className={
                 stepValue === i && isError
                   ? 'public-registration__grid__stepper__step-error'

diff --git a/frontend/packages/yki/src/tests/cypress/support/page-objects/publicRegistrationPage.ts b/frontend/packages/yki/src/tests/cypress/support/page-objects/publicRegistrationPage.ts
@@ -4,8 +4,7 @@ class PublicRegistrationPage {
   elements = {
     filterByLanguage: () =>
       cy.findByRole('combobox', { name: /Valitse kieli/ }),
-    filterByLevel: () =>
-      cy.findByRole('combobox', { name: /Valitse taso/ }),
+    filterByLevel: () => cy.findByRole('combobox', { name: /Valitse taso/ }),
     resultBox: () =>
       cy.findByTestId('public-registration-page__grid-container__result-box'),
     showOnlyIfAvailablePlaces: () =>

diff --git a/.../yki/src/tests/jest/components/registration/examSession/PublicExamSessionListing.test.tsx b/.../yki/src/tests/jest/components/registration/examSession/PublicExamSessionListing.test.tsx
@@ -1,4 +1,3 @@
-import dayjs from 'dayjs';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import renderer from 'react-test-renderer';