fix: accessibility in etiquette

Author: desoindx

.github/workflows/e2e.yml

@@ -66,7 +66,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/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 })}