✨(feature) accessibility on Icon component

mvarnier · AntoLC · commit 8e7988b8ffc7 · 2025-06-11T17:00:29.000+02:00
Add aria-hidden attribute to Icon component to
improve accessibility.
Add aria-label to DropdownMenu component when
selected.
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts
@@ -18,7 +18,7 @@ test.describe('Doc Export', () => {
     await createDoc(page, 'doc-editor', browserName, 1);
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -75,7 +75,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -122,7 +122,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -186,7 +186,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -250,7 +250,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -294,7 +294,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
@@ -70,7 +70,9 @@ test.describe('Doc Header', () => {
 
     await expect(card.getByText('Owner ·')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Open the document options' }),
     ).toBeVisible();
@@ -143,7 +145,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
 
@@ -214,7 +218,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(page.getByLabel('Delete document')).toBeDisabled();
@@ -274,7 +280,9 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Export the document' }),
+    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(page.getByLabel('Delete document')).toBeDisabled();
diff --git a/src/frontend/apps/impress/src/components/DropdownMenu.tsx b/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>
           );
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -14,6 +14,7 @@ export const Icon = ({
 }: IconProps) => {
   return (
     <Text
+      aria-hidden={!!!textProps['aria-label']}
       {...textProps}
       className={clsx('--docs--icon-bg', textProps.className, {
         'material-icons-filled': variant === 'filled',
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBoxLicenceAGPL.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBoxLicenceAGPL.tsx
@@ -152,6 +152,7 @@ export const DocToolBoxLicenceAGPL = ({
             setIsModalExportOpen(true);
           }}
           size={isSmallMobile ? 'small' : 'medium'}
+          aria-label={t('Export the document')}
         />
       )}
       <DropdownMenu options={options}>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx b/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>
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/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.": "实时协作和写入，不受布局限制。",
