diff --git a/formulus-formplayer/src/components/FormProgressBar.test.tsx b/formulus-formplayer/src/components/FormProgressBar.test.tsx index 1c50d9a53..1f6879da8 100644 --- a/formulus-formplayer/src/components/FormProgressBar.test.tsx +++ b/formulus-formplayer/src/components/FormProgressBar.test.tsx @@ -4,6 +4,8 @@ import { describe, it, expect, vi, afterEach } from 'vitest'; import { render, screen, cleanup } from '@testing-library/react'; import { ThemeProvider, createTheme } from '@mui/material/styles'; import FormProgressBar from './FormProgressBar'; +import { FormplayerLocaleContext } from '../i18n/FormplayerLocaleContext'; +import type { OdeUiLocale } from '../i18n/localeUtils'; const theme = createTheme(); @@ -11,17 +13,20 @@ afterEach(() => cleanup()); const renderBar = ( props: Partial> = {}, + locale: OdeUiLocale = 'en', ) => render( - + + + , ); @@ -73,4 +78,12 @@ describe('FormProgressBar header navigation', () => { expect(onNavigatePrevious).toHaveBeenCalledTimes(1); expect(onNavigateNext).toHaveBeenCalledTimes(1); }); + + it('uses Portuguese accessible labels when the ODE UI locale is pt', () => { + renderBar({}, 'pt'); + expect(screen.getByLabelText('Ecrã anterior')).toBeInTheDocument(); + expect(screen.getByLabelText('Ecrã seguinte')).toBeInTheDocument(); + expect(screen.queryByLabelText('Previous screen')).toBeNull(); + expect(screen.queryByLabelText('Next screen')).toBeNull(); + }); }); diff --git a/formulus-formplayer/src/components/FormProgressBar.tsx b/formulus-formplayer/src/components/FormProgressBar.tsx index 0a90c109f..ae1d13a87 100644 --- a/formulus-formplayer/src/components/FormProgressBar.tsx +++ b/formulus-formplayer/src/components/FormProgressBar.tsx @@ -3,6 +3,7 @@ import { Box, IconButton, LinearProgress, Typography } from '@mui/material'; import ChevronLeft from '@mui/icons-material/ChevronLeft'; import ChevronRight from '@mui/icons-material/ChevronRight'; import { tokens } from '../theme/tokens-adapter'; +import { useOdeT } from '../i18n/useOdeT'; type JsonSchema = { type?: string | string[]; @@ -152,6 +153,7 @@ const FormProgressBar: React.FC = ({ canNavigateNext = false, navigationDisabled = false, }) => { + const t = useOdeT(); const progress = useMemo(() => { if (mode === 'screens' || mode === 'both') { if (totalScreens === 0) return 0; @@ -226,7 +228,7 @@ const FormProgressBar: React.FC = ({ = ({