fixup! ✨(feature) accessibility on Icon component

Author: AntoLC

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

@@ -143,7 +143,9 @@ test.describe('Doc Header', () => {
     const invitationRole = invitationCard.getByLabel('doc-role-dropdown');
     await expect(invitationRole).toBeVisible();
 
-    await invitationRole.click();
+    await invitationCard
+      .getByRole('button', { name: 'Open the invitation options' })
+      .click();
 
     await page.getByRole('menuitem', { name: 'Remove access' }).click();
     await expect(invitationCard).toBeHidden();
@@ -158,8 +160,13 @@ test.describe('Doc Header', () => {
 
     await roles.click();
     await expect(
-      page.getByRole('menuitem', { name: 'Remove access' }),
-    ).toBeEnabled();
+      memberCard.getByRole('button', { name: 'Open the member options' }),
+    ).toBeVisible();
+    await memberCard
+      .getByRole('button', { name: 'Open the member options' })
+      .click();
+
+    await expect(page.getByLabel('Delete')).toBeEnabled();
   });
 
   test('it checks the options available if editor', async ({ page }) => {
@@ -213,14 +220,16 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
     await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('button', { name: 'more_horiz' }),
+      invitationCard.getByRole('button', {
+        name: 'Open the invitation options',
+      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('[email protected]')).toBeVisible();
     await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', { name: 'more_horiz' }),
+      memberCard.getByRole('button', { name: 'Open the member options' }),
     ).toBeHidden();
   });
 
@@ -275,14 +284,16 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
     await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('button', { name: 'more_horiz' }),
+      invitationCard.getByRole('button', {
+        name: 'Open the invitation options',
+      }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('[email protected]')).toBeVisible();
     await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', { name: 'more_horiz' }),
+      memberCard.getByRole('button', { name: 'Open the member options' }),
     ).toBeHidden();
   });
 

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

@@ -184,9 +184,6 @@ test.describe('Document list members', () => {
 
     const emailMyself = `user@${browserName}.test`;
     const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
-    const mySelfRole = mySelf.getByRole('button', {
-      name: 'doc-role-dropdown',
-    });
 
     const userOwnerEmail = await addNewMember(page, 0, 'Owner');
     const userOwner = list.getByTestId(
@@ -201,20 +198,31 @@ test.describe('Document list members', () => {
     const userReader = list.getByTestId(
       `doc-share-member-row-${userReaderEmail}`,
     );
-    const userReaderRole = userReader.getByRole('button', {
-      name: 'doc-role-dropdown',
-    });
 
     await expect(mySelf).toBeVisible();
     await expect(userOwner).toBeVisible();
     await expect(userReader).toBeVisible();
 
-    await userReaderRole.click();
-    await page.getByRole('menuitem', { name: 'Remove access' }).click();
+    await expect(
+      userOwner.getByRole('button', {
+        name: 'Open the member options',
+      }),
+    ).toBeVisible();
+
+    await userReader
+      .getByRole('button', {
+        name: 'Open the member options',
+      })
+      .click();
+    await page.getByLabel('Delete').click();
     await expect(userReader).toBeHidden();
 
-    await mySelfRole.click();
-    await page.getByRole('menuitem', { name: 'Remove access' }).click();
+    await mySelf
+      .getByRole('button', {
+        name: 'Open the member options',
+      })
+      .click();
+    await page.getByLabel('Delete').click();
     await expect(
       page.getByText('Insufficient access rights to view the document.'),
     ).toBeVisible();

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -255,7 +255,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             aria-label={t('Export the document')}
           />
         )}
-        <DropdownMenu options={options}>
+        <DropdownMenu options={options} label={t('Open the document options')}>
           <IconOptions
             isHorizontal
             $theme="primary"

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx

@@ -5,7 +5,7 @@ import {
 } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
-import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
+import { DropdownMenu, DropdownMenuOption, IconOptions } from '@/components';
 import {
   Doc,
   KEY_LIST_DOC,
@@ -93,10 +93,10 @@ export const DocsGridActions = ({
 
   return (
     <>
-      <DropdownMenu options={options}>
-        <Icon
+      <DropdownMenu options={options} label={t('Open the document options')}>
+        <IconOptions
+          isHorizontal
           data-testid={`docs-grid-actions-button-${doc.id}`}
-          iconName="more_horiz"
           $theme="primary"
           $variation="600"
         />