✨(frontend) remove redundant aria-label to avoid over-accessibility

aria-label was removed because the visible span already provides the text

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

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
 

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;

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`);
     });

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',

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();

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();
   });

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();

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');

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(),

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

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();
 }

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();
 };
 

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}