✨(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>

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"