From b0e30cceb4601145f20767b60d60d20a43de61eb Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Thu, 15 Sep 2022 16:11:46 +0200 Subject: [PATCH] =?UTF-8?q?Am=C3=A9liorations=20accessibilit=C3=A9=20:=20a?= =?UTF-8?q?ttributs=20`alt`,=20dissimulation=20d'=C3=A9l=C3=A9ments=20aux?= =?UTF-8?q?=20lecteurs=20d'=C3=A9crans=20(#2283)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Retire alt inutiles * feat: Cache par défaut les Emojis aux lecteurs d'écran * feat: Ajout aria-hidden et labels * feat: Améliore a11y du champ de recherche page d'accueil * feat: Ajout role sur Button + cache label inutile aux lecteurs d'écran * feat: Améliore liens landing + retropedalage * fix: Corrige les traductions --- site/source/components/MoreInfosOnUs.tsx | 1 + site/source/components/PageHeader.tsx | 7 +++++- .../source/components/company/SearchField.tsx | 2 +- site/source/components/utils/Emoji.tsx | 9 +++++++- site/source/design-system/buttons/Button.tsx | 3 +++ .../design-system/field/SearchField.tsx | 10 ++++++-- site/source/design-system/icons/Loader.tsx | 7 +++++- .../source/design-system/icons/SearchIcon.tsx | 10 ++++++-- site/source/design-system/typography/link.tsx | 1 + site/source/locales/ui-en.yaml | 6 ++--- site/source/locales/ui-fr.yaml | 6 ++--- site/source/pages/Creer/AfterRegistration.tsx | 6 +---- site/source/pages/Landing/Landing.tsx | 23 ++++++++++++++----- site/source/pages/Landing/SearchOrCreate.tsx | 2 ++ site/source/pages/Nouveautes/Nouveautes.tsx | 5 +++- site/source/pages/integration/Iframe.tsx | 2 +- site/source/pages/integration/Options.tsx | 1 + 17 files changed, 74 insertions(+), 27 deletions(-) diff --git a/site/source/components/MoreInfosOnUs.tsx b/site/source/components/MoreInfosOnUs.tsx index 477c41f8e..7e4f22559 100644 --- a/site/source/components/MoreInfosOnUs.tsx +++ b/site/source/components/MoreInfosOnUs.tsx @@ -63,6 +63,7 @@ export default function MoreInfosOnUs() { height: '3rem', margin: 0, }} + aria-hidden="true" > diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx index 04553617f..4814edd04 100644 --- a/site/source/components/PageHeader.tsx +++ b/site/source/components/PageHeader.tsx @@ -44,7 +44,12 @@ export default function PageHeader({ {picture && ( - + )} diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx index 815f2a07f..d20b93be7 100644 --- a/site/source/components/company/SearchField.tsx +++ b/site/source/components/company/SearchField.tsx @@ -39,7 +39,7 @@ export function CompanySearchField(props: { }, placeholder: t( 'CompanySearchField.placeholder', - 'Café de la gare ou 40123778000127' + 'Ex : Café de la gare ou 40123778000127' ), } diff --git a/site/source/components/utils/Emoji.tsx b/site/source/components/utils/Emoji.tsx index e00c1b41f..de3df7c15 100644 --- a/site/source/components/utils/Emoji.tsx +++ b/site/source/components/utils/Emoji.tsx @@ -4,13 +4,19 @@ type PropType = { emoji: string | undefined alt?: string title?: string + ariaHidden?: boolean } // This custom component has several advantages over the direct use of the // `emojiFn` provided by `react-easy-emoji` : // - allow to configure the URL to self host twemoji images in production // - using a real React component works better with the translation scripts -export default function Emoji({ emoji, alt, title }: PropType) { +export default function Emoji({ + emoji, + alt, + title, + ariaHidden = true, +}: PropType) { alt ??= emoji if (!emoji) { @@ -24,6 +30,7 @@ export default function Emoji({ emoji, alt, title }: PropType) { props: { alt, title, + 'aria-hidden': ariaHidden, }, }) } diff --git a/site/source/design-system/buttons/Button.tsx b/site/source/design-system/buttons/Button.tsx index 04bcfa3b8..cc7b5527b 100644 --- a/site/source/design-system/buttons/Button.tsx +++ b/site/source/design-system/buttons/Button.tsx @@ -15,6 +15,7 @@ type ButtonProps = GenericButtonOrNavLinkProps & { children: React.ReactNode size?: Size light?: boolean + role?: string } export const Button = forwardRef(function Button( @@ -23,6 +24,7 @@ export const Button = forwardRef(function Button( light = false, color = 'primary' as const, isDisabled, + role, ...ariaButtonProps }: ButtonProps, forwardedRef: ForwardedRef @@ -39,6 +41,7 @@ export const Button = forwardRef(function Button( $light={light} $color={color} $isDisabled={isDisabled} + role={role} /> ) }) diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx index ac58d7375..9a6a9c07d 100644 --- a/site/source/design-system/field/SearchField.tsx +++ b/site/source/design-system/field/SearchField.tsx @@ -72,7 +72,11 @@ export default function SearchField( hasLabel={!!props.label} > - {props.isSearchStalled ? : } + {props.isSearchStalled ? ( + + ) : ( + {props.label && ( - {props.label} + + {props.label} + )} {state.value !== '' && ( diff --git a/site/source/design-system/icons/Loader.tsx b/site/source/design-system/icons/Loader.tsx index 2927bb1d3..f30a41d0b 100644 --- a/site/source/design-system/icons/Loader.tsx +++ b/site/source/design-system/icons/Loader.tsx @@ -1,6 +1,11 @@ export function Loader() { return ( - + + Who are we?<1>We are a small, independent, multidisciplinary - <2>team within the<5>Urssaf. We are committed to being close to your - needs in order to constantly improve this site in accordance with the + <2>team within <5>the Urssaf. We are committed to being close to + your needs in order to constantly improve this site in accordance with the <8>beta.gouv.fr approach.<2>We have developed this site to assist entrepreneurs in the development of their business.<3>Our objective is to remove all uncertainties with regard to the administration so that you diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index 0023aa46c..dedadabe1 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -67,7 +67,7 @@ CompanySearchField: description: "Le numéro Siret est un numéro de 14 chiffres unique pour chaque entreprise. Ex : 40123778000127" label: Nom de l'entreprise, SIREN ou SIRET - placeholder: Café de la gare ou 40123778000127 + placeholder: "Ex : Café de la gare ou 40123778000127" Continuer: Continuer Cotisations sociales: Cotisations sociales Crée le: Crée le @@ -755,9 +755,9 @@ inférieurs à: inférieurs à jours: jours landing: aboutUs: "<0>Qui sommes-nous ?<1>Nous sommes une petite <2>équipe - autonome et pluridisciplinaire au sein de l’<5>Urssaf. Nous avons à cœur + autonome et pluridisciplinaire au sein de <6>l’Urssaf. Nous avons à cœur d’être au près de vos besoins afin d’améliorer en permanence ce site - conformément à l'approche <8>beta.gouv.fr.<2>Nous avons développé ce + conformément à l'approche <9>beta.gouv.fr.<2>Nous avons développé ce site pour accompagner les créateurs d’entreprise dans le développement de leur activité.<3>Notre objectif est de lever toutes les incertitudes vis à vis de l’administration afin que vous puissiez vous concentrer sur ce qui diff --git a/site/source/pages/Creer/AfterRegistration.tsx b/site/source/pages/Creer/AfterRegistration.tsx index b34c78af8..0dd941f53 100644 --- a/site/source/pages/Creer/AfterRegistration.tsx +++ b/site/source/pages/Creer/AfterRegistration.tsx @@ -51,11 +51,7 @@ export default function AfterRegistration() { d'établissement (NIC).
- SIRET and SIREN number +

Le code APE diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx index dcecf5dbf..6a34b63b0 100644 --- a/site/source/pages/Landing/Landing.tsx +++ b/site/source/pages/Landing/Landing.tsx @@ -125,14 +125,25 @@ export default function Landing() { Nous sommes une petite{' '} - + équipe {' '} - autonome et pluridisciplinaire au sein de l’ - Urssaf. Nous avons à - cœur d’être au près de vos besoins afin d’améliorer en - permanence ce site conformément à l'approche{' '} - + autonome et pluridisciplinaire au sein de{' '} + + l’Urssaf + + . Nous avons à cœur d’être au près de vos besoins afin + d’améliorer en permanence ce site conformément à l'approche{' '} + beta.gouv.fr . diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx index 9dfca2a1f..d06b33916 100644 --- a/site/source/pages/Landing/SearchOrCreate.tsx +++ b/site/source/pages/Landing/SearchOrCreate.tsx @@ -40,6 +40,7 @@ export default function SearchOrCreate() {