improve accessibility

.github/workflows/e2e.yml

@@ -52,7 +52,7 @@ jobs:
         id: lighthouseCheck
         with:
           device: all
-          urls: 'http://localhost:3000,http://localhost:3000/outils/comparateur,http://localhost:3000/outils/usagenumerique,http://localhost:3000/outils/livraison,http://localhost:3000/outils/chauffage,http://localhost:3000/outils/transport,http://localhost:3000/outils/fruitsetlegumes,http://localhost:3000/outils/chauffage/pompeachaleur,http://localhost:3000/outils/usagenumerique/visioconference,http://localhost:3000/outils/quiz'
+          urls: 'http://localhost:3000,http://localhost:3000/outils/comparateur,http://localhost:3000/outils/usagenumerique,http://localhost:3000/outils/livraison,http://localhost:3000/outils/chauffage,http://localhost:3000/outils/transport,http://localhost:3000/outils/fruitsetlegumes,http://localhost:3000/outils/chauffage/pompeachaleur,http://localhost:3000/outils/usagenumerique/visioconference,http://localhost:3000/outils/quiz,http://localhost:3000/outils/alimentation'
           outputDirectory: ${{ github.workspace }}/tmp/artifacts
       - name: Verify Lighthouse Check results
         uses: foo-software/lighthouse-check-status-action@master

package.json

@@ -36,7 +36,7 @@
     "testIframes": "npx playwright install chromium; npx ts-node -r dotenv/config src/scripts/testIframes.ts"
   },
   "engines": {
-    "node": "22",
+    "node": ">22",
     "yarn": "1.22"
   },
   "dependencies": {

src/components/outils/CategoryDisplayAll.tsx

@@ -1,18 +1,20 @@
 'use client'
 
-import React, { Dispatch, SetStateAction } from 'react'
+import { Dispatch, SetStateAction } from 'react'
 import { track } from 'utils/matomo'
 import DropdownArrowDownIcon from 'components/base/icons/dropdown-arrow-down'
 import DropdownArrowUpIcon from 'components/base/icons/dropdown-arrow-up'
 import styles from './CategoryDisplayAll.module.css'
 
 const CategoryDisplayAll = ({
+  id,
   tracking,
   displayAll,
   setDisplayAll,
   displayAllText,
   hideAllText,
 }: {
+  id?: string
   tracking: string
   displayAll: boolean
   setDisplayAll: Dispatch<SetStateAction<boolean>>
@@ -23,7 +25,7 @@ const CategoryDisplayAll = ({
     <button
       className={styles.displayAll}
       aria-expanded={displayAll}
-      aria-controls='category-equivalents-list'
+      aria-controls={`category-${id || ''}-equivalents-list`}
       onClick={() => {
         track(tracking, displayAll ? 'HideMore' : 'DisplayMore', 'category_display_more')
         setDisplayAll(!displayAll)

src/components/outils/CategorySimulator.tsx

@@ -28,6 +28,7 @@ const getValue = (equivalent: ComputedEquivalent, params: Params, type?: Transpo
 }
 
 const CategorySimulator = ({
+  id,
   tracking,
   equivalents,
   displayAll,
@@ -37,6 +38,7 @@ const CategorySimulator = ({
   type,
   reverse,
 }: {
+  id?: string
   tracking: string
   equivalents: ComputedEquivalent[]
   displayAll?: boolean
@@ -81,7 +83,7 @@ const CategorySimulator = ({
 
   return (
     <div className={styles.container}>
-      <ul ref={ref} id='category-equivalents-list'>
+      <ul ref={ref} id={`category-${id || ''}-equivalents-list`}>
         {equivalents &&
           equivalents
             .sort((a, b) => (getValue(a, initialParams, type) - getValue(b, initialParams, type)) * (reverse ? -1 : 1))
@@ -155,6 +157,7 @@ const CategorySimulator = ({
       </ul>
       {setDisplayAll && displayAll !== undefined && moreText && (
         <CategoryDisplayAll
+          id={id}
           tracking={tracking}
           displayAll={displayAll}
           setDisplayAll={setDisplayAll}

src/components/outils/alimentation/AlimentationSubCategory.module.css

@@ -42,16 +42,15 @@
     outline-offset: 4px;
   }
 
-  &:not(:last-child) {
-    border-radius: calc(0.5rem - 2px) calc(0.5rem - 2px) 0 0;
-    border-bottom: 2px solid var(--primary-30);
-  }
-
   @media screen and (max-width: 29.875rem) {
     flex-direction: column;
     align-items: flex-start;
   }
 }
+.open {
+  border-radius: calc(0.5rem - 2px) calc(0.5rem - 2px) 0 0;
+  border-bottom: 2px solid var(--primary-30);
+}
 
 .info {
   flex: 1;

src/components/outils/alimentation/AlimentationSubCategory.tsx

@@ -1,5 +1,6 @@
+import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { ComputedEquivalent } from 'types/equivalent'
 import { getName } from 'utils/Equivalent/equivalent'
@@ -36,7 +37,7 @@ const AlimentationSubCategory = ({
     <div className={styles.box}>
       <button
         data-testid={`alimentation-category-${name}`}
-        className={styles.button}
+        className={classNames(styles.button, { [styles.open]: display })}
         aria-expanded={display}
         aria-controls={`alimentation-category-${name}`}
         onClick={() => toggleCategories(name)}>
@@ -83,11 +84,13 @@ const AlimentationSubCategory = ({
           )
         )}
       </button>
-      {display && (
-        <div id={`alimentation-category-${name}`} className={styles.categories}>
-          <CategorySimulator tracking='Alimentation' equivalents={equivalents} withSimulator reverse />
-        </div>
-      )}
+      <div id={`alimentation-category-${name}`}>
+        {display && (
+          <div className={styles.categories}>
+            <CategorySimulator id={name} tracking='Alimentation' equivalents={equivalents} withSimulator reverse />
+          </div>
+        )}
+      </div>
     </div>
   )
 }