Merge branch 'dev' into feature/OPHKIOS-100 [deploy]

backend/vkt/src/main/java/fi/oph/vkt/service/PublicEnrollmentEmailService.java

@@ -245,8 +245,8 @@ public void sendPartiallyFreeEnrollmentConfirmationEmail(
     final String recipientAddress = enrollment.getEmail();
     final String subject = String.format(
       "%s | %s",
-      LocalisationUtil.translate(localeFI, "subject.enrollment-to-queue-confirmation"),
-      LocalisationUtil.translate(localeSV, "subject.enrollment-to-queue-confirmation")
+      LocalisationUtil.translate(localeFI, "subject.enrollment-confirmation"),
+      LocalisationUtil.translate(localeSV, "subject.enrollment-confirmation")
     );
     final String body = templateRenderer.renderEnrollmentConfirmationEmailBody(templateParams);
 

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

frontend/packages/vkt/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   }
 }

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

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

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

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;
 
@@ -65,47 +68,47 @@ export const PublicEnrollmentStepper = ({
 
   const mobileStepValue = stepValue * (100 / doneStepNumber);
   const mobilePhaseText = `${stepValue}/${doneStepNumber}`;
-  const mobileAriaLabel = `${t('phase')} ${mobilePhaseText}: ${t(
-    `step.${PublicEnrollmentFormStep[activeStep]}`,
-  )}`;
 
   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}
+        ariaLabel={getPhaseDescription(stepValue)}
+        phaseText={mobilePhaseText}
+        color={
+          activeStep === PublicEnrollmentFormStep.Payment
+            ? Color.Error
+            : Color.Secondary
+        }
+        size={90}
+      />
+    </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>
       ))}

frontend/packages/yki/package.json

@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].1"
+    "shared": "npm:@opetushallitus/[email protected].2"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

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

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

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