diff --git a/frontend/packages/akr/public/i18n/en-GB/translation.json b/frontend/packages/akr/public/i18n/en-GB/translation.json index 221d17364..d135f995a 100644 --- 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 index 94b7bb56c..3fb701724 100644 --- 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 index 204840e3f..194cd534e 100644 --- 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 index 1d04aa930..4c3429582 100644 --- 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 ? ( - +
+ + {ariaLabel} +
) : ( {stepNumbers.map((v) => ( {
-

{t(`steps.${ContactRequestFormStep[activeStep]}`)}

+ + {t(`steps.${ContactRequestFormStep[activeStep]}`)} + {ContactRequestFormStep[nextStep] && ( {translateCommon('next')}:{' '} diff --git a/frontend/packages/shared/src/components/ComboBox/ComboBox.tsx b/frontend/packages/shared/src/components/ComboBox/ComboBox.tsx index 0bf3e7301..014772e68 100644 --- 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; @@ -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) => ( - - )} + closeText="" + openText="" + renderInput={(params) => { + console.log(params); + return ( + + )}} 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 index 23469f1df..93aeac908 100644 --- 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 index 5f964e14a..4da414bbd 100644 --- 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 index 84759bc40..6baddf2e0 100644 --- 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 = ( - + {t(`stepHeading.common.${PublicEnrollmentFormStep[activeStep]}`)} ); diff --git a/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx b/frontend/packages/vkt/src/components/publicEnrollment/PublicEnrollmentStepper.tsx index df84b165b..50deacea4 100644 --- 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,29 +68,42 @@ 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 ? ( - +
+ + + {getPhaseDescription(stepValue)} + +
) : ( {steps.map((step, index) => ( - {/* eslint-disable jsx-a11y/aria-role */} - {/* eslint-enable */} + + {getPhaseDescription(step)} + {getDescription(step)} diff --git a/frontend/packages/yki/public/i18n/en-GB/public.json b/frontend/packages/yki/public/i18n/en-GB/public.json index d7d6ffbd3..4faf9c9fd 100644 --- 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 index c47ec756e..116990156 100644 --- 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 index 146424de0..f35feb2fc 100644 --- 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 index f089e3b6b..915b8ab09 100644 --- 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,12 +53,19 @@ 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)}`; + return `${t('phase')} ${partStatus}`; }; const stepValue = @@ -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 ( -
+
+ {mobileAriaLabel}
-

{getDescription(stepValue)}

+ + {getDescription(stepValue)} + {!isError && {getNextInformation(stepValue)}}
@@ -99,13 +105,15 @@ export const PublicRegistrationStepper = () => { return ( {stepNumbers.map((i) => ( { : undefined } > + {getPhaseDescription(i)} {getDescription(i)} diff --git a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingFilters.tsx b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingFilters.tsx index f15637f9c..c3a33636a 100644 --- a/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingFilters.tsx +++ b/frontend/packages/yki/src/components/registration/examSession/PublicExamSessionListingFilters.tsx @@ -186,6 +186,7 @@ const SelectExamLevel = ({ aria-label={t('labels.selectLevel')} showError={showError && !level} helperText={showError && !level ? t('filters.errors.required') : ''} + useNativeSelect={true} /> );