✨(frontend) fix major accessibility issues found by wave and axe

improves a11y by fixing multiple critical validation errors

Signed-off-by: Cyril <c.gromoff@gmail.com>

CHANGELOG.md

@@ -20,6 +20,9 @@ and this project adheres to
 
 - 🔒️(backend) configure throttle on every viewsets #1343
 - ⬆️ Bump eslint to V9 #1071
+- ♿(frontend) improve accessibility:
+  - ♿(frontend) fix major accessibility issues reported by wave and axe #1344
+  - #1341
 
 ## [3.6.0] - 2025-09-04
 

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

@@ -226,9 +226,13 @@ test.describe('Doc Editor', () => {
     await editor.fill('Hello World Doc persisted 2');
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
 
+    await page.waitForTimeout(1000);
+
     const urlDoc = page.url();
     await page.goto(urlDoc);
 
+    // Wait for editor to load
+    await expect(editor).toBeVisible();
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
   });
 

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

@@ -80,9 +80,7 @@ test.describe('Documents Grid mobile', () => {
       hasText: 'My mocked document',
     });
 
-    await expect(
+    await expect(row.getByTestId('doc-title')).toHaveText('My mocked document');
-      row.locator('[aria-describedby="doc-title"]').nth(0),
-    ).toHaveText('My mocked document');
   });
 });
 
@@ -295,7 +293,7 @@ test.describe('Documents Grid', () => {
     docs = result.results as SmallDoc[];
 
     await expect(page.getByTestId('grid-loader')).toBeHidden();
-    await expect(page.locator('h4').getByText('All docs')).toBeVisible();
+    await expect(page.locator('h2').getByText('All docs')).toBeVisible();
 
     const thead = page.getByTestId('docs-grid-header');
     await expect(thead.getByText(/Name/i)).toBeVisible();

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

@@ -173,12 +173,13 @@ test.describe('Document search', () => {
       .getByRole('combobox', { name: 'Quick search input' })
       .fill('sub page search');
 
-    // Expect to find the first doc
+    // Expect to find the first and second docs in the results list
+    const resultsList = page.getByRole('listbox');
     await expect(
-      page.getByRole('presentation').getByLabel(firstDocTitle),
+      resultsList.getByRole('option', { name: firstDocTitle }),
     ).toBeVisible();
     await expect(
-      page.getByRole('presentation').getByLabel(secondDocTitle),
+      resultsList.getByRole('option', { name: secondDocTitle }),
     ).toBeVisible();
 
     await page.getByRole('button', { name: 'close' }).click();
@@ -195,14 +196,15 @@ test.describe('Document search', () => {
       .fill('second');
 
     // Now there is a sub page - expect to have the focus on the current doc
+    const updatedResultsList = page.getByRole('listbox');
     await expect(
-      page.getByRole('presentation').getByLabel(secondDocTitle),
+      updatedResultsList.getByRole('option', { name: secondDocTitle }),
     ).toBeVisible();
     await expect(
-      page.getByRole('presentation').getByLabel(secondChildDocTitle),
+      updatedResultsList.getByRole('option', { name: secondChildDocTitle }),
     ).toBeVisible();
     await expect(
-      page.getByRole('presentation').getByLabel(firstDocTitle),
+      updatedResultsList.getByRole('option', { name: firstDocTitle }),
     ).toBeHidden();
   });
 });

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

@@ -172,7 +172,7 @@ export const goToGridDoc = async (
 
   await expect(row).toBeVisible();
 
-  const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
+  const docTitleContent = row.getByTestId('doc-title').first();
   const docTitle = await docTitleContent.textContent();
   expect(docTitle).toBeDefined();
 

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -110,7 +110,6 @@ export const DropdownMenu = ({
             $direction="row"
             $align="center"
             $position="relative"
-            aria-controls="menu"
           >
             <Box>{children}</Box>
             <Icon
@@ -125,9 +124,7 @@ export const DropdownMenu = ({
             />
           </Box>
         ) : (
-          <Box ref={blockButtonRef} aria-controls="menu">
+          <Box ref={blockButtonRef}>{children}</Box>
-            {children}
-          </Box>
         )
       }
     >

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -82,12 +82,11 @@ export const SimpleDocItem = ({
       </Box>
       <Box $justify="center" $overflow="auto">
         <Text
-          aria-describedby="doc-title"
-          aria-label={doc.title || untitledDocument}
           $size="sm"
           $variation="1000"
           $weight="500"
           $css={ItemTextCss}
+          data-testid="doc-title"
         >
           {displayTitle}
         </Text>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -70,7 +70,6 @@ export const DocsGrid = ({
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
-        role="grid"
         data-testid="docs-grid"
         $height="100%"
         $width="100%"
@@ -84,7 +83,7 @@ export const DocsGrid = ({
         }}
       >
         <Text
-          as="h4"
+          as="h2"
           $size="h4"
           $variation="1000"
           $margin={{ top: '0px', bottom: '10px' }}
@@ -101,32 +100,40 @@ export const DocsGrid = ({
         )}
         {hasDocs && (
           <Box $gap="6px" $overflow="auto">
+            <Box role="grid">
+              <Box role="rowgroup">
                 <Box
                   $direction="row"
                   $padding={{ horizontal: 'xs' }}
                   $gap="10px"
                   data-testid="docs-grid-header"
+                  role="row"
                 >
-              <Box $flex={flexLeft} $padding="3xs">
+                  <Box $flex={flexLeft} $padding="3xs" role="columnheader">
                     <Text $size="xs" $variation="600" $weight="500">
                       {t('Name')}
                     </Text>
                   </Box>
                   {isDesktop && (
-                <Box $flex={flexRight} $padding={{ vertical: '3xs' }}>
+                    <Box
+                      $flex={flexRight}
+                      $padding={{ vertical: '3xs' }}
+                      role="columnheader"
+                    >
                       <Text $size="xs" $weight="500" $variation="600">
                         {t('Updated at')}
                       </Text>
                     </Box>
                   )}
                 </Box>
-
+              </Box>
+              <Box role="rowgroup">
                 {isDesktop ? (
                   <DraggableDocGridContentList docs={docs} />
                 ) : (
                   <DocGridContentList docs={docs} />
                 )}
-
+              </Box>
               {hasNextPage && !loading && (
                 <InView
                   data-testid="infinite-scroll-trigger"
@@ -144,6 +151,7 @@ export const DocsGrid = ({
                 </InView>
               )}
             </Box>
+          </Box>
         )}
       </Card>
     </Box>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -52,10 +52,18 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
           }
         `}
         className="--docs--doc-grid-item"
+      >
+        <Box
+          $flex={flexLeft}
+          role="gridcell"
+          $css={css`
+            align-items: center;
+            min-width: 0;
+          `}
         >
           <StyledLink
             $css={css`
-            flex: ${flexLeft};
+              width: 100%;
               align-items: center;
               min-width: 0;
             `}
@@ -114,6 +122,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
               )}
             </Box>
           </StyledLink>
+        </Box>
 
         <Box
           $flex={flexRight}
@@ -121,6 +130,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
           $align="center"
           $justify={isDesktop ? 'space-between' : 'flex-end'}
           $gap="32px"
+          role="gridcell"
         >
           {isDesktop && (
             <StyledLink href={`/docs/${doc.id}`}>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridLoader.tsx

@@ -1,5 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
 import { Box } from '@/components';
 
@@ -32,6 +32,9 @@ export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
         $zIndex={998}
         $position="absolute"
         className="--docs--doc-grid-loader"
+        $css={css`
+          pointer-events: none;
+        `}
       >
         <Loader />
       </Box>

src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx

@@ -19,6 +19,7 @@ export const Draggable = <T,>(props: DraggableProps<T>) => {
       {...attributes}
       data-testid={`draggable-doc-${props.id}`}
       className="--docs--grid-draggable"
+      role="presentation"
     >
       {props.children}
     </div>

src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx

@@ -35,6 +35,7 @@ export const Droppable = ({
     <Box
       ref={setNodeRef}
       data-testid={`droppable-doc-${id}`}
+      role="presentation"
       $css={css`
         border-radius: 4px;
         background-color: ${enableHover

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

@@ -44,17 +44,21 @@ export const LeftPanelFavorites = () => {
         >
           {t('Pinned documents')}
         </Text>
+        <Box>
+          <Box as="ul" $padding="none">
+            {favoriteDocs.map((doc) => (
+              <LeftPanelFavoriteItem key={doc.id} doc={doc} />
+            ))}
+          </Box>
+          {docs.hasNextPage && (
             <InfiniteScroll
-          as="ul"
               hasMore={docs.hasNextPage}
               isLoading={docs.isFetchingNextPage}
               next={() => void docs.fetchNextPage()}
               $padding="none"
-        >
+            />
-          {favoriteDocs.map((doc) => (
+          )}
-            <LeftPanelFavoriteItem key={doc.id} doc={doc} />
+        </Box>
-          ))}
-        </InfiniteScroll>
       </Box>
     </Box>
   );