♿(frontend) add correct attributes to decorative and interactive icons

CHANGELOG.md

@@ -31,7 +31,9 @@ and this project adheres to
 - ♻️(frontend) redirect to doc after duplicate #1175
 - 🔧(project) change env.d system by using local files #1200
 - ⚡️(frontend) improve tree stability #1207
-- ⚡️(frontend) improve accessibility #1232
+- ⚡️(frontend) improve accessibility
+  - #1232
+  - #1255
 - 🛂(frontend) block drag n drop when not desktop #1239
 
 ### Fixed

src/frontend/apps/e2e/__tests__/app-impress/404.spec.ts

@@ -3,7 +3,7 @@ import { expect, test } from '@playwright/test';
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
   await expect(
-    page.locator('header').first().locator('h2').getByText('Docs'),
+    page.locator('header').first().locator('h1').getByText('Docs'),
   ).toBeVisible();
   await page.goto('unknown-page404');
 });

src/frontend/apps/e2e/__tests__/app-impress/auth.setup.ts

@@ -23,7 +23,7 @@ const saveStorageState = async (
       page.locator('header').first().getByRole('button', {
         name: 'Logout',
       }),
-    ).toBeVisible();
+    ).toBeVisible({ timeout: 10000 });
 
     await page.context().storageState({
       path: storageState as string,

src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts

@@ -22,7 +22,7 @@ test.describe('Doc Create', () => {
     );
 
     const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
 
     const docsGrid = page.getByTestId('docs-grid');
     await expect(docsGrid).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -429,7 +429,7 @@ test.describe('Doc Export', () => {
     await page.waitForLoadState('domcontentloaded');
 
     const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
 
     const randomDocFrench = randomName(
       'doc-language-export-french',

src/frontend/apps/e2e/__tests__/app-impress/doc-grid-dnd.spec.ts

@@ -8,9 +8,9 @@ test.describe('Doc grid dnd', () => {
     await page.goto('/');
     const header = page.locator('header').first();
     await createDoc(page, 'Draggable doc', browserName, 1);
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
     await createDoc(page, 'Droppable doc', browserName, 1);
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
 
     const response = await page.waitForResponse(
       (response) =>

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -244,9 +244,7 @@ test.describe('Document create member: Multiple login', () => {
 
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible();
+    await expect(page.getByTestId('header-logo-link')).toBeVisible();
 
     await page.goto(urlDoc);
 
@@ -271,9 +269,7 @@ test.describe('Document create member: Multiple login', () => {
     await page.goto('/');
     await keyCloakSignIn(page, browserName);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible({
+    await expect(page.getByTestId('header-logo-link')).toBeVisible({
       timeout: 10000,
     });
 
@@ -334,9 +330,7 @@ test.describe('Document create member: Multiple login', () => {
 
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible({
+    await expect(page.getByTestId('header-logo-link')).toBeVisible({
       timeout: 10000,
     });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -26,10 +26,7 @@ test.describe('Document search', () => {
     );
     await verifyDocName(page, doc2Title);
     await page.goto('/');
-    await page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search' })
-      .click();
+    await page.getByTestId('search-docs-button').click();
 
     await expect(
       page.getByRole('img', { name: 'No active search' }),
@@ -104,9 +101,7 @@ test.describe('Document search', () => {
     browserName,
   }) => {
     // Doc grid filters are not visible
-    const searchButton = page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search', exact: true });
+    const searchButton = page.getByTestId('search-docs-button');
 
     const filters = page.getByTestId('doc-search-filters');
 
@@ -170,9 +165,7 @@ test.describe('Document search', () => {
       1,
     );
 
-    const searchButton = page
-      .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search' });
+    const searchButton = page.getByTestId('search-docs-button');
 
     await searchButton.click();
     await page.getByRole('combobox', { name: 'Quick search input' }).click();

src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts

@@ -25,7 +25,7 @@ test.describe('Doc Tree', () => {
       1,
     );
     await verifyDocName(page, titleParent);
-    const addButton = page.getByRole('button', { name: 'New doc' });
+    const addButton = page.getByTestId('new-doc-button');
     const docTree = page.getByTestId('doc-tree');
 
     await expect(addButton).toBeVisible();
@@ -63,7 +63,7 @@ test.describe('Doc Tree', () => {
 
   test('check the reorder of sub pages', async ({ page, browserName }) => {
     await createDoc(page, 'doc-tree-content', browserName, 1);
-    const addButton = page.getByRole('button', { name: 'New doc' });
+    const addButton = page.getByTestId('new-doc-button');
     await expect(addButton).toBeVisible();
 
     const docTree = page.getByTestId('doc-tree');
@@ -201,7 +201,7 @@ test.describe('Doc Tree', () => {
     ).not.toHaveText(docChild);
 
     const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
+    await header.locator('h1').getByText('Docs').click();
     await expect(page.getByText(docChild)).toBeVisible();
   });
 

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -122,9 +122,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible({
+    await expect(page.getByTestId('header-logo-link')).toBeVisible({
       timeout: 10000,
     });
 
@@ -178,9 +176,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible();
+    await expect(page.getByTestId('header-logo-link')).toBeVisible();
 
     await page.goto(urlDoc);
 
@@ -246,8 +242,8 @@ test.describe('Doc Visibility: Public', () => {
       cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
-    await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+    await expect(page.getByTestId('search-docs-button')).toBeVisible();
+    await expect(page.getByTestId('new-doc-button')).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -262,8 +258,8 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
+    await expect(page.getByTestId('search-docs-button')).toBeHidden();
+    await expect(page.getByTestId('new-doc-button')).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
     const card = page.getByLabel('It is the card information');
     await expect(card).toBeVisible();
@@ -455,9 +451,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const otherBrowser = BROWSERS.find((b) => b !== browserName);
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible({
+    await expect(page.getByTestId('header-logo-link')).toBeVisible({
       timeout: 10000,
     });
 
@@ -545,9 +539,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const otherBrowser = BROWSERS.find((b) => b !== browserName);
     await keyCloakSignIn(page, otherBrowser!);
 
-    await expect(
-      page.getByRole('link', { name: 'Docs Logo Docs' }),
-    ).toBeVisible();
+    await expect(page.getByTestId('header-logo-link')).toBeVisible();
 
     await page.goto(urlDoc);
 

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -12,8 +12,8 @@ test.describe('Header', () => {
 
     const header = page.locator('header').first();
 
-    await expect(header.getByLabel('Docs Logo')).toBeVisible();
-    await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
+    await expect(header.getByLabel('Back to homepage')).toBeVisible();
+    await expect(header.locator('h1').getByText('Docs')).toHaveCSS(
       'font-family',
       /Roboto/i,
     );
@@ -37,8 +37,8 @@ test.describe('Header', () => {
 
     const header = page.locator('header').first();
 
-    await expect(header.getByLabel('Docs Logo')).toBeVisible();
-    await expect(header.locator('h2').getByText('Docs')).toHaveCSS(
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
+    await expect(header.locator('h1').getByText('Docs')).toHaveCSS(
       'font-family',
       /Marianne/i,
     );
@@ -106,7 +106,7 @@ test.describe('Header mobile', () => {
     const header = page.locator('header').first();
 
     await expect(header.getByLabel('Open the header menu')).toBeVisible();
-    await expect(header.getByRole('link', { name: 'Docs Logo' })).toBeVisible();
+    await expect(header.getByTestId('header-icon-docs')).toBeVisible();
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -8,8 +8,8 @@ test.describe('Left panel desktop', () => {
   test('checks all the elements are visible', async ({ page }) => {
     await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
     await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
-    await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
-    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+    await expect(page.getByTestId('home-button')).toBeVisible();
+    await expect(page.getByTestId('new-doc-button')).toBeVisible();
   });
 });
 
@@ -27,8 +27,8 @@ test.describe('Left panel mobile', () => {
     await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
 
     const header = page.locator('header').first();
-    const homeButton = page.getByRole('button', { name: 'house' });
-    const newDocButton = page.getByRole('button', { name: 'New doc' });
+    const homeButton = page.getByTestId('home-button');
+    const newDocButton = page.getByTestId('new-doc-button');
     const languageButton = page.getByRole('button', { name: /Language/ });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -154,7 +154,7 @@ export const goToGridDoc = async (
   { nthRow = 1, title }: GoToGridDocOptions = {},
 ) => {
   const header = page.locator('header').first();
-  await header.locator('h2').getByText('Docs').click();
+  await header.locator('h1').getByText('Docs').click();
 
   const docsGrid = page.getByTestId('docs-grid');
   await expect(docsGrid).toBeVisible();

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -39,7 +39,7 @@ export const Header = () => {
       className="--docs--header"
     >
       {!isDesktop && <ButtonTogglePanel />}
-      <StyledLink href="/">
+      <StyledLink href="/" data-testid="header-logo-link">
         <Box
           $align="center"
           $gap={spacingsTokens['3xs']}
@@ -49,11 +49,12 @@ export const Header = () => {
           $margin={{ top: 'auto' }}
         >
           <IconDocs
-            aria-label={t('Docs Logo')}
+            data-testid="header-icon-docs"
+            aria-label={t('Back to homepage')}
             width={32}
             color={colorsTokens['primary-text']}
           />
-          <Title />
+          <Title headingLevel="h1" />
         </Box>
       </StyledLink>
       {!isDesktop ? (

src/frontend/apps/impress/src/features/header/components/Title.tsx

@@ -3,7 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { Box, Text } from '@/components/';
 import { useCunninghamTheme } from '@/cunningham';
 
-export const Title = () => {
+type TitleSemanticsProps = {
+  headingLevel?: 'h1' | 'h2' | 'h3';
+};
+
+export const Title = ({ headingLevel = 'h2' }: TitleSemanticsProps) => {
   const { t } = useTranslation();
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
 
@@ -16,7 +20,7 @@ export const Title = () => {
     >
       <Text
         $margin="none"
-        as="h2"
+        as={headingLevel}
         $color={colorsTokens['primary-text']}
         $zIndex={1}
         $size="1.375rem"

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -48,7 +48,7 @@ export default function HomeBanner() {
           $gap={spacingsTokens['sm']}
         >
           <IconDocs
-            aria-label={t('Docs Logo')}
+            aria-label={t('Back to homepage')}
             width={64}
             color={colorsTokens['primary-text']}
           />

src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx

@@ -62,6 +62,7 @@ export const HomeHeader = () => {
           $height="fit-content"
         >
           <IconDocs
+            data-testid="header-icon-docs"
             aria-label={t('Docs Logo')}
             width={32}
             color={colorsTokens['primary-text']}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { t } from 'i18next';
 import { useRouter } from 'next/router';
 import { PropsWithChildren, useCallback, useState } from 'react';
 
@@ -53,20 +54,34 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
           >
             <Box $direction="row" $gap="2px">
               <Button
+                data-testid="home-button"
                 onClick={goToHome}
+                aria-label={t('Back to homepage')}
                 size="medium"
                 color="tertiary-text"
                 icon={
-                  <Icon $variation="800" $theme="primary" iconName="house" />
+                  <Icon
+                    $variation="800"
+                    $theme="primary"
+                    iconName="house"
+                    aria-hidden="true"
+                  />
                 }
               />
               {authenticated && (
                 <Button
+                  data-testid="search-docs-button"
                   onClick={openSearchModal}
                   size="medium"
                   color="tertiary-text"
+                  aria-label={t('Search docs')}
                   icon={
-                    <Icon $variation="800" $theme="primary" iconName="search" />
+                    <Icon
+                      $variation="800"
+                      $theme="primary"
+                      iconName="search"
+                      aria-hidden="true"
+                    />
                   }
                 />
               )}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeaderButton.tsx

@@ -19,9 +19,10 @@ export const LeftPanelHeaderButton = () => {
   });
   return (
     <Button
+      data-testid="new-doc-button"
       color="primary"
       onClick={() => createDoc()}
-      icon={<Icon $variation="000" iconName="add" />}
+      icon={<Icon $variation="000" iconName="add" aria-hidden="true" />}
       disabled={isDocCreating}
     >
       {t('New doc')}