Merge pull request #10266 from demarches-simplifiees/fix-a11y-contact-page

Amélioration de l'accessibilité de la page de contact.

app/views/layouts/_header.haml

@@ -14,7 +14,7 @@
         .fr-header__brand.fr-enlarge-link
           .fr-header__brand-top
             .fr-header__logo
-              %p.fr-logo
+              %p.fr-logo{ lang: "fr" }
                 République
                 = succeed "Française" do
                   %br/
@@ -26,7 +26,7 @@
             - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
 
             = link_to root_profile_link, title: "#{root_profile_libelle} — #{Current.application_name}" do
-              %p.fr-header__service-title= Current.application_name
+              %span.fr-header__service-title{ lang: "fr" }= Current.application_name
 
         .fr-header__tools
           .fr-header__tools-links.relative

app/views/root/_footer.html.haml

@@ -1,6 +1,7 @@
 %footer.fr-footer#footer{ role: "contentinfo" }
   .fr-footer__top
     .fr-container
+      %h2.sr-only= t("links.footer.top_labels.hidden_title")
       .fr-grid-row.fr-grid-row--start.fr-grid-row--gutters
         .fr-col-12.fr-col-sm-3.fr-col-md-3
           %h3.fr-footer__top-cat= t("links.footer.top_labels.communication")
@@ -42,7 +43,7 @@
               = link_to t("links.footer.security.label"), t("links.footer.security.url"), title: t("links.footer.security.title"), class: "fr-footer__top-link", rel: "noopener noreferrer"
   .fr-container
     .fr-footer__body
-      .fr-footer__brand.fr-enlarge-link
+      .fr-footer__brand.fr-enlarge-link{ lang: "fr" }
         %p.fr-logo
           gouvernement
         = link_to t("links.footer.dinum.url"), title: t("links.footer.dinum.title"), class: "fr-footer__brand-link" do

app/views/support/index.html.haml

@@ -11,21 +11,20 @@
 
       .description
         .recommandations
-          %h2
+          = t('.intro_html')
-            = t('.intro_html')
+        %p.mandatory-explanation= t('asterisk_html', scope: [:utils])
-        %p.mandatory-explanation= t('mandatory_champs', scope: [:utils])
 
       - if !user_signed_in?
         .fr-input-group
           = label_tag :email, class: 'fr-label' do
             Email
-            %span.mandatory *
+            = render EditableChamp::AsteriskMandatoryComponent.new
           = email_field_tag :email, params[:email], required: true, autocomplete: 'email', class: 'fr-input'
 
       %fieldset.fr-fieldset{ name: "type" }
         %legend.fr-fieldset__legend
           = t('.your_question')
-          %span.mandatory *
+          = render EditableChamp::AsteriskMandatoryComponent.new
         .fr-fieldset__content
           - @options.each do |(question, question_type, link)|
             .fr-radio-group
@@ -48,13 +47,13 @@
       .fr-input-group
         = label_tag :subject, class: 'fr-label' do
           = t('subject', scope: [:utils])
-          %span.mandatory *
+          = render EditableChamp::AsteriskMandatoryComponent.new
         = text_field_tag :subject, params[:subject], required: true, class: 'fr-input'
 
       .fr-input-group
         = label_tag :text, class: 'fr-label' do
           = t('message', scope: [:utils])
-          %span.mandatory *
+          = render EditableChamp::AsteriskMandatoryComponent.new
         = text_area_tag :text, params[:text], rows: 6, required: true, class: 'fr-input'
 
       .fr-upload-group

config/locales/en.yml

@@ -49,7 +49,7 @@ en:
     'no': 'No'
     deconnexion: "Log out"
     pj: "Attachments"
-    asterisk_html: Fields marked by an asterisk ( <span class = mandatory>*</span> ) are mandatory.
+    asterisk_html: "Fields marked by an asterisk ( <svg aria-label='required' class='icon mandatory' height='10' role='img' viewBox='0 0 1200 1200' width='10' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><desc>required</desc><path d='M489.838 29.354v443.603L68.032 335.894 0 545.285l421.829 137.086-260.743 358.876 178.219 129.398L600.048 811.84l260.673 358.806 178.146-129.398-260.766-358.783L1200 545.379l-68.032-209.403-421.899 137.07V29.443H489.84l-.002-.089z'></path></svg> ) are mandatory."
     mandatory_champs: All fields are mandatory.
     no_mandatory: (optional)
     file_number: File number

config/locales/fr.yml

@@ -40,7 +40,7 @@ fr:
     i_dont_know: Je ne sais pas
     deconnexion: "Déconnexion"
     pj: "Pièces jointes"
-    asterisk_html: Les champs suivis d’un astérisque ( * ) sont obligatoires.
+    asterisk_html: "Les champs suivis d’un astérisque ( <svg aria-label='obligatoire' class='icon mandatory' height='10' role='img' viewBox='0 0 1200 1200' width='10' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'><desc>obligatoire</desc><path d='M489.838 29.354v443.603L68.032 335.894 0 545.285l421.829 137.086-260.743 358.876 178.219 129.398L600.048 811.84l260.673 358.806 178.146-129.398-260.766-358.783L1200 545.379l-68.032-209.403-421.899 137.07V29.443H489.84l-.002-.089z'></path></svg> ) sont obligatoires."
     mandatory_champs: Tous les champs sont obligatoires.
     no_mandatory: (facultatif)
     file_number: Numéro de dossier

config/locales/links.en.yml

@@ -16,6 +16,7 @@ en:
         ou_en_est_mon_dossier_url: "https://faq.demarches-simplifiees.fr/article/11-je-veux-savoir-ou-en-est-linstruction-de-ma-demarche"
     footer:
       top_labels:
+        hidden_title: Useful links
         communication: Communication
         legals: Legal information
         resources: Resources
@@ -35,9 +36,9 @@ en:
         title: "API Documentation"
         url: "https://doc.demarches-simplifiees.fr/api-graphql"
       dinum:
-        title: "The DINUM website - Government"
+        title: "Le site de la DINUM — Direction interministérielle du numérique"
         url: "https://www.numerique.gouv.fr/dinum/"
-        alt: "Interministerial Directorate for Digital Affairs"
+        alt: "Direction interministérielle du numérique"
       code:
         label: "Source code"
         title: "Our Source code is open source"

config/locales/links.fr.yml

@@ -18,6 +18,7 @@ fr:
         ou_en_est_mon_dossier_url: "https://faq.demarches-simplifiees.fr/article/11-je-veux-savoir-ou-en-est-linstruction-de-ma-demarche"
     footer:
       top_labels:
+        hidden_title: Liens pratiques
         communication: Communication
         legals: Informations légales
         resources: Ressources
@@ -37,7 +38,7 @@ fr:
         title: "Documentation graphql de l’API"
         url: "https://doc.demarches-simplifiees.fr/api-graphql"
       dinum:
-        title: "Le site de la DINUM — Gouvernement"
+        title: "Le site de la DINUM — Direction interministérielle du numérique"
         url: "https://www.numerique.gouv.fr/dinum/"
         alt: "Direction interministérielle du numérique"
       cgu: