✨(frontend) improve share modal button accessibility

Added aria-labels to remove and invite buttons

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to
   - ♿(frontend) improve ARIA in doc grid and editor for a11y #1519
   - ♿(frontend) improve accessibility and styling of summary table #1528
   - ♿(frontend) add focus trap and enter key support to remove doc modal #1531
+  - ♿(frontend) improve share modal button accessibility
 - 🐛(docx) fix image overflow by limiting width to 600px during export #1525
 - 🐛(frontend) preserve @ character when esc is pressed after typing it #1512
 - 🐛(frontend) make summary button fixed to remain visible during scroll #1581

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

@@ -84,7 +84,7 @@ test.describe('Document create member', () => {
 
     // Validate
     await page.getByRole('menuitem', { name: 'Administrator' }).click();
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: /^Invite / }).click();
 
     // Check invitation added
     await expect(
@@ -135,7 +135,7 @@ test.describe('Document create member', () => {
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: /^Invite / }).click();
 
     // Check invitation sent
 
@@ -154,7 +154,7 @@ test.describe('Document create member', () => {
         response.url().includes('/invitations/') && response.status() === 400,
     );
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: /^Invite / }).click();
     await expect(
       page.getByText(`"${email}" is already invited to the document.`),
     ).toBeVisible();
@@ -191,7 +191,7 @@ test.describe('Document create member', () => {
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Invite' }).click();
+    await page.getByRole('button', { name: /^Invite / }).click();
 
     // Check invitation sent
     const responseCreateInvitation = await responsePromiseCreateInvitation;

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

@@ -40,7 +40,7 @@ export const addNewMember = async (
   // Choose a role
   await page.getByLabel('doc-role-dropdown').click();
   await page.getByRole('menuitem', { name: role }).click();
-  await page.getByRole('button', { name: 'Invite' }).click();
+  await page.getByRole('button', { name: /^Invite / }).click();
 
   return users[index].email;
 };

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberList.tsx

@@ -108,6 +108,12 @@ export const DocShareAddMemberList = ({
     afterInvite?.();
     setIsLoading(false);
   };
+  const inviteLabel =
+    selectedUsers.length === 1
+      ? t('Invite {{name}}', {
+          name: selectedUsers[0].full_name || selectedUsers[0].email,
+        })
+      : t('Invite {{count}} members', { count: selectedUsers.length });
 
   return (
     <Box
@@ -143,7 +149,11 @@ export const DocShareAddMemberList = ({
           currentRole={invitationRole}
           onSelectRole={setInvitationRole}
         />
-        <Button onClick={() => void onInvite()} disabled={isLoading}>
+        <Button
+          onClick={() => void onInvite()}
+          disabled={isLoading}
+          aria-label={inviteLabel}
+        >
           {t('Invite')}
         </Button>
       </Box>

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAddMemberListItem.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, Icon, Text } from '@/components';
@@ -10,6 +11,7 @@ type Props = {
   onRemoveUser?: (user: User) => void;
 };
 export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
+  const { t } = useTranslation();
   const { spacingsTokens, colorsTokens, fontSizesTokens } =
     useCunninghamTheme();
 
@@ -42,6 +44,9 @@ export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
         size="nano"
         onClick={() => onRemoveUser?.(user)}
         icon={<Icon $variation="600" $size="sm" iconName="close" />}
+        aria-label={t('Remove {{name}} from the invite list', {
+          name: user.full_name || user.email,
+        })}
       />
     </Box>
   );