✨(frontend) fix toggle panel button a11y with dynamic label and aria-expanded

improves screen reader support by updating label and state indication dynamically

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

Author: Ovgodd

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
   - ♿(frontend) improve ARIA in doc grid and editor for a11y #1519
   - ♿(frontend) improve accessibility and styling of summary table #1528
   - ♿(frontend) add focus trap and enter key support to remove doc modal #1531
+  - ♿(frontend) fix toggle panel button a11y with dynamic label and aria-… #1634
 - 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
 - 🐛(frontend) make summary button fixed to remain visible during scroll #1581
 - 🐛(frontend) fix pdf embed to use full width #1526

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

@@ -12,7 +12,10 @@ 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}
       color="tertiary-text"
       icon={
         <Icon