✨(feature) accessibility on Icon component

Add aria-hidden attribute to Icon component to
improve accessibility.
Add aria-label to DropdownMenu component when
selected.

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import { PropsWithChildren, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -38,6 +39,7 @@ export const DropdownMenu = ({
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const [isOpen, setIsOpen] = useState(false);
   const blockButtonRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
 
   const onOpenChange = (isOpen: boolean) => {
     setIsOpen(isOpen);
@@ -150,6 +152,7 @@ export const DropdownMenu = ({
                 $direction="row"
                 $align="center"
                 $gap={spacingsTokens['base']}
+                aria-selected={option.isSelected ? true : undefined}
               >
                 {option.icon && (
                   <Icon
@@ -164,7 +167,14 @@ export const DropdownMenu = ({
                 </Text>
               </Box>
               {option.isSelected && (
-                <Icon iconName="check" $size="20px" $theme="greyscale" />
+                <Icon
+                  role="img"
+                  iconName="check"
+                  $size="20px"
+                  $theme="greyscale"
+                  aria-label={t('Checked')}
+                  aria-hidden="false"
+                />
               )}
             </BoxButton>
           );

src/frontend/apps/impress/src/components/Icon.tsx

@@ -14,6 +14,7 @@ export const Icon = ({
 }: IconProps) => {
   return (
     <Text
+      aria-hidden="true"
       {...textProps}
       className={clsx('--docs--icon-bg', textProps.className, {
         'material-icons-filled': variant === 'filled',

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, HorizontalSeparator } from '@/components';
+import { Box, HorizontalSeparator, Icon } from '@/components';
 import { Doc, useCopyDocLink } from '@/features/docs';
 
 import { DocVisibility } from './DocVisibility';
@@ -36,7 +36,7 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
           fullWidth={false}
           onClick={copyDocLink}
           color="tertiary"
-          icon={<span className="material-icons">add_link</span>}
+          icon={<Icon iconName="add_link" />}
         >
           {t('Copy link')}
         </Button>

src/frontend/apps/impress/src/i18n/translations.json

@@ -62,6 +62,7 @@
       "Beautify": "Verschönern",
       "Can't load this page, please check your internet connection.": "Diese Seite kann nicht geladen werden. Bitte überprüfen Sie Ihre Internetverbindung.",
       "Cancel": "Abbrechen",
+      "Checked": "Angehakt",
       "Close the modal": "Pop up schliessen",
       "Collaborate": "Zusammenarbeiten",
       "Collaborate and write in real time, without layout constraints.": "In Echtzeit und ohne Layout-Beschränkungen schreiben und zusammenarbeiten.",
@@ -253,6 +254,7 @@
       "Callout": "Destacado",
       "Can't load this page, please check your internet connection.": "No se puede cargar esta página, por favor compruebe su conexión a Internet.",
       "Cancel": "Cancelar",
+      "Checked": "Marcado",
       "Close the modal": "Cerrar modal",
       "Collaborate": "Colabora",
       "Collaborate and write in real time, without layout constraints.": "Colaborar y escribir en tiempo real, sin restricciones de diseño.",
@@ -437,6 +439,7 @@
       "Callout": "Alerte",
       "Can't load this page, please check your internet connection.": "Impossible de charger cette page, veuillez vérifier votre connexion Internet.",
       "Cancel": "Annuler",
+      "Checked": "Coché",
       "Close the modal": "Fermer la modale",
       "Collaborate": "Collaborer",
       "Collaborate and write in real time, without layout constraints.": "Collaborez et rédigez en temps réel, sans contrainte de mise en page.",
@@ -625,6 +628,7 @@
       "Beautify": "Filtro bellezza",
       "Can't load this page, please check your internet connection.": "Impossibile caricare questa pagina, controlla la tua connessione internet.",
       "Cancel": "Cancella",
+      "Checked": "Selezionato",
       "Collaborate": "Collabora",
       "Collaborate and write in real time, without layout constraints.": "Collaborare e scrivere in tempo reale, senza vincoli di layout.",
       "Collaborative writing, Simplified.": "Scrittura collaborativa, semplificata.",
@@ -781,6 +785,7 @@
       "Beautify": "Maak mooier",
       "Can't load this page, please check your internet connection.": "Kan deze pagina niet laden. Controleer je internetverbinding.",
       "Cancel": "Breek af",
+      "Checked": "Aangevinkt",
       "Close the modal": "Sluit het venster",
       "Collaborate": "Samenwerken",
       "Collaborate and write in real time, without layout constraints.": "Samenwerken en schrijven in realtime, zonder lay-out beperkingen.",
@@ -952,6 +957,7 @@
       "Anonymous": "Anonym",
       "Beautify": "Försköna",
       "Cancel": "Avbryt",
+      "Checked": "Markerad",
       "Close the modal": "Stäng fönstret",
       "Convert Markdown": "Konvertera Markdown",
       "Correct": "Korrekt",
@@ -989,6 +995,7 @@
       "Banner image": "Afiş görseli",
       "Beautify": "Güzelleştir",
       "Cancel": "İptal",
+      "Checked": "İşaretli",
       "Collaborate": "İşbirliği Yapın",
       "Collaborate and write in real time, without layout constraints.": "Düzen kısıtlamaları olmadan gerçek zamanlı olarak işbirliği yapın ve yazın.",
       "Collaborative writing, Simplified.": "İş birliğiyle yazmak çok daha Kolay.",
@@ -1078,6 +1085,7 @@
       "Callout": "标注",
       "Can't load this page, please check your internet connection.": "无法加载此页面，请检查您的网络连接。",
       "Cancel": "取消",
+      "Checked": "已勾选",
       "Close the modal": "关闭对话框",
       "Collaborate": "协作",
       "Collaborate and write in real time, without layout constraints.": "实时协作和写入，不受布局限制。",