✨(frontend) hide decorative icons from assistive tech with aria-hidden

improves accessibility by reducing screen reader noise from icon elements

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

Author: Ovgodd

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
 

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();
 };

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',

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"