fix(formplayer): localize progress bar navigation labels

formulus-formplayer/src/components/FormProgressBar.test.tsx

@@ -4,24 +4,29 @@ 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();
 
 afterEach(() => cleanup());
 
 const renderBar = (
   props: Partial<React.ComponentProps<typeof FormProgressBar>> = {},
+  locale: OdeUiLocale = 'en',
 ) =>
   render(
     <ThemeProvider theme={theme}>
-      <FormProgressBar
-        currentPage={0}
-        totalScreens={3}
-        mode="screens"
-        onNavigatePrevious={vi.fn()}
-        onNavigateNext={vi.fn()}
-        {...props}
-      />
+      <FormplayerLocaleContext.Provider value={locale}>
+        <FormProgressBar
+          currentPage={0}
+          totalScreens={3}
+          mode="screens"
+          onNavigatePrevious={vi.fn()}
+          onNavigateNext={vi.fn()}
+          {...props}
+        />
+      </FormplayerLocaleContext.Provider>
     </ThemeProvider>,
   );
 
@@ -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();
+  });
 });

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<FormProgressBarProps> = ({
   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<FormProgressBarProps> = ({
           <IconButton
             type="button"
             size="small"
-            aria-label="Previous screen"
+            aria-label={t('nav.previousScreen', 'Previous screen')}
             onClick={handlePrev}
             disabled={prevDisabled}
             edge="start"
@@ -272,7 +274,7 @@ const FormProgressBar: React.FC<FormProgressBarProps> = ({
           <IconButton
             type="button"
             size="small"
-            aria-label="Next screen"
+            aria-label={t('nav.nextScreen', 'Next screen')}
             onClick={handleNext}
             disabled={nextDisabled}
             edge="end"