(frontend) improve share modal button accessibility

Added aria-labels to remove and invite buttons

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-11-18 14:35:03 +01:00
parent 0d0e17c8d5
commit 26620f3471
5 changed files with 26 additions and 6 deletions

View File

@@ -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>

View File

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