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