Merge pull request #713 from Opetushallitus/feature/OPHYKIKEH-218-new

YKI:VKT:AKR(Frontend): OPHYKIKEH-218 Improve stepper accessibility

Author: lket

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

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

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

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

frontend/packages/akr/src/components/contactRequest/ContactRequestStepper.tsx

@@ -22,48 +22,55 @@ 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}
+        ariaLabel={ariaLabel}
+        phaseText={text}
+        size={90}
+      />
+    </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>
       ))}

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';
@@ -61,7 +61,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')}:{' '}

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

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

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

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>
   );
 };