Skip to content

Commit

Permalink
🚸(frontend) improve screen reading navigation
Browse files Browse the repository at this point in the history
- add aria-hidden and empty alt attributes for screen readers
to ignore decorative svg and images.
- remove icon from input field used to name a group
- update translations
- update related e2e and components tests
  • Loading branch information
daproclaima committed Aug 7, 2024
1 parent 3025821 commit 04569a8
Show file tree
Hide file tree
Showing 31 changed files with 98 additions and 83 deletions.
4 changes: 2 additions & 2 deletions src/frontend/apps/desk/src/features/footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export const Footer = () => {
`}
>
<Text $weight="bold">{label}</Text>
<IconLink width={18} />
<IconLink width={18} aria-hidden="true" />
</StyledLink>
))}
</Box>
Expand Down Expand Up @@ -157,7 +157,7 @@ export const Footer = () => {
`}
>
<Text $variation="600">licence etalab-2.0</Text>
<IconLink width={18} />
<IconLink width={18} aria-hidden="true" />
</StyledLink>
</Trans>
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const AccountDropdown = () => {
button={
<Box $flex $direction="row" $align="center">
<Text $theme="primary">{t('My account')}</Text>
<Text className="material-icons" $theme="primary">
<Text className="material-icons" $theme="primary" aria-hidden="true">
arrow_drop_down
</Text>
</Box>
Expand All @@ -24,7 +24,11 @@ export const AccountDropdown = () => {
<Button
onClick={logout}
color="primary-text"
icon={<span className="material-icons">logout</span>}
icon={
<span className="material-icons" aria-hidden="true">
logout
</span>
}
aria-label={t('Logout')}
>
<Text $weight="normal">{t('Logout')}</Text>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/apps/desk/src/features/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export const Header = () => {
</LogoGouv>
<StyledLink href="/">
<Box $align="center" $gap="1rem" $direction="row">
<Image priority src={IconApplication} alt={t('Régie Logo')} />
<Image priority src={IconApplication} alt="" />
<Text $margin="none" as="h2" $theme="primary">
{t('Régie')}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ export const LanguagePicker = () => {
$gap="0.7rem"
$align="center"
>
<Image priority src={IconLanguage} alt={t('Language Icon')} />
<Image priority src={IconLanguage} alt="" />
<Text $theme="primary">{lang.toUpperCase()}</Text>
</Box>
),
}));
}, [languages, t]);
}, [languages]);

return (
<SelectStyled
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const TopBanner = ({
$margin={{ all: 'big', vertical: 'xbig' }}
$gap="2.25rem"
>
<MailDomainsLogo aria-label={t('Mail Domains icon')} />
<MailDomainsLogo aria-hidden="true" />
<Text $margin="none" as="h3" $size="h3">
{name}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Panel = () => {
`}
onClick={() => setIsOpen(!isOpen)}
>
<IconOpenClose width={24} height={24} />
<IconOpenClose width={24} height={24} aria-hidden="true" />
</BoxButton>
<Box
$css={`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,7 @@ export const PanelActions = () => {
$background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
$color={colorsTokens()['primary-600']}
>
<IconSort
width={30}
height={30}
aria-label={t('Sort domain names icon')}
/>
<IconSort width={30} height={30} aria-hidden="true" />
</BoxButton>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useRouter } from 'next/router';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { Box, StyledLink, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
Expand All @@ -13,7 +12,6 @@ interface MailDomainProps {

export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
const { colorsTokens } = useCunninghamTheme();
const { t } = useTranslation();
const {
query: { slug },
} = useRouter();
Expand Down Expand Up @@ -55,7 +53,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
>
<Box $align="center" $direction="row" $gap="0.5rem">
<IconMailDomains
aria-label={t(`Mail Domains icon`)}
aria-hidden="true"
color={colorsTokens()['primary-500']}
className="p-t"
width="52"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/apps/desk/src/features/menu/MenuItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const MenuItem = ({ Icon, label, href, alias }: MenuItemProps) => {
>
<Icon
width="2.375rem"
aria-label={t(`{{label}} icon`, { label })}
aria-hidden="true"
style={{
transition: 'color 0.2s ease-in-out',
}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,11 @@ export const ModalAddMembers = ({
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconAddMember width={48} color={colorsTokens()['primary-text']} />
<IconAddMember
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Add a member')}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ describe('MemberGrid', () => {

expect(screen.getByText('This table is empty')).toBeInTheDocument();
expect(
screen.getByLabelText('Add members to the team'),
screen.getByLabelText('Add a member to the team'),
).toBeInTheDocument();
});

Expand Down Expand Up @@ -216,7 +216,7 @@ describe('MemberGrid', () => {
});

expect(
screen.queryByLabelText('Add members to the team'),
screen.queryByLabelText('Add a member to the team'),
).not.toBeInTheDocument();
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export const MemberAction = ({
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">edit</span>}
icon={
<span className="material-icons" aria-hidden="true">
edit
</span>
}
>
<Text $theme="primary">{t('Update role')}</Text>
</Button>
Expand All @@ -64,7 +68,11 @@ export const MemberAction = ({
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
icon={
<span className="material-icons" aria-hidden="true">
delete
</span>
}
>
<Text $theme="primary">{t('Remove from group')}</Text>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const MemberGrid = ({ team, currentRole }: MemberGridProps) => {
{currentRole !== Role.MEMBER && (
<Box $margin={{ all: 'big', bottom: 'small' }} $align="flex-end">
<Button
aria-label={t('Add members to the team')}
aria-label={t('Add a member to the team')}
style={{
width: 'fit-content',
minWidth: '8rem',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const ModalDelete = ({ access, onClose, team }: ModalDeleteProps) => {
$background={colorsTokens()['primary-150']}
$theme="primary"
>
<IconUser width={20} height={20} />
<IconUser width={20} height={20} aria-hidden="true" />
<Text>{access.user.name}</Text>
</Text>
</Box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ export const CardCreateTeam = () => {
<Box $gap="1rem">
<Box $align="center">
<IconGroup
aria-hidden="true"
width={44}
color={colorsTokens()['primary-text']}
aria-label={t('icon group')}
/>
<Text as="h3" $textAlign="center">
{t('Create a new group')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export const InputTeamName = ({
setTeamName(e.target.value);
setIsInputError(false);
}}
rightIcon={<span className="material-icons">edit</span>}
state={isInputError ? 'error' : 'default'}
/>
{isError && error && <TextErrors causes={error.cause} />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,11 @@ export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconRemove width={48} color={colorsTokens()['primary-text']} />
<IconRemove
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Deleting the {{teamName}} team', { teamName: team.name })}
</Text>
Expand Down Expand Up @@ -105,7 +109,7 @@ export const ModalRemoveTeam = ({ onClose, team }: ModalRemoveTeamProps) => {
>
<IconGroup
className="p-t"
aria-label={t(`Teams icon`)}
aria-hidden="true"
color={colorsTokens()['primary-500']}
width={58}
style={{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,11 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
size={ModalSize.MEDIUM}
title={
<Box $align="center" $gap="1rem">
<IconEdit width={48} color={colorsTokens()['primary-text']} />
<IconEdit
width={48}
color={colorsTokens()['primary-text']}
aria-hidden="true"
/>
<Text $size="h3" $margin="none">
{t('Update team {{teamName}}', { teamName: team.name })}
</Text>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@ export const TeamActions = ({ currentRole, team }: TeamActionsProps) => {
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">edit</span>}
icon={
<span className="material-icons" aria-hidden="true">
edit
</span>
}
>
<Text $theme="primary">{t('Update the team')}</Text>
</Button>
Expand All @@ -54,7 +58,11 @@ export const TeamActions = ({ currentRole, team }: TeamActionsProps) => {
setIsDropOpen(false);
}}
color="primary-text"
icon={<span className="material-icons">delete</span>}
icon={
<span className="material-icons" aria-hidden="true">
delete
</span>
}
>
<Text $theme="primary">{t('Delete the team')}</Text>
</Button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
</Box>
<Box $margin="big" $direction="row" $align="center" $gap="1.5rem">
<IconGroup
aria-hidden="true"
width={44}
color={colorsTokens()['primary-text']}
aria-label={t('icon group')}
style={{
flexShrink: 0,
alignSelf: 'start',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,7 @@ describe('PanelTeams', () => {

expect(screen.getByRole('status')).toBeInTheDocument();

expect(
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
expect(await screen.findByLabelText('Empty team icon')).toBeInTheDocument();
});

it('renders a team with only 1 member', async () => {
Expand All @@ -81,12 +79,10 @@ describe('PanelTeams', () => {

expect(screen.getByRole('status')).toBeInTheDocument();

expect(
await screen.findByLabelText('Empty teams icon'),
).toBeInTheDocument();
expect(await screen.findByLabelText('Empty team icon')).toBeInTheDocument();
});

it('renders a non-empty team', async () => {
it('renders a non-empty team', () => {
fetchMock.mock(`end:/teams/?page=1&ordering=-created_at`, {
count: 1,
results: [
Expand All @@ -110,8 +106,6 @@ describe('PanelTeams', () => {
render(<TeamList />, { wrapper: AppWrapper });

expect(screen.getByRole('status')).toBeInTheDocument();

expect(await screen.findByLabelText('Teams icon')).toBeInTheDocument();
});

it('renders the error', async () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ export const PanelActions = () => {
$background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
$color={colorsTokens()['primary-600']}
>
<IconSort width={30} height={30} aria-label={t('Sort teams icon')} />
<IconSort width={30} height={30} aria-hidden="true" />
</BoxButton>
<StyledLink href="/teams/create">
<BoxButton
aria-label={t('Add a team')}
$color={colorsTokens()['primary-600']}
tabIndex={-1}
>
<IconAdd width={30} height={30} aria-label={t('Add team icon')} />
<IconAdd width={30} height={30} aria-hidden="true" />
</BoxButton>
</StyledLink>
</Box>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const TeamItem = ({ team }: TeamProps) => {
<Box $align="center" $direction="row" $gap="0.5rem">
{hasMembers ? (
<IconGroup
aria-label={t(`Teams icon`)}
aria-label={t(`Team icon`)}
color={colorsTokens()['primary-500']}
{...commonProps}
style={{
Expand All @@ -77,7 +77,7 @@ export const TeamItem = ({ team }: TeamProps) => {
/>
) : (
<IconNone
aria-label={t(`Empty teams icon`)}
aria-label={t(`Empty team icon`)}
color={colorsTokens()['greyscale-500']}
{...commonProps}
style={{
Expand Down
Loading

0 comments on commit 04569a8

Please sign in to comment.