fix: accessibility in etiquette

Author: desoindx

.github/workflows/e2e.yml

@@ -40,6 +40,7 @@ jobs:
         run: pnpm build
         env:
           NOTION_API_KEY: ${{ secrets.NOTION_API_KEY}}
+          NEXT_PUBLIC_PROGRESS_TIME: 500
       - name: Generate db
         run: pnpm prisma generate
       - name: Migrate db
@@ -66,7 +67,7 @@ jobs:
         uses: foo-software/lighthouse-check-status-action@master
         with:
           lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
-          minAccessibilityScore: '93'
+          minAccessibilityScore: '100'
           minBestPracticesScore: '100'
       - name: Prune dev dependencies
         run: rm -rf node_modules && pnpm install --production

src/components/externalModules/shopify/ColumnEquivalent.tsx

@@ -75,13 +75,15 @@ const ColumnEquivalent = ({
               setToDisplay={setToDisplay}
             />
           )}
-          <Disclaimer
-            language={language}
-            comparisons={comparisons}
-            baseValue={preciseValue}
-            column
-            id={animated ? 'animated' : 'static'}
-          />
+          {!randomize && (
+            <Disclaimer
+              language={language}
+              comparisons={comparisons}
+              baseValue={preciseValue}
+              column
+              id={animated ? 'animated' : 'static'}
+            />
+          )}
           <ul className={isAnimated ? styles.animatedComparisonsColumn : ''}>
             {comparisons.map((comparison, index) => (
               <li

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

@@ -4,14 +4,14 @@
   cursor: pointer;
   top: 0;
   right: 0;
-  padding: 0.25rem 0.5rem;
+  padding: 0.325rem 0.5rem;
   border-radius: 0rem 0.5rem 0rem 0;
   background-color: transparent;
   color: var(--neutral-50);
   border-bottom: 2px solid var(--neutral-20);
   border-left: 2px solid var(--neutral-20);
   line-height: 1;
-  height: 1.375rem;
+  height: 1.5rem;
   font-size: 0.75rem;
 
   svg {

src/components/externalModules/shopify/Equivalent.tsx

@@ -88,12 +88,18 @@ const Equivalent = ({
                 setToDisplay={setToDisplay}
               />
             )}
-            <Disclaimer
-              language={language}
-              comparisons={comparisons}
-              baseValue={preciseValue}
-              id={animated ? 'animated' : 'static'}
-            />
+            {
+              // On n'affiche le dislaimer que si il n'y a pas le bouton randomize, pour des soucis d'accessibilité
+              // Aujourd'hui c'est juste sur le site donc pas de soucis. A voir comment on fera plus tard
+              !randomize && (
+                <Disclaimer
+                  language={language}
+                  comparisons={comparisons}
+                  baseValue={preciseValue}
+                  id={animated ? 'animated' : 'static'}
+                />
+              )
+            }
             <ul className={isAnimated ? styles.animatedComparisons : styles.comparisons}>
               {comparisons.map((comparison, index) => (
                 <li

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

@@ -10,13 +10,13 @@
   right: 1.875rem;
   top: 0;
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
+  padding: 0.325rem 0.5rem;
   border-radius: 0rem 0rem 0rem 0.5rem;
   color: var(--neutral-50);
   border-bottom: 2px solid var(--neutral-20);
   border-left: 2px solid var(--neutral-20);
   line-height: 1;
-  height: 1.375rem;
+  height: 1.5rem;
   font-size: 0.75rem;
 
   svg {

src/components/externalModules/shopify/Progress.tsx

@@ -3,6 +3,8 @@ import PauseIcon from 'components/base/icons/pause'
 import PlayIcon from 'components/base/icons/play'
 import styles from './Progress.module.css'
 
+const duration = process.env.NEXT_PUBLIC_PROGRESS_TIME ? parseInt(process.env.NEXT_PUBLIC_PROGRESS_TIME, 10) : 50
+
 const Progress = ({
   className,
   comparisons,
@@ -22,7 +24,7 @@ const Progress = ({
 
   const updateWithTimeout = useCallback(() => {
     setProgress((value) => value + 1)
-    displayedTimeoutRef.current = setTimeout(updateWithTimeout, 50)
+    displayedTimeoutRef.current = setTimeout(updateWithTimeout, duration)
   }, [])
 
   useEffect(() => {
@@ -35,7 +37,7 @@ const Progress = ({
         clearTimeout(fadeInTimeoutRef.current)
       }
     } else {
-      displayedTimeoutRef.current = setTimeout(updateWithTimeout, 50)
+      displayedTimeoutRef.current = setTimeout(updateWithTimeout, duration)
     }
   }, [paused])
 

src/components/outils/CategorySimulator.tsx

@@ -243,7 +243,9 @@ const CategorySimulator = ({
                     <div className={styles.carpool} data-testid={`livraison-${equivalent.slug}`}>
                       <div className={styles.triangle} />
                       <div className={styles.transport}>
-                        <HiddenLabel htmlFor={`transport-type-${equivalent.slug}`}>{t('transportSelect')}</HiddenLabel>
+                        <HiddenLabel htmlFor={`text-select-transport-type-${equivalent.slug}`}>
+                          {t('transportSelect')}
+                        </HiddenLabel>
                         <Select
                           id={`transport-type-${equivalent.slug}`}
                           className={styles.select}

src/components/outils/alimentation/AlimentationSubCategory.tsx

@@ -45,6 +45,7 @@ const AlimentationSubCategory = ({
           <p>{t(name)}</p>
           <div className={styles.barContainer}>
             <div
+              role='img'
               className={hasCategoryOpen ? styles.displayedBar : styles.bar}
               style={{ width: `${proportion * 100}%` }}
               aria-label={t('impact', { value: proportion * 100 })}

src/components/outils/livraison/LivraisonEtiquette.module.css

@@ -38,9 +38,9 @@
   border-radius: 0.5rem 0rem 0rem 0rem;
   right: 0;
   bottom: 0;
-  padding: 0.25rem 0.5rem;
+  padding: 0.325rem 0.5rem;
   line-height: 1;
-  height: 1.375rem;
+  height: 1.5rem;
   font-size: 0.75rem;
   color: var(--primary-60);