🚸(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 7, 2024 · 04569a8 · 04569a8
1 parent 3025821
commit 04569a8
Show file tree

Hide file tree

Showing 31 changed files with 98 additions and 83 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/__tests__/MemberGrid.test.tsx b/src/frontend/apps/desk/src/features/teams/member-management/__tests__/MemberGrid.test.tsx
@@ -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();
   });
 
@@ -216,7 +216,7 @@ describe('MemberGrid', () => {
     });
 
     expect(
-      screen.queryByLabelText('Add members to the team'),
+      screen.queryByLabelText('Add a member to the team'),
     ).not.toBeInTheDocument();
   });
 

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/MemberGrid.tsx b/src/frontend/apps/desk/src/features/teams/member-management/components/MemberGrid.tsx
@@ -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',

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={{