⚡️(a11y) improve keyboard access for language menu and action buttons

Enhances nav for language switch and makes DocsGridActions buttons accessible

Signed-off-by: Cyril <c.gromoff@gmail.com>

src/frontend/apps/e2e/__tests__/app-impress/home.spec.ts

@@ -15,10 +15,13 @@ test.describe('Home page', () => {
     const header = page.locator('header').first();
     const footer = page.locator('footer').first();
     await expect(header).toBeVisible();
-    await expect(
-      header.getByRole('button', { name: /Language/ }),
-    ).toBeVisible();
-    await expect(header.getByRole('img', { name: 'Docs logo' })).toBeVisible();
+
+    const languageButton = page.getByRole('button', {
+      name: /Language|Select language/,
+    });
+    await expect(languageButton).toBeVisible();
+
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
     await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible();
 
     // Check the titles
@@ -65,20 +68,31 @@ test.describe('Home page', () => {
 
     await page.goto('/docs/');
 
+    // Wait for the page to be fully loaded and responsive store to be initialized
+    await page.waitForLoadState('domcontentloaded');
+
+    // Wait a bit more for the responsive store to be initialized
+    await page.waitForTimeout(500);
+
     // Check header content
     const header = page.locator('header').first();
     const footer = page.locator('footer').first();
     await expect(header).toBeVisible();
-    await expect(
-      header.getByRole('button', { name: /Language/ }),
-    ).toBeVisible();
+
+    // Check for language picker - it should be visible on desktop
+    // Use a more flexible selector that works with both Header and HomeHeader
+    const languageButton = page.getByRole('button', {
+      name: /Language|Select language/,
+    });
+    await expect(languageButton).toBeVisible();
+
     await expect(
       header.getByRole('button', { name: 'Les services de La Suite numé' }),
     ).toBeVisible();
     await expect(
       header.getByRole('img', { name: 'Gouvernement Logo' }),
     ).toBeVisible();
-    await expect(header.getByRole('img', { name: 'Docs logo' })).toBeVisible();
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
     await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible();
 
     // Check the titles

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -9,6 +9,7 @@ test.describe('Language', () => {
 
   test('checks language switching', async ({ page }) => {
     const header = page.locator('header').first();
+    const languagePicker = header.locator('.--docs--language-picker-text');
 
     await expect(page.locator('html')).toHaveAttribute('lang', 'en-us');
 
@@ -30,13 +31,49 @@ test.describe('Language', () => {
 
     await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
-    await header.getByRole('button').getByText('Français').click();
-    await page.getByLabel('Deutsch').click();
+    // Switch to German using the utility function for consistency
+    await waitForLanguageSwitch(page, TestLanguage.German);
     await expect(header.getByRole('button').getByText('Deutsch')).toBeVisible();
 
     await expect(page.getByLabel('Abmelden')).toBeVisible();
 
     await expect(page.locator('html')).toHaveAttribute('lang', 'de');
+
+    await languagePicker.click();
+
+    await expect(page.locator('[role="menu"]')).toBeVisible();
+
+    const menuItems = page.getByRole('menuitem');
+    await expect(menuItems.first()).toBeVisible();
+
+    await menuItems.first().click();
+
+    await expect(page.locator('html')).toHaveAttribute('lang', 'en');
+    await expect(languagePicker).toContainText('English');
+  });
+  test('can switch language using only keyboard', async ({ page }) => {
+    await page.goto('/');
+    await waitForLanguageSwitch(page, TestLanguage.English);
+
+    const languagePicker = page.getByRole('button', {
+      name: /select language/i,
+    });
+
+    await expect(languagePicker).toBeVisible();
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+
+    await page.keyboard.press('Enter');
+
+    const menu = page.getByRole('menu');
+    await expect(menu).toBeVisible();
+
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+
+    await expect(page.locator('html')).not.toHaveAttribute('lang', 'en-us');
   });
 
   test('checks that backend uses the same language as the frontend', async ({

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -29,7 +29,9 @@ test.describe('Left panel mobile', () => {
     const header = page.locator('header').first();
     const homeButton = page.getByTestId('home-button');
     const newDocButton = page.getByTestId('new-doc-button');
-    const languageButton = page.getByRole('button', { name: /Language/ });
+    const languageButton = page.getByRole('button', {
+      name: 'Select language',
+    });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 
     await expect(homeButton).not.toBeInViewport();