Accessibilite assistant v2 (#1350)

* Accessibility improvements
- use list in suggestions
- use title attribute on logo

* add empty option label in contact form

* Better accessibilty search form

Author: fabienheureux

qfdmd/forms.py

@@ -55,7 +55,7 @@ class ContactForm(DsfrBaseForm):
     subject = forms.ChoiceField(
         label="Votre sujet",
         choices=[
-            ("", ""),
+            ("", "Sélectionner une option"),
             (
                 "integration",
                 "Je souhaite obtenir de l'aide pour intégrer cet outil",

templates/components/header/header.html

@@ -5,6 +5,7 @@
             class="qf-bg-none qf-flex qf-gap-2w"
             data-testid="header-logo-link"
             href="{% url 'home' %}"
+            title="Que faire de mes Objets ou Déchets ? - Page d'accueil"
         >
             <img
                 src="{% static 'assistant/bloc-marque.svg' %}"

templates/components/search/view.html

@@ -19,24 +19,29 @@
             data-turbo-frame="search-results"
             action="{% url 'qfdmd:search' %}"
             class="qf-pl-4w {# should match the svg icon width #}
-            qf-flex qf-relative
+            qf-flex qf-flex-row-reverse qf-relative
             md:group-data-[home]:qf-h-7w
             qf-h-5w
             qf-content-center
             "
         >
+
+            {% for field in search_form %}
+                {{ field }}
+            {% endfor %}
             <button
                 aria-label="Rechercher"
                 type="submit"
                 class="qf-absolute qf-top-0 qf-bottom-0 qf-left-0
                 qf-m-auto qf-pl-1v
                 fr-btn fr-icon-search-line fr-btn--tertiary-no-outline
+                focus:qf-bg-green-menthe-850-hover
+                focus:qf-text-white
+                focus:!qf-outline-none
+                qf-h-full
+                !qf-max-h-[none]
                 qf-text-green-menthe-main-548"
             ></button>
-
-            {% for field in search_form %}
-                {{ field }}
-            {% endfor %}
         </form>
 
         <turbo-frame

templates/components/search/widget.html

@@ -4,6 +4,7 @@
 
 It is used mainly for styles, to add clasnames.
 {% endcomment %}
+<label for="{{ widget.attrs.id }}" class="qf-sr-only">Entrez un déchet :</label>
 <input
     class="qf-pl-1w qf-pr-2w
     focus:qf-outline-none

templates/qfdmd/home.html

@@ -23,21 +23,23 @@
         <p class="qf-m-0">
         En panne d’inspiration ? Essayez une des suggestions ci‑dessous.
         </p>
-        <div
+        <ul
             class="qf-flex qf-gap-x-2w qf-gap-y-3w
             qf-flex-wrap qf-items-center qf-justify-center "
         >
             {% for suggestion in object_list %}
             {% with suggestion.produit as produit %}
+            <li class="qf-list-none qf-p-0">
             <a
                 class="qf-btn"
                 href="{% url 'qfdmd:synonyme-detail' slug=produit.slug %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
             >
                 {{ produit.nom|capfirst }}
             </a>
+            </li>
             {% endwith %}
             {% endfor %}
-        </div>
+        </ul>
     </div>
 
     <div class="qf-max-w-3xl qf-mx-auto">