YKI:VKT:AKR(Frontend): Improve stepper accessibility

Opetushallitus · May 13, 2024 · d9eae1f · d9eae1f
1 parent d4f857c
commit d9eae1f
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 73 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
@@ -212,6 +212,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,40 +23,49 @@ 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

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/shared/src/components/ComboBox/ComboBox.tsx b/frontend/packages/shared/src/components/ComboBox/ComboBox.tsx
@@ -23,6 +23,7 @@ interface ComboBoxProps {
   showInputLabel?: boolean;
   helperText?: string;
   showError?: boolean;
+  useNativeSelect?: boolean;
   variant: 'filled' | 'outlined' | 'standard';
   getOptionLabel?: (option: AutocompleteValue) => string;
   values: Array<ComboBoxOption>;
@@ -81,6 +82,7 @@ const NativeSelectOrComboBox = ({
   helperText,
   showError,
   onChange,
+  useNativeSelect,
   ...rest
 }: ComboBoxProps & AutoCompleteComboBox) => {
   const { isPhone } = useWindowProperties();
@@ -90,7 +92,7 @@ const NativeSelectOrComboBox = ({
     return activeOption ? activeOption.label : '';
   };
 
-  if (isPhone) {
+  if (useNativeSelect || isPhone) {
     const nativeSelectProps: CustomNativeSelectProps = {
       placeholder: label || '',
       values,
@@ -117,14 +119,18 @@ const NativeSelectOrComboBox = ({
         isOptionEqualToValue={isOptionEqualToValue}
         options={values}
         filterOptions={filterOptions}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label={label}
-            variant={variant}
-            error={showError}
-          />
-        )}
+        closeText=""
+        openText=""
+        renderInput={(params) => {
+          console.log(params);
+          return (
+            <TextField
+              {...params}
+              label={label}
+              variant={variant}
+              error={showError}
+            />
+          )}}
         onChange={(_, v: AutocompleteValue) => {
           onChange(v?.value);
         }}

diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json
@@ -75,6 +75,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
@@ -75,6 +75,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
@@ -84,7 +84,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,5 @@
-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';
@@ -34,15 +35,16 @@ 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;
 
-    return `${t('phase')} ${partStatus}: ${getDescription(stepNumber)}`;
+    return `${t('phase')} ${partStatus}`;
   };
 
   const getDesktopActiveStep = () => {
@@ -66,48 +68,61 @@ 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 */}
+            <Typography sx={visuallyHidden}>
+              {getPhaseDescription(step)}
+            </Typography>
             {getDescription(step)}
           </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,13 +252,15 @@
         "stepper": {
           "active": "Active",
           "completed": "Completed",
+          "label": "Registration steps",
           "paymentAborted": "Payment was cancelled",
           "phase": "Phase",
+          "phaseNumber": "{{current}} of {{total}}",
           "step": {
             "Done": "Done",
             "Identify": "Identify",
             "Payment": "Payment",
-            "Register": "Register"
+            "Register": "Registebir"
           },
           "welcomeToExam": "Welcome to the YKI test!"
         },

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",