From e5e5fba0b3c5f1f3f5ab809817087c1ae8eba237 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 18 Sep 2025 08:22:01 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20hide=20decorative=20icons?=
 =?UTF-8?q?=20from=20assistive=20tech=20with=20aria-hidden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

improves accessibility by reducing screen reader noise from icon elements

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                                 | 1 +
 .../apps/e2e/__tests__/app-impress/utils-sub-pages.ts        | 2 +-
 src/frontend/apps/impress/src/components/Icon.tsx            | 5 +++++
 .../features/docs/doc-tree/components/DocTreeItemActions.tsx | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eba857d2c5..359e52342a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to
   - ♿ improve accessibility by adding landmark roles to layout #1394
   - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
+  - ♿ hide decorative icons from assistive tech with aria-hidden #1404
 
 ### Fixed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts b/src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts
index 92a900ab77..81d76d9c1a 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts
@@ -63,5 +63,5 @@ export const clickOnAddRootSubPage = async (page: Page) => {
   const rootItem = page.getByTestId('doc-tree-root-item');
   await expect(rootItem).toBeVisible();
   await rootItem.hover();
-  await rootItem.getByRole('button', { name: 'add_box' }).click();
+  await rootItem.getByRole('button', { name: /add subpage/i }).click();
 };
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index c99d3f9924..b0820169dd 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -12,9 +12,14 @@ export const Icon = ({
   variant = 'outlined',
   ...textProps
 }: IconProps) => {
+  const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
+  const ariaHidden =
+    'aria-hidden' in textProps ? textProps['aria-hidden'] : !hasLabel;
+
   return (
     <Text
       {...textProps}
+      aria-hidden={ariaHidden}
       className={clsx('--docs--icon-bg', textProps.className, {
         'material-icons-filled': variant === 'filled',
         'material-icons': variant === 'outlined',
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
index 1c3e0c7479..5d2285e786 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
@@ -181,6 +181,7 @@ export const DocTreeItemActions = ({
               });
             }}
             color="primary"
+            aria-label={t('Add subpage')}
           >
             <Icon
               variant="filled"