✨(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>

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(
-      row.locator('[aria-describedby="doc-title"]').nth(0),
-    ).toHaveText('My mocked document');
+    await expect(row.getByTestId('doc-title')).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();