diff --git a/CHANGELOG.md b/CHANGELOG.md index 6738ff5756..95b70daefc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ and this project adheres to - ♿ add document visible in list and openable via enter key #1365 - ♿ add pdf outline property to enable bookmarks display #1368 - ♿ hide decorative icons from assistive tech with aria-hidden #1404 + - ♿ remove redundant aria-label to avoid over-accessibility #1420 ### Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts index aedb30d270..36520cb77f 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts @@ -100,7 +100,7 @@ test.describe('Doc Editor', () => { const wsClosePromise = webSocket.waitForEvent('close'); await selectVisibility.click(); - await page.getByLabel('Connected').click(); + await page.getByRole('menuitem', { name: 'Connected' }).click(); // Assert that the doc reconnects to the ws const wsClose = await wsClosePromise; diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts index 10d3349838..5824359da7 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts @@ -394,7 +394,7 @@ test.describe('Doc Export', () => { }) .click(); - const input = page.locator('.--docs--doc-title-input[role="textbox"]'); + const input = page.getByRole('textbox', { name: 'Titre du document' }); await expect(input).toBeVisible(); await expect(input).toHaveText('', { timeout: 10000 }); await input.click(); @@ -411,6 +411,10 @@ test.describe('Doc Export', () => { }) .click(); + await expect( + page.getByTestId('doc-open-modal-download-button'), + ).toBeVisible(); + const downloadPromise = page.waitForEvent('download', (download) => { return download.suggestedFilename().includes(`${randomDocFrench}.pdf`); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts index e8631c458e..92b42d6545 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts @@ -90,7 +90,7 @@ test.describe('Doc Header', () => { const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1); await page.getByLabel('Open the document options').click(); - await page.getByLabel('Delete document').click(); + await page.getByRole('menuitem', { name: 'Delete document' }).click(); await expect( page.getByRole('heading', { name: 'Delete a doc' }), @@ -148,7 +148,9 @@ test.describe('Doc Header', () => { await page.getByLabel('Open the document options').click(); - await expect(page.getByLabel('Delete document')).toBeDisabled(); + await expect( + page.getByRole('menuitem', { name: 'Delete document' }), + ).toBeDisabled(); // Click somewhere else to close the options await page.click('body', { position: { x: 0, y: 0 } }); @@ -221,7 +223,9 @@ test.describe('Doc Header', () => { ).toBeVisible(); await page.getByLabel('Open the document options').click(); - await expect(page.getByLabel('Delete document')).toBeDisabled(); + await expect( + page.getByRole('menuitem', { name: 'Delete document' }), + ).toBeDisabled(); // Click somewhere else to close the options await page.click('body', { position: { x: 0, y: 0 } }); @@ -287,7 +291,9 @@ test.describe('Doc Header', () => { ).toBeVisible(); await page.getByLabel('Open the document options').click(); - await expect(page.getByLabel('Delete document')).toBeDisabled(); + await expect( + page.getByRole('menuitem', { name: 'Delete document' }), + ).toBeDisabled(); // Click somewhere else to close the options await page.click('body', { position: { x: 0, y: 0 } }); @@ -343,7 +349,7 @@ test.describe('Doc Header', () => { // Copy content to clipboard await page.getByLabel('Open the document options').click(); - await page.getByLabel('Copy as Markdown').click(); + await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click(); await expect(page.getByText('Copied to clipboard')).toBeVisible(); // Test that clipboard is in Markdown format @@ -377,7 +383,7 @@ test.describe('Doc Header', () => { // Copy content to clipboard await page.getByLabel('Open the document options').click(); - await page.getByLabel('Copy as HTML').click(); + await page.getByRole('menuitem', { name: 'Copy as HTML' }).click(); await expect(page.getByText('Copied to clipboard')).toBeVisible(); // Test that clipboard is in HTML format @@ -568,7 +574,7 @@ test.describe('Documents Header mobile', () => { await expect( page.getByRole('menuitem', { name: 'Copy link' }), ).toBeVisible(); - await page.getByLabel('Share').click(); + await page.getByRole('menuitem', { name: 'Share' }).click(); await expect(page.getByRole('button', { name: 'Copy link' })).toBeVisible(); }); @@ -591,7 +597,7 @@ test.describe('Documents Header mobile', () => { await goToGridDoc(page); await page.getByLabel('Open the document options').click(); - await page.getByLabel('Share').click(); + await page.getByRole('menuitem', { name: 'Share' }).click(); const shareModal = page.getByRole('dialog', { name: 'Share modal content', diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts index 2addaa68c8..724d04ed40 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts @@ -74,13 +74,15 @@ test.describe('Document create member', () => { // Check roles are displayed await list.getByLabel('doc-role-dropdown').click(); - await expect(page.getByLabel('Reader')).toBeVisible(); - await expect(page.getByLabel('Editor')).toBeVisible(); - await expect(page.getByLabel('Owner')).toBeVisible(); - await expect(page.getByLabel('Administrator')).toBeVisible(); + await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible(); + await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible(); + await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible(); + await expect( + page.getByRole('menuitem', { name: 'Administrator' }), + ).toBeVisible(); // Validate - await page.getByLabel('Administrator').click(); + await page.getByRole('menuitem', { name: 'Administrator' }).click(); await page.getByRole('button', { name: 'Invite' }).click(); // Check invitation added @@ -126,7 +128,7 @@ test.describe('Document create member', () => { // Choose a role const container = page.getByTestId('doc-share-add-member-list'); await container.getByLabel('doc-role-dropdown').click(); - await page.getByLabel('Owner').click(); + await page.getByRole('menuitem', { name: 'Owner' }).click(); const responsePromiseCreateInvitation = page.waitForResponse( (response) => @@ -144,7 +146,7 @@ test.describe('Document create member', () => { // Choose a role await container.getByLabel('doc-role-dropdown').click(); - await page.getByLabel('Owner').click(); + await page.getByRole('menuitem', { name: 'Owner' }).click(); const responsePromiseCreateInvitationFail = page.waitForResponse( (response) => @@ -174,7 +176,7 @@ test.describe('Document create member', () => { // Choose a role const container = page.getByTestId('doc-share-add-member-list'); await container.getByLabel('doc-role-dropdown').click(); - await page.getByLabel('Administrator').click(); + await page.getByRole('menuitem', { name: 'Administrator' }).click(); const responsePromiseCreateInvitation = page.waitForResponse( (response) => @@ -194,14 +196,14 @@ test.describe('Document create member', () => { await expect(userInvitation).toBeVisible(); await userInvitation.getByLabel('doc-role-dropdown').click(); - await page.getByLabel('Reader').click(); + await page.getByRole('menuitem', { name: 'Reader' }).click(); const moreActions = userInvitation.getByRole('button', { name: 'Open invitation actions menu', }); await moreActions.click(); - await page.getByLabel('Delete').click(); + await page.getByRole('menuitem', { name: 'Delete' }).click(); await expect(userInvitation).toBeHidden(); }); @@ -257,7 +259,7 @@ test.describe('Document create member', () => { `doc-share-access-request-row-${emailRequest}`, ); await container.getByLabel('doc-role-dropdown').click(); - await page.getByLabel('Administrator').click(); + await page.getByRole('menuitem', { name: 'Administrator' }).click(); await container.getByRole('button', { name: 'Approve' }).click(); await expect(page.getByText('Access Requests')).toBeHidden(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts index 1128a3f9ec..cb574d1ed0 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts @@ -171,12 +171,12 @@ test.describe('Document list members', () => { }); await currentUserRole.click(); - await page.getByLabel('Administrator').click(); + await page.getByRole('menuitem', { name: 'Administrator' }).click(); await list.click(); await expect(currentUserRole).toBeVisible(); await currentUserRole.click(); - await page.getByLabel('Reader').click(); + await page.getByRole('menuitem', { name: 'Reader' }).click(); await list.click(); await expect(currentUserRole).toBeHidden(); }); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts index afde78088a..6247cbc64e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts @@ -224,7 +224,7 @@ test.describe('Doc Tree', () => { ); const currentUserRole = currentUser.getByLabel('doc-role-dropdown'); await currentUserRole.click(); - await page.getByLabel('Administrator').click(); + await page.getByRole('menuitem', { name: 'Administrator' }).click(); await list.click(); await page.getByRole('button', { name: 'Ok' }).click(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts index 80c8fc5a3f..b65bc9d042 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts @@ -18,7 +18,7 @@ test.describe('Doc Version', () => { await verifyDocName(page, randomDoc); await page.getByLabel('Open the document options').click(); - await page.getByLabel('Version history').click(); + await page.getByRole('menuitem', { name: 'Version history' }).click(); await expect(page.getByText('History', { exact: true })).toBeVisible(); const modal = page.getByLabel('version history modal'); @@ -54,7 +54,7 @@ test.describe('Doc Version', () => { ).toBeVisible(); await page.getByLabel('Open the document options').click(); - await page.getByLabel('Version history').click(); + await page.getByRole('menuitem', { name: 'Version history' }).click(); await expect(panel).toBeVisible(); await expect(page.getByText('History', { exact: true })).toBeVisible(); @@ -82,7 +82,9 @@ test.describe('Doc Version', () => { await verifyDocName(page, 'Mocked document'); await page.getByLabel('Open the document options').click(); - await expect(page.getByLabel('Version history')).toBeDisabled(); + await expect( + page.getByRole('menuitem', { name: 'Version history' }), + ).toBeDisabled(); }); test('it restores the doc version', async ({ page, browserName }) => { @@ -109,7 +111,7 @@ test.describe('Doc Version', () => { await expect(page.getByText('World')).toBeVisible(); await page.getByLabel('Open the document options').click(); - await page.getByLabel('Version history').click(); + await page.getByRole('menuitem', { name: 'Version history' }).click(); const modal = page.getByLabel('version history modal'); const panel = modal.getByLabel('version list'); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts index 003c9c0919..7027ccc114 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts @@ -45,17 +45,21 @@ test.describe('Doc Visibility', () => { await expect(selectVisibility.getByText('Private')).toBeVisible(); - await expect(page.getByLabel('Read only')).toBeHidden(); - await expect(page.getByLabel('Can read and edit')).toBeHidden(); + await expect( + page.getByRole('menuitem', { name: 'Read only' }), + ).toBeHidden(); + await expect( + page.getByRole('menuitem', { name: 'Can read and edit' }), + ).toBeHidden(); await selectVisibility.click(); - await page.getByLabel('Connected').click(); + await page.getByRole('menuitem', { name: 'Connected' }).click(); await expect(page.getByTestId('doc-access-mode')).toBeVisible(); await selectVisibility.click(); - await page.getByLabel('Public', { exact: true }).click(); + await page.getByRole('menuitem', { name: 'Public' }).click(); await expect(page.getByTestId('doc-access-mode')).toBeVisible(); }); @@ -293,7 +297,7 @@ test.describe('Doc Visibility: Public', () => { ).toBeVisible(); await page.getByTestId('doc-access-mode').click(); - await page.getByLabel('Editing').click(); + await page.getByRole('menuitem', { name: 'Editing' }).click(); await expect( page.getByText('The document visibility has been updated.').first(), @@ -516,7 +520,7 @@ test.describe('Doc Visibility: Authenticated', () => { const urlDoc = page.url(); await page.getByTestId('doc-access-mode').click(); - await page.getByLabel('Editing').click(); + await page.getByRole('menuitem', { name: 'Editing' }).click(); await expect( page.getByText('The document visibility has been updated.').first(), diff --git a/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts index 15b4e9c301..c46da0bade 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts @@ -47,7 +47,7 @@ test.describe('Footer', () => { // Check the translation const header = page.locator('header').first(); await header.getByRole('button').getByText('English').click(); - await page.getByLabel('Français').click(); + await page.getByRole('menuitem', { name: 'Français' }).click(); await expect( page.locator('footer').getByText('Mentions légales'), @@ -132,7 +132,7 @@ test.describe('Footer', () => { // Check the translation const header = page.locator('header').first(); await header.getByRole('button').getByText('English').click(); - await page.getByLabel('Français').click(); + await page.getByRole('menuitem', { name: 'Français' }).click(); await expect( page 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 4c82d8c7ac..d7387378a5 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts @@ -323,5 +323,5 @@ export async function waitForLanguageSwitch( await languagePicker.click(); - await page.getByLabel(lang.label).click(); + await page.getByRole('menuitem', { name: lang.label }).click(); } diff --git a/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts b/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts index 761e6a3400..700ad8056b 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts @@ -39,7 +39,7 @@ export const addNewMember = async ( // Choose a role await page.getByLabel('doc-role-dropdown').click(); - await page.getByLabel(role).click(); + await page.getByRole('menuitem', { name: role }).click(); await page.getByRole('button', { name: 'Invite' }).click(); return users[index].email; @@ -76,7 +76,7 @@ export const updateRoleUser = async ( const currentUser = list.getByTestId(`doc-share-member-row-${email}`); const currentUserRole = currentUser.getByLabel('doc-role-dropdown'); await currentUserRole.click(); - await page.getByLabel(role).click(); + await page.getByRole('menuitem', { name: role }).click(); await list.click(); }; diff --git a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx index de5d2d56a2..4df80cc703 100644 --- a/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx +++ b/src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx @@ -162,7 +162,6 @@ export const DropdownMenu = ({ menuItemRefs.current[index] = el; }} role="menuitem" - aria-label={option.label} data-testid={option.testId} $direction="row" disabled={isDisabled}