diff --git a/CHANGELOG.md b/CHANGELOG.md index b4bf0513c..128e6a3be 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts index 8a3c970a7..33e388371 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts +++ b/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); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts index 95a4258ed..47000b1fa 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts +++ b/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) => { diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts b/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts index ad4ae595d..7530606b1 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts +++ b/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({