chore: Improve accessibility

app/(public)/layout.tsx

@@ -9,7 +9,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
       <Header />
       <Suspense fallback={<div className='blank' />}>
         <ParamProvider>
-          <main id='contenu'>{children}</main>
+          <main id='contenu' role='main'>
+            {children}
+          </main>
         </ParamProvider>
       </Suspense>
       <Footer />

app/error.tsx

@@ -15,7 +15,7 @@ const Error = () => {
   return (
     <>
       <Header />
-      <main id='contenu'>
+      <main id='contenu' role='main'>
         <ErrorPage />
         <Suggestion fromLabel='Erreur inattendue' simulatorName='du site' />
       </main>

app/not-found.tsx

@@ -13,7 +13,7 @@ const NotFound = () => {
   return (
     <>
       <Header />
-      <main id='contenu'>
+      <main id='contenu' role='main'>
         <NotFoundPage />
         <Suggestion fromLabel='Page non trouvée' simulatorName='du site' />
       </main>

package.json

@@ -160,4 +160,4 @@
   "resolutions": {
     "jackspeak": "2.1.1"
   }
-}
+}

src/components/Notion/DynamicNotion.tsx

@@ -1,27 +1,38 @@
 import { LinkProps } from 'next/link'
 import { ExtendedRecordMap } from 'notion-types'
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect, useRef } from 'react'
 import { NotionRenderer } from 'react-notion-x'
 import { Collection } from 'react-notion-x/build/third-party/collection'
 import 'react-notion-x/src/styles.css'
 import Link from 'components/base/buttons/Link'
 
 const DynamicNotion = ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (ref.current) {
+      const elements = ref.current.getElementsByTagName('img')
+      for (const element of elements) {
+        element.setAttribute('alt', '')
+      }
+    }
+  }, [ref])
   return (
-    <NotionRenderer
-      recordMap={recordMap}
-      components={{
-        Collection,
-        Link: ({ href, children, ...props }: LinkProps & { children: ReactNode }) => {
-          return (
-            // @ts-expect-error: notion type error
-            <Link href={href} {...props} target='_blank' rel='noopener noreferrer'>
-              {children}
-            </Link>
-          )
-        },
-      }}
-    />
+    <div ref={ref}>
+      <NotionRenderer
+        recordMap={recordMap}
+        components={{
+          Collection,
+          Link: ({ href, children, ...props }: LinkProps & { children: ReactNode }) => {
+            return (
+              // @ts-expect-error: notion type error
+              <Link href={href} {...props} target='_blank' rel='noopener noreferrer'>
+                {children}
+              </Link>
+            )
+          },
+        }}
+      />
+    </div>
   )
 }
 

src/components/Notion/Notion.tsx

@@ -2,7 +2,7 @@
 
 import { LinkProps } from 'next/link'
 import { ExtendedRecordMap } from 'notion-types'
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect, useRef } from 'react'
 import { NotionRenderer } from 'react-notion-x'
 import { Collection } from 'react-notion-x/build/third-party/collection'
 import 'react-notion-x/src/styles.css'
@@ -22,11 +22,21 @@ const Notion = ({
   recordMap: ExtendedRecordMap
   previous?: { link: string; label: string }
 }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (ref.current) {
+      const elements = ref.current.getElementsByTagName('img')
+      for (const element of elements) {
+        element.setAttribute('alt', '')
+      }
+    }
+  }, [ref])
+
   return (
     <>
       <Breadcrumbs links={[{ link: '/', label: 'Accueil' }].concat(previous || [])} current={title} />
       <Block title={title} description={description} as='h1'>
-        <div className={styles.container}>
+        <div className={styles.container} ref={ref}>
           <NotionRenderer
             recordMap={recordMap}
             fullPage={true}

src/components/base/ClipboardBox.tsx

@@ -33,12 +33,12 @@ const ClipboardBox = ({ children, tracking, form }: { children: string; tracking
         </span>
       </button>
       {children.startsWith('<script') && (
-        <div className={styles.information}>
+        <p className={styles.information}>
           <InformationIcon />
           {t('information-1')}
           <br />
           {t('information-2')}
-        </div>
+        </p>
       )}
     </>
   )

src/components/base/EquivalentIcon.tsx

@@ -6,9 +6,11 @@ import { buildCurrentUrlFor } from 'utils/urls'
 const EquivalentIcon = ({
   equivalent,
   height,
+  alt,
 }: {
   equivalent: Pick<ComputedEquivalent, 'slug' | 'carpool'>
   height?: number
+  alt?: string
 }) => {
   const [slug] = equivalent.slug.split('+')
 
@@ -17,7 +19,7 @@ const EquivalentIcon = ({
       src={buildCurrentUrlFor(`/icons/${equivalent.carpool ? 'covoiturage' : ''}${getComparisonSlug(slug)}.svg`)}
       width={(height || 1) * 16}
       height={(height || 1) * 16}
-      alt=''
+      alt={alt || ''}
     />
   )
 }

src/components/base/Logo/Ademe.tsx

@@ -4,7 +4,13 @@ import styles from './Logo.module.css'
 
 export default function Ademe({ small }: { small?: boolean }) {
   return (
-    <svg className={classNames(styles.logo, { [styles.small]: small })} width='181' height='213' viewBox='0 0 181 213'>
+    <svg
+      className={classNames(styles.logo, { [styles.small]: small })}
+      width='181'
+      height='213'
+      viewBox='0 0 181 213'
+      role='img'
+      aria-label='ADEME'>
       <path d='M180.35 212.6H0V0H180.35V212.6Z' fill='#004899' />
       <path d='M176.33 4.00977H4.00977V208.59H176.33V4.00977Z' fill='white' />
       <path

src/components/base/Logo/ImpactCO2.tsx

@@ -6,6 +6,8 @@ export default function Logo({ small }: { small?: boolean }) {
   return (
     <svg
       className={classNames(styles.smallLogo, { [styles.small]: small })}
+      aria-label='Impact CO2'
+      role='img'
       xmlns='http://www.w3.org/2000/svg'
       width='124'
       height='48'

src/components/base/Logo/Marianne.tsx

@@ -10,6 +10,8 @@ export default function Marianne({ small }: { small?: boolean }) {
       height='50'
       viewBox='0 0 57 50'
       fill='none'
+      arial-label='République Française'
+      role='img'
       xmlns='http://www.w3.org/2000/svg'>
       <path
         className={styles.black}

src/components/base/NewTabIcon.tsx

@@ -10,6 +10,7 @@ export default function NewTabIcon({ noMargin }: { noMargin?: boolean }) {
       height='13'
       viewBox='0 0 12 13'
       fill='none'
+      role='img'
       aria-label='Nouvel onglet'>
       <path
         d='M4.67 2.16504V3.49504H1.33V10.825H8.66V7.49504H9.99V11.495C9.99 11.865 9.69 12.165 9.32 12.165H0.67C0.3 12.165 0 11.865 0 11.495V2.83504C0 2.46504 0.3 2.16504 0.67 2.16504H4.67ZM12 0.165039V6.16504L9.47 3.63504L5.47 7.63504L4.53 6.69504L8.53 2.69504L6 0.165039H12Z'

src/components/base/Sources.tsx

@@ -16,7 +16,7 @@ const Sources = ({
   className?: string
 }) => {
   return (
-    <div className={classNames(styles.wrapper, className)}>
+    <p className={classNames(styles.wrapper, className)}>
       Source{sources.length > 1 ? 's' : ''} :{' '}
       {sources
         .flatMap((source) => [
@@ -26,7 +26,7 @@ const Sources = ({
           <span key={`${source.label}-separator`}> • </span>,
         ])
         .slice(0, sources.length * 2 - 1)}
-    </div>
+    </p>
   )
 }
 

src/components/breadcrumbs/Breadcrumbs.module.css

@@ -7,6 +7,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 0.75rem;
+  list-style: none;
 
   svg {
     color: var(--neutral-40);
@@ -19,11 +20,18 @@
   font-weight: 500;
 }
 
+.li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .link {
   width: max-content;
   color: var(--primary-60) !important;
 
   &:hover {
     color: var(--priamry-70) !important;
   }
-}
+}

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,23 +1,25 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import Link from 'components/base/buttons/Link'
 import ArrowRightIcon from 'components/base/icons/arrow-right'
 import styles from './Breadcrumbs.module.css'
 
 const Breadcrumbs = ({ links, current }: { links: { label: string; link: string }[]; current: string }) => {
   return (
-    <div className='main-container'>
-      <div className={styles.container}>
+    <nav role='navigation' aria-label='Breadcrumb' className='main-container'>
+      <ol className={styles.container}>
         {links.map(({ label, link }) => (
-          <Fragment key={label}>
+          <li key={label} className={styles.li}>
             <Link className={styles.link} href={link}>
               {label}
             </Link>
             <ArrowRightIcon />
-          </Fragment>
+          </li>
         ))}
-        <div className={styles.current}>{current}</div>
-      </div>
-    </div>
+        <li className={styles.current} aria-current='page'>
+          {current}
+        </li>
+      </ol>
+    </nav>
   )
 }
 

src/components/comparateur/overscreens/Checkbox.tsx

@@ -37,6 +37,7 @@ const Checkbox = ({
   return (
     <CheckboxInput
       key={equivalent.slug}
+      id={equivalent.slug}
       className={interacted && equivalents.length > 7 ? styles.warningEquivalent : styles.equivalent}
       checked={equivalents.includes(equivalent.slug)}
       setChecked={(checked) => {

src/components/comparateur/overscreens/ComparisonOverscreen.tsx

@@ -55,6 +55,7 @@ const ComparisonOverscreen = ({ index }: { index: 0 | 1 }) => {
         <Input
           id='search'
           placeholder={t('search')}
+          title={t('search')}
           value={search}
           padding='lg'
           onChange={(e) => setSearch(e.target.value)}

src/components/comparateur/overscreens/EquivalentsOverscreen.tsx

@@ -89,14 +89,15 @@ const EquivalentsOverscreen = () => {
         )}
       </ul>
       <div className={styles.footer}>
-        <div>
+        <div role='status'>
           <span className={styles.equivalentsNumber} data-testid='selected-equivalents-number'>
             {tempEquivalents.length}
           </span>
           <span className={styles.equivalentsInfo}> / 8 {t('equivalents')}</span>
         </div>
         <div>
           <Button
+            title={t('back-title')}
             onClick={() => {
               setEquivalents(tempEquivalents)
               setOverscreen('comparateur', '')

src/components/connect/IframeConnect.tsx

@@ -26,7 +26,7 @@ const IframeConnect = ({ src, title }: { src?: string; title: string }) => {
     <>
       {!ready && (
         <div className={styles.loading}>
-          Chargement du formulaire en cours <LoadingIcon />
+          <p>Chargement du formulaire en cours</p> <LoadingIcon />
         </div>
       )}
       <iframe ref={ref} id='iframeUAT' title={title} className={ready ? styles.iframe : styles.hidden} src={src} />

src/components/externalModules/Logo.tsx

@@ -21,6 +21,7 @@ const Logo = ({
       target='_blank'
       rel='noreferrer noopener'
       aria-label='Impact CO2'
+      data-testid='impact-co2-link'
       title='Lien externe : accéder au comparateur sur le site Impact CO2'>
       <svg xmlns='http://www.w3.org/2000/svg' width='30' height='48' viewBox='0 0 30 48' fill='none'>
         <path

src/components/externalModules/shopify/Equivalent.module.css

@@ -63,14 +63,14 @@
   transform: translateX(-50%) translateY(-50%) !important;
   border-radius: 50%;
   background-color: var(--neutral-00) !important;
-  color: var(--primary-40) !important;
+  color: var(--primary-60) !important;
   position: absolute !important;
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   height: 1.25em !important;
   width: 1.25em !important;
-  border: 2px solid var(--primary-40) !important;
+  border: 2px solid var(--primary-60) !important;
 
   svg {
     width: 0.75em !important;

src/components/externalModules/shopify/Progress.tsx

@@ -75,7 +75,7 @@ const Progress = ({
       <div
         className={className}
         style={{
-          background: `radial-gradient(closest-side, white 59%, transparent 60% 100%), conic-gradient(var(--primary-20) ${progress}%, transparent 0)`,
+          background: `radial-gradient(closest-side, white 59%, transparent 60% 100%), conic-gradient(var(--primary-50) ${progress}%, transparent 0)`,
         }}>
         <progress value={progress} className={styles.progress} max={100}>
           {progress}%

src/components/faq/FAQ.module.css

@@ -21,7 +21,7 @@
   :global(.notion-link) {
     color: var(--primary-50);
     font-weight: 500;
-    text-decoration: none;
+    text-decoration: underline;
     border: none;
     opacity: 1;
 

src/components/faq/FAQsList.module.css

@@ -1,5 +1,8 @@
-.footer {
+.footerTop {
   margin-top: 1.25rem;
+}
+
+.footer {
   color: var(--neutral-50);
   display: flex;
   align-items: center;