🚸(frontend) improve screen reading navigation

- 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
numerique-gouv · Aug 8, 2024 · b7e376c · b7e376c
1 parent 3025821
commit b7e376c
Show file tree

Hide file tree

Showing 29 changed files with 87 additions and 72 deletions.
diff --git a/src/frontend/apps/desk/src/features/footer/Footer.tsx b/src/frontend/apps/desk/src/features/footer/Footer.tsx
@@ -83,7 +83,7 @@ export const Footer = () => {
  `}
  >
  <Text $weight="bold">{label}</Text>
- <IconLink width={18} />
+ <IconLink width={18} aria-hidden="true" />
  </StyledLink>
  ))}
  </Box>
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx b/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx
@@ -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>
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/header/Header.tsx b/src/frontend/apps/desk/src/features/header/Header.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx b/src/frontend/apps/desk/src/features/language/LanguagePicker.tsx
@@ -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

diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/MailDomainsContent.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/Panel.tsx
@@ -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={`

diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelActions.tsx
@@ -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>
  );

diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/PanelItem.tsx
@@ -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';
@@ -13,7 +12,6 @@ interface MailDomainProps {
 
 export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
  const { colorsTokens } = useCunninghamTheme();
- const { t } = useTranslation();
  const {
  query: { slug },
  } = useRouter();
@@ -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"

diff --git a/src/frontend/apps/desk/src/features/menu/MenuItems.tsx b/src/frontend/apps/desk/src/features/menu/MenuItems.tsx
@@ -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',
  }}

diff --git a/src/frontend/apps/desk/src/features/teams/member-add/components/ModalAddMembers.tsx b/src/frontend/apps/desk/src/features/teams/member-add/components/ModalAddMembers.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/member-management/components/MemberAction.tsx b/src/frontend/apps/desk/src/features/teams/member-management/components/MemberAction.tsx
@@ -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>
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/member-management/components/ModalDelete.tsx b/src/frontend/apps/desk/src/features/teams/member-management/components/ModalDelete.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/CardCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/CardCreateTeam.tsx
@@ -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')}

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/InputTeamName.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/InputTeamName.tsx
@@ -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} />}

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/ModalRemoveTeam.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/ModalRemoveTeam.tsx
@@ -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>
@@ -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={{

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/ModalUpdateTeam.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/ModalUpdateTeam.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/TeamActions.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/TeamActions.tsx
@@ -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>
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/team-management/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/team-management/components/TeamInfo.tsx
@@ -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',

diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx
@@ -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 () => {
@@ -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: [
@@ -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 () => {

diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx
@@ -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>

diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/components/TeamItem.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/components/TeamItem.tsx
@@ -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={{
@@ -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={{