✅(e2e) update tests for list semantics and add keyboard nav test

Adapt selectors from grid/row to list/listitem and add a Tab+Enter test

Author: Ovgodd

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to
 - ♿️(frontend) improve language picker accessibility #2069
 - ♿️(frontend) add aria-hidden to decorative icons in dropdown menu #2093
 - 🐛(backend) move lock table closer to the insert operation targeted
+- ♿️(frontend) replace ARIA grid pattern with list in docs grid #2131
 
 ### Fixed
 

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

@@ -400,7 +400,7 @@ test.describe('Doc grid dnd mobile', () => {
     await expect(page.getByTestId('docs-grid')).toBeVisible();
     await expect(page.getByTestId('grid-loader')).toBeHidden();
 
-    await expect(docsGrid.getByRole('row').first()).toBeVisible();
+    await expect(docsGrid.getByRole('listitem').first()).toBeVisible();
     await expect(docsGrid.locator('.--docs--grid-droppable')).toHaveCount(0);
 
     await createDoc(page, 'Draggable doc mobile', browserName, 1, true);

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

@@ -76,7 +76,7 @@ test.describe('Documents Grid mobile', () => {
     await expect(docsGrid).toBeVisible();
     await expect(page.getByTestId('grid-loader')).toBeHidden();
 
-    const rows = docsGrid.getByRole('row');
+    const rows = docsGrid.getByRole('listitem');
     const row = rows.filter({
       hasText: 'My mocked document',
     });
@@ -289,6 +289,29 @@ test.describe('Documents Grid', () => {
     );
   });
 
+  test('opens a document with keyboard (Tab + Enter)', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+
+    const [docTitle] = await createDoc(page, 'keyboard-nav-test', browserName);
+
+    await page.goto('/');
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+
+    const row = await getGridRow(page, docTitle);
+    const link = row.getByRole('link').first();
+
+    await link.focus();
+    await expect(link).toBeFocused();
+
+    await page.keyboard.press('Enter');
+
+    await expect(page).toHaveURL(/\/docs\//);
+    await verifyDocName(page, docTitle);
+  });
+
   test('checks the infinite scroll', async ({ page }) => {
     let docs: SmallDoc[];
     const responsePromisePage1 = page.waitForResponse((response) => {

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

@@ -183,11 +183,11 @@ export const verifyDocName = async (page: Page, docName: string) => {
 };
 
 export const getGridRow = async (page: Page, title: string) => {
-  const docsGrid = page.getByRole('grid');
+  const docsGrid = page.getByTestId('docs-grid');
   await expect(docsGrid).toBeVisible();
   await expect(page.getByTestId('grid-loader')).toBeHidden();
 
-  const rows = docsGrid.getByRole('row');
+  const rows = docsGrid.getByRole('listitem');
 
   const row = rows
     .filter({
@@ -215,7 +215,7 @@ export const goToGridDoc = async (
   await expect(docsGrid).toBeVisible();
   await expect(page.getByTestId('grid-loader')).toBeHidden();
 
-  const rows = docsGrid.getByRole('row');
+  const rows = docsGrid.getByRole('listitem');
 
   const row = title
     ? rows.filter({