Accessibilite (#1230)

Accessiblite
  - Dé-commenter les tests d'intégration
  - Corriger soucis d'accessibilité détectés
  - Ajouter fixtures pour les déchets

.github/workflows/run_tests.yml

@@ -124,7 +124,7 @@ jobs:
 
       - name: Populate database
         run: |
-          python manage.py loaddata actions acteur_services acteur_types categories objets
+          python manage.py loaddata actions acteur_services acteur_types categories objets produits synonymes
 
       - name: Run serveur
         run: |

Makefile

@@ -131,6 +131,10 @@ e2e-test:
 	npx playwright test
 	$(PYTEST) ./integration_tests
 
+.PHONY: a11y
+a11y:
+	npx playwright test --reporter=list ./e2e_tests/accessibility.spec.ts
+
 .PHONY: js-test
 js-test:
 	npm run test

e2e_tests/accessibility.spec.ts

@@ -1,24 +1,54 @@
-import { AxeBuilder } from "@axe-core/playwright"
-import { expect, test } from "@playwright/test"
+import { AxeBuilder } from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
 
-// test("formulaire iFrame is WCAG compliant", async ({ page }) => {
-//   await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" })
+// Shared variables
+const BASE_URL = "http://localhost:8000";
+const WCAG_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"];
+const IFRAME_SELECTOR = "iframe";
 
-//   const accessibilityScanResults = await new AxeBuilder({ page })
-//     .include("iframe") // restriction du scan à l'iframe uniquement
-//     .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])  // TODO : trouver quelle règle se rapproche le plus du RGAA
-//     .analyze()
+test.describe("WCAG Compliance Tests", () => {
+  test("Formulaire iFrame | Desktop", async ({ page }) => {
+    await page.goto(`${BASE_URL}/test_iframe`, { waitUntil: "networkidle" });
 
-//   expect(accessibilityScanResults.violations).toEqual([])
-// })
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(IFRAME_SELECTOR) // Restrict scan to the iframe
+      .withTags(WCAG_TAGS)
+      .analyze();
 
-// test("carte iFrame is WCAG compliant", async ({ page }) => {
-//   await page.goto(`http://localhost:8000/test_iframe?carte`, { waitUntil: "networkidle" })
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
 
-//   const accessibilityScanResults = await new AxeBuilder({ page })
-//     .include("iframe") // restriction du scan à l'iframe uniquement
-//     .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])  // TODO : trouver quelle règle se rapproche le plus du RGAA
-//     .analyze()
+  test("Carte iFrame | Desktop", async ({ page }) => {
+    await page.goto(`${BASE_URL}/test_iframe?carte`, { waitUntil: "networkidle" });
 
-//   expect(accessibilityScanResults.violations).toEqual([])
-// })
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .include(IFRAME_SELECTOR) // Restrict scan to the iframe
+      .withTags(WCAG_TAGS)
+      .analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test("Assistant Homepage | Desktop", async ({ page }) => {
+    // TODO: Update the route for production
+    await page.goto(`${BASE_URL}/dechet`, { waitUntil: "networkidle" });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .exclude("[data-disable-axe]")
+      .withTags(WCAG_TAGS)
+      .analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test("Assistant Detail Page | Desktop", async ({ page }) => {
+    await page.goto(`${BASE_URL}/smartphone`, { waitUntil: "networkidle" });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .exclude("[data-disable-axe]")
+      .withTags(WCAG_TAGS)
+      .analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

jinja2/qfdmo/shared/main.html

@@ -47,6 +47,7 @@
                 {# Is useful for digital view so that the users can scrol in the results #}
                 qf-overflow-scroll
                 "
+                tabindex="0"
             >
                 {% block form_result %}
                     <turbo-frame id="addressesPanel"

qfdmd/fixtures/produits.json

@@ -0,0 +1,21 @@
+[
+{
+  "model": "qfdmd.produit",
+  "pk": 334,
+  "fields": {
+    "modifie_le": "2025-01-14T17:45:28.800Z",
+    "qu_est_ce_que_j_en_fais_mauvais_etat": "",
+    "qu_est_ce_que_j_en_fais_bon_etat": "",
+    "comment_les_eviter": "Assurez-vous à l'achat qu'il bénéficie d'une bonne garantie réparation et faites le durer autant que possible.\nEn cas de panne, faites-le réparer. Pour faciliter la réparation, à l'achat, privilégiez un appareil démontable. Pour les smartphone, un indicateur simple vous permet de savoir si celui que vous voulez acheter est facilement réparable, grâce à une note sur 10 indiquant son \"indice de réparabilité\".\n<br /><br />\nRetrouvez des conseils d'entretien de votre téléphone pour prolonger sa durée de vie sur la <a href=\"https://epargnonsnosressources.gouv.fr/entretien/smartphone/\" target=\"_blank\">Bible de l'entretien des objets</a>.",
+    "que_va_t_il_devenir": "Remis à une structure de réemploi ou revendu, votre appareil poursuit une seconde vie. Déposé en déchèterie ou remis à un revendeur, il suit la filière des Déchets d'Équipements Électriques et Électroniques (DEEE). Il est alors acheminé jusqu'à un centre de traitement où il est démantelé et ses différents composants recyclables récupérés (métaux et plastiques). Les substances non-recyclables sont incinérées (avec le plus souvent récupération de chaleur pour produire de l'énergie) ou enfouies dans des installations de stockage de déchets.",
+    "nom": "Téléphone mobile",
+    "synonymes_existants": "Smartphone",
+    "code": "DEEE",
+    "bdd": "ocad3e",
+    "qu_est_ce_que_j_en_fais": "S'il est encore en bon état, donnez-le à une association caritative ou un proche, ou bien revendez-le.<br /><br />S’il est en panne, privilégiez la réparation. Certains réparateurs peuvent même vous faire bénéficier d'une réduction via le <a href=\"https://www.economie.gouv.fr/particuliers/bonus-reparation-comment-ca-marche\" target=\"_blank\">Bonus Réparation</a>.\n<br /><br />Qu'il soit hors service ou encore fonctionnel vous pouvez :<br /><br />-\tle déposer en boutique de téléphonie ou le renvoyer via le service de reprise à distance de votre opérateur.<br /><br />-\tl'envoyer par correspondance grâce aux services de certains éco-organismes (voir \"<b>En savoir plus</b>\" ci-dessous).<br /><br />\nSinon, apportez-le en déchèterie.",
+    "nom_eco_organisme": "Ecologic / Ecosystem",
+    "filieres_rep": "Equipements électriques et électroniques",
+    "slug": "Téléphone mobile"
+  }
+}
+]

qfdmd/fixtures/synonymes.json

@@ -0,0 +1,19 @@
+[
+{
+  "model": "qfdmd.synonyme",
+  "pk": 1915,
+  "fields": {
+    "modifie_le": "2025-01-14T17:45:28.807Z",
+    "qu_est_ce_que_j_en_fais_mauvais_etat": "",
+    "qu_est_ce_que_j_en_fais_bon_etat": "",
+    "comment_les_eviter": "",
+    "que_va_t_il_devenir": "",
+    "slug": "smartphone",
+    "nom": "Smartphone",
+    "produit": 334,
+    "picto": "",
+    "pin_on_homepage": false,
+    "meta_description": ""
+  }
+}
+]

static/to_compile/entrypoints/assistant/script-to-iframe.ts

@@ -11,6 +11,7 @@ const iframeAttributes = {
   style: "border: none; width: 100%; display: block; margin: 0 auto;",
   allowfullscreen: true,
   allow: "geolocation; clipboard-write",
+  title: "Que faire de mes objets et déchets"
 };
 
 if (script?.dataset?.testid) {

templates/components/footer/_standalone.html

@@ -11,7 +11,7 @@ <h2>Comment réduire ses déchets ?</h2>
     </a>
     .</p>
     <p class="qf-text-center">
-        <img src="{% static "assistant/agir-pour-la-transition.svg" %}" class="qf-h-15w">
+        <img src="{% static "assistant/agir-pour-la-transition.svg" %}" class="qf-h-15w" alt="">
     </p>
 </section>
 <section class="fr-container">

templates/components/header/header.html

@@ -8,6 +8,7 @@
             <img
                 src="{% static 'assistant/bloc-marque.svg' %}"
                 class="max-md:qf-max-w-[220px]"
+                alt="Bloc-marque Ademe & République française"
             >
             {% if not assistant.is_home %}
                 {% include "components/logo/animated.html" %}

templates/components/logo/_base.html

@@ -2,4 +2,11 @@
     data-controller="blink"
     data-blink-words-value='["objets"]'
     class="qf-text-green-menthe-sun-373-moon-652-hover"
+    {% comment %}
+    This tag is excluded from our automated axe accessibilty tests because
+    it triggers a false positive. Its contrast is sufficient at 4.62 for
+    a big title, but for some reason Axe does not detect that the text
+    here is displayed in a large font-size.
+    {% endcomment %}}
+    data-disable-axe
 >déchets</span>{% include "./_cursor.html" %}?

templates/components/produit/_detail.html

@@ -13,6 +13,7 @@ <h2>Où l'apporter ?</h2>
         <iframe
             class="max-md:qf-aspect-[9/20] qf-max-h-[90vh] md:qf-max-h-[90svh]
             md:qf-max-h-[90vh] md:qf-h-[50em] qf-w-full"
+            title="Carte Longue Vie Aux Objets - Où l'apporter"
             src="{{ url_carte|default:produit.sous_categories.first.url_carte }}"></iframe>
     </section>
     {% endif %}

templates/components/search/view.html

@@ -27,6 +27,7 @@
             {% csrf_token %}
 
             <button
+                aria-label="Rechercher"
                 type="submit"
                 class="qf-absolute qf-left-0
                 group-data-[home]:-qf-mt-1v -qf-mt-1w qf-m-auto

templates/components/sidebar/action.html

@@ -4,7 +4,7 @@
     class="qf-p-0 lg:qf-rounded-l-full"
     data-fr-opened="false"
     aria-controls="fr-modal-{{ id }}"
-    aria-labelled-by="sidebar-action-{{ id }}"
+    aria-labelledby="sidebar-action-{{ id }}"
 >
     <span class="
         lg:qf-rounded-l-full lg:qf-py-2w lg:qf-pl-2w lg:qf-pr-1w