✨(frontend) fix toggle panel button a11y with dynamic label

improves screen sr by updating label and state indication dynamically

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 - ♿(frontend) improve accessibility:
   - ♿(frontend) add skip to content button for keyboard accessibility #1624
+  - ♿(frontend) fix toggle panel button a11y labels #1634
 
 ### Fixed
 
@@ -22,8 +23,6 @@ and this project adheres to
 - ✨ Add comments feature to the editor #1330
 - ✨(backend) Comments on text editor #1330
 - ✨(frontend) link to create new doc #1574
-- ♿(frontend) improve accessibility:
-  - ♿(frontend) add skip to content button for keyboard accessibility #1624
 
 ### Fixed
 

src/frontend/apps/e2e/__tests__/app-impress/doc-grid-dnd.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, mockedListDocs } from './utils-common';
+import { createDoc, mockedListDocs, toggleHeaderMenu } from './utils-common';
 import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Doc grid dnd', () => {
@@ -185,10 +185,7 @@ test.describe('Doc grid dnd mobile', () => {
       true,
     );
 
-    await page
-      .getByRole('button', { name: 'Open the header menu' })
-      .getByText('menu')
-      .click();
+    await toggleHeaderMenu(page);
 
     await expect(page.locator('.--docs-sub-page-item').first()).toHaveAttribute(
       'draggable',

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -83,6 +83,34 @@ export const randomName = (name: string, browserName: string, length: number) =>
     return `${browserName}-${Math.floor(Math.random() * 10000)}-${index}-${name}`;
   });
 
+export const openHeaderMenu = async (page: Page) => {
+  const toggleButton = page.getByTestId('header-menu-toggle');
+  await expect(toggleButton).toBeVisible();
+
+  const isExpanded =
+    (await toggleButton.getAttribute('aria-expanded')) === 'true';
+  if (!isExpanded) {
+    await toggleButton.click();
+  }
+};
+
+export const closeHeaderMenu = async (page: Page) => {
+  const toggleButton = page.getByTestId('header-menu-toggle');
+  await expect(toggleButton).toBeVisible();
+
+  const isExpanded =
+    (await toggleButton.getAttribute('aria-expanded')) === 'true';
+  if (isExpanded) {
+    await toggleButton.click();
+  }
+};
+
+export const toggleHeaderMenu = async (page: Page) => {
+  const toggleButton = page.getByTestId('header-menu-toggle');
+  await expect(toggleButton).toBeVisible();
+  await toggleButton.click();
+};
+
 export const createDoc = async (
   page: Page,
   docName: string,
@@ -94,10 +122,7 @@ export const createDoc = async (
 
   for (let i = 0; i < randomDocs.length; i++) {
     if (isMobile) {
-      await page
-        .getByRole('button', { name: 'Open the header menu' })
-        .getByText('menu')
-        .click();
+      await openHeaderMenu(page);
     }
 
     await page

src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts

@@ -2,6 +2,8 @@ import { Page, expect } from '@playwright/test';
 
 import {
   BrowserName,
+  closeHeaderMenu,
+  openHeaderMenu,
   randomName,
   updateDocTitle,
   verifyDocName,
@@ -15,10 +17,7 @@ export const createRootSubPage = async (
   isMobile = false,
 ) => {
   if (isMobile) {
-    await page
-      .getByRole('button', { name: 'Open the header menu' })
-      .getByText('menu')
-      .click();
+    await openHeaderMenu(page);
   }
 
   // Get response
@@ -29,10 +28,7 @@ export const createRootSubPage = async (
   const subPageJson = (await response.json()) as { id: string };
 
   if (isMobile) {
-    await page
-      .getByRole('button', { name: 'Open the header menu' })
-      .getByText('menu')
-      .click();
+    await openHeaderMenu(page);
   }
 
   // Get doc tree
@@ -44,13 +40,9 @@ export const createRootSubPage = async (
     .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
     .first();
   await expect(subPageItem).toBeVisible();
-  await subPageItem.click();
 
   if (isMobile) {
-    await page
-      .getByRole('button', { name: 'Open the header menu' })
-      .getByText('close')
-      .click();
+    await closeHeaderMenu(page);
   }
 
   // Update sub page name

src/frontend/apps/impress/src/features/header/components/ButtonTogglePanel.tsx

@@ -12,12 +12,16 @@ export const ButtonTogglePanel = () => {
     <Button
       size="medium"
       onClick={() => togglePanel()}
-      aria-label={t('Open the header menu')}
+      aria-label={t(
+        isPanelOpen ? 'Close the header menu' : 'Open the header menu',
+      )}
+      aria-expanded={isPanelOpen}
       variant="tertiary"
       icon={
         <Icon $withThemeInherited iconName={isPanelOpen ? 'close' : 'menu'} />
       }
       className="--docs--button-toggle-panel"
+      data-testid="header-menu-toggle"
     />
   );
 };