✨(feature) accessibility on Icon component

mvarnier · AntoLC · commit fc491e6f49b4 · 2025-07-18T11:24:03.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();
 
@@ -71,7 +71,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
         exact: true,
       })
       .click();
@@ -121,7 +121,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
         exact: true,
       })
       .click();
@@ -189,7 +189,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -266,7 +266,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
       })
       .click();
 
@@ -316,7 +316,7 @@ test.describe('Doc Export', () => {
 
     await page
       .getByRole('button', {
-        name: 'download',
+        name: 'Export the document',
         exact: true,
       })
       .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
@@ -45,7 +45,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();
@@ -116,7 +118,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();
 
@@ -186,7 +190,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();
@@ -246,7 +252,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,5 +1,6 @@
 import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
 import { Fragment, PropsWithChildren, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -45,6 +46,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);
@@ -162,6 +164,7 @@ export const DropdownMenu = ({
                   $direction="row"
                   $align="center"
                   $gap={spacingsTokens['base']}
+                  aria-selected={option.isSelected ? true : undefined}
                 >
                   {option.icon && (
                     <Icon
@@ -177,7 +180,14 @@ export const DropdownMenu = ({
                 </Box>
                 {(option.isSelected ||
                   selectedValues?.includes(option.value ?? '')) && (
-                  <Icon iconName="check" $size="20px" $theme="greyscale" />
+                  <Icon
+                    role="img"
+                    iconName="check"
+                    $size="20px"
+                    $theme="greyscale"
+                    aria-label={t('Checked')}
+                    aria-hidden="false"
+                  />
                 )}
               </BoxButton>
               {option.showSeparator && (
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/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -252,6 +252,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
               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 '@/docs/doc-management';
 
 import { DocVisibility } from './DocVisibility';
@@ -41,7 +41,7 @@ export const DocShareModalFooter = ({
           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
@@ -61,6 +61,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.",
@@ -247,6 +248,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.",
@@ -433,6 +435,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.",
@@ -648,6 +651,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.",
@@ -798,6 +802,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.",
@@ -963,6 +968,7 @@
       "Anonymous": "Anonym",
       "Beautify": "Försköna",
       "Cancel": "Avbryt",
+      "Checked": "Markerad",
       "Close the modal": "Stäng fönstret",
       "Convert Markdown": "Konvertera Markdown",
       "Correct": "Korrekt",
@@ -999,6 +1005,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.",
@@ -1086,6 +1093,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.": "实时协作和写入，不受布局限制。",
