✨(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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user