chore: remaining correction of accessibility (#790)

Author: desoindx

.talismanrc

@@ -13,4 +13,6 @@ fileignoreconfig:
   checksum: 4964a9d18ceceda3ff05dab049e08513d2f360e6e09a06ec1773855e070fcbca
 - filename: app/(public)/outils/habillement/osez-changer/page.tsx
   checksum: 75eb40716bd0ef027e095059733b9df69dc43e3e8d64d0df366bf69f358c7b19
+- filename: src/components/externalModules/detection/Detector.tsx
+  checksum: 1851481f3ddc89e399df61df8d010661643eb94d33822593f173cd68db58369f
 version: ""

src/components/breadcrumbs/Breadcrumbs.tsx

@@ -5,7 +5,7 @@ import styles from './Breadcrumbs.module.css'
 
 const Breadcrumbs = ({ links, current }: { links: { label: string; link: string }[]; current: string }) => {
   return (
-    <nav role='navigation' aria-label='Breadcrumb' className='main-container'>
+    <nav role='navigation' aria-label="Fil d'Ariane" className='main-container'>
       <ol className={styles.container}>
         {links.map(({ label, link }) => (
           <li key={label} className={styles.li}>

src/components/budget/ByYear.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Select from 'components/form/Select'
 import styles from './ByYear.module.css'
 
@@ -36,13 +36,13 @@ const ByYear = ({ labelId }: { labelId: string }) => {
         className={styles.select}
         id='annee'
         label='Année'
-        required
-        onChange={(e) => setBudget(budgets[e.target.value])}>
+        onChange={(e) => setBudget(budgets[e.target.value])}
+        inline>
         <option value='2024'>2024</option>
         <option value='2023'>2023</option>
       </Select>
       <br />
-      {budget.description}
+      <p>{budget.description}</p>
       <table className={styles.table} aria-labelledby={labelId}>
         <thead>
           <tr>

src/components/comparateur/overscreens/Category.tsx

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl'
-import React, { useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { computedEquivalents } from 'src/providers/equivalents'
 import { Category as CategoryType } from 'types/category'
@@ -49,7 +49,7 @@ const Category = ({
   const t = useTranslations('comparateur.overscreen')
   const tCategory = useTranslations('category')
   return (
-    <fieldset className={styles.container}>
+    <div className={styles.container}>
       <button
         className={styles.header}
         onClick={() => setOpen(!open)}
@@ -90,14 +90,16 @@ const Category = ({
               {t('compare-button')}
             </Button>
           </div>
-          <Equivalents
-            equivalents={equivalents}
-            equivalentsToDisplay={categoryEquivalents}
-            setEquivalents={setEquivalents}
-          />
+          <fieldset aria-label={`${t('equivalents-group')} ${tCategory(`name-${category.slug}`)}`}>
+            <Equivalents
+              equivalents={equivalents}
+              equivalentsToDisplay={categoryEquivalents}
+              setEquivalents={setEquivalents}
+            />
+          </fieldset>
         </>
       )}
-    </fieldset>
+    </div>
   )
 }
 

src/components/externalModules/detection/Detector.tsx

@@ -152,9 +152,18 @@ const Detector = ({ impact, language }: { impact: string; language: 'fr' | 'en'
         setDisplay('')
       }
     }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setDisplay('')
+      }
+    }
+
     document.addEventListener('click', handleClickOutside, true)
+    document.addEventListener('keydown', handleKeyDown, true)
     return () => {
       document.removeEventListener('click', handleClickOutside, true)
+      document.removeEventListener('keydown', handleKeyDown, true)
     }
   }, [])
 
@@ -169,7 +178,7 @@ const Detector = ({ impact, language }: { impact: string; language: 'fr' | 'en'
         }}
       />
       <div
-        role='alertdialog'
+        data-testId='etiquette'
         aria-labelledby='etiquette-value'
         className={classNames(styles.etiquette, {
           [styles.hide]: !display,

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

@@ -11,6 +11,8 @@
 
 .leftContent {
   flex: 1;
+  display: flex;
+  flex-direction: column;
   padding: 0.75rem 0.75rem 1rem 0.75rem;
 }
 

src/components/externalModules/shopify/ColumnEquivalent.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Language } from 'types/equivalent'
 import { getNumberPrecision } from 'utils/formatNumberPrecision'
 import LocalNumber from 'components/base/LocalNumber'
@@ -43,12 +43,12 @@ const ColumnEquivalent = ({
   return (
     <div className={classNames(styles.container, { [styles.withRandomize]: !!randomize })}>
       <div className={baseStyles.top}>
-        <div className={styles.leftContent}>
-          <div className={baseStyles.value} data-testid='etiquette-value'>
+        <p className={styles.leftContent}>
+          <span className={baseStyles.value} data-testid='etiquette-value'>
             <LocalNumber number={value} />
-          </div>
-          <div className={baseStyles.label}>{unit} CO₂e</div>
-        </div>
+          </span>
+          <span className={baseStyles.label}>{unit} CO₂e</span>
+        </p>
         <Logo value={preciseValue} right />
       </div>
       <div className={baseStyles.rightColumn}>

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

@@ -41,6 +41,8 @@
 .leftContent {
   padding: 0.75em 1.25em 0.75em 0.25em !important;
   margin: auto !important;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 .rightColumn,

src/components/externalModules/shopify/Equivalent.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { Language } from 'types/equivalent'
 import { getNumberPrecision } from 'utils/formatNumberPrecision'
 import LocalNumber from 'components/base/LocalNumber'
@@ -60,12 +60,12 @@ const Equivalent = ({
       <div className={styles.container}>
         <div className={styles.left}>
           <Logo value={preciseValue} url={url} />
-          <div className={styles.leftContent}>
-            <div className={styles.value} data-testid='etiquette-value'>
+          <p className={styles.leftContent}>
+            <span className={styles.value} data-testid='etiquette-value'>
               <LocalNumber number={value} />
-            </div>
-            <div className={styles.label}>{unit} CO₂e</div>
-          </div>
+            </span>
+            <span className={styles.label}>{unit} CO₂e</span>
+          </p>
         </div>
         <div className={styles.right}>
           <div className={isAnimated ? styles.animatedEqual : styles.equal}>

src/components/layout/Header.tsx

@@ -9,12 +9,12 @@ import SkipLinks from './SkipLinks'
 
 export default function Header() {
   return (
-    <header role='banner' aria-label='En-tête' className={styles.header} id='header-navigation' tabIndex={-1}>
+    <header role='banner' aria-label='En-tête' className={styles.header} id='header-navigation'>
       <SkipLinks />
       <div className='main-container'>
         <div className={styles.container}>
           <Logos />
-          <nav role='navigation'>
+          <nav role='navigation' tabIndex={-1} aria-label='Menu principal'>
             <ul className={styles.mainLinks}>
               <li>
                 <Link href='/outils' className={styles.link}>