Merge pull request #4556 from betagouv/more_accessibility

Corrige des fautes syntaxiques html

app/assets/stylesheets/new_design/forms.scss

@@ -35,16 +35,6 @@
     display: block;
     font-weight: bold;
 
-    .notice {
-      @include notice-text-style;
-      display: block;
-      margin-top: $default-spacer;
-
-      p {
-        margin-bottom: $default-spacer;
-      }
-    }
-
     &.required {
       &::after {
         color: $dark-red;
@@ -53,6 +43,17 @@
     }
   }
 
+  .notice {
+    @include notice-text-style;
+    font-weight: bold;
+    margin-top: - $default-spacer;
+    margin-bottom: $default-padding;
+
+    p {
+      margin-bottom: $default-spacer;
+    }
+  }
+
   .editable-champ {
     position: relative;
 
@@ -73,6 +74,7 @@
     &.editable-champ-checkbox,
     &.editable-champ-radio.vertical,
     &.editable-champ-engagement {
+      p,
       label {
         padding-left: 28px;
       }

app/helpers/champ_helper.rb

@@ -25,4 +25,10 @@ module ChampHelper
     end
     simple_format(auto_linked_text, {}, sanitize: false)
   end
+
+  def describedby_id(champ)
+    if champ.description.present?
+      "desc-#{champ.type_de_champ.id}-#{champ.row}"
+    end
+  end
 end

app/models/service.rb

@@ -30,4 +30,10 @@ class Service < ApplicationRecord
     service_cloned.administrateur = administrateur
     service_cloned
   end
+
+  def telephone_url
+    if telephone.present?
+      "tel:#{telephone.gsub(/[[:blank:]]/, '')}"
+    end
+  end
 end

app/views/admin/procedures/new_from_existing.html.haml

@@ -41,9 +41,8 @@
       %h2.header-section
         Créer une nouvelle démarche à partir d'une démarche existante
 
-      %label
+      %p.notice
-        .notice
+        Pour rechercher dans cette liste, utilisez la fonction "Recherche" de votre navigateur (CTRL+F ou command+F)
-          Pour rechercher dans cette liste, utilisez la fonction "Recherche" de votre navigateur (CTRL+F ou command+F)
 
       %table.table.vertical.procedure-library-list
         - @grouped_procedures.each do |_, procedures|

app/views/instructeurs/procedures/email_notifications.html.haml

@@ -11,13 +11,12 @@
     .explication
       Configurez sur cette page les notifications que vous souhaitez recevoir par email pour cette démarche.
 
-    = form.label :email_notification do
+    = form.label :email_notification, "Recevoir une notification quotidienne"
-      Recevoir une notification quotidienne
 
-      %span.notice
+    %p.notice
-        Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
+      Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
-      %span.notice
+    %p.notice
-        Il est envoyé une fois par jour, du lundi au samedi, vers 10 h du matin.
+      Il est envoyé une fois par jour, du lundi au samedi, vers 10 h du matin.
 
     .radios
       %label
@@ -28,12 +27,11 @@
         = form.radio_button :email_notifications_enabled, false
         Non
 
-    = form.label nil do
+    = form.label nil, "Recevoir un récapitulatif hebdomadaire"
-      Recevoir un récapitulatif hebdomadaire
+    %p.notice
-      %span.notice
+      Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
-        Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
+    %p.notice
-      %span.notice
+      Il est envoyé chaque semaine le lundi matin, et n’est pas désactivable.
-        Il est envoyé chaque semaine le lundi matin, et n’est pas désactivable.
 
     .radios
       %label

app/views/layouts/mailers/_service_footer.html.haml

@@ -28,7 +28,7 @@
             = link_to service.email, "mailto:#{service.email}"
           %br
           Par téléphone :
-          = link_to service.telephone, "tel:#{service.telephone}"
+          = link_to service.telephone, service.telephone_url
           %br
           Horaires : #{ formatted_horaires(service.horaires) }
 

app/views/new_administrateur/groupe_instructeurs/index.html.haml

@@ -11,7 +11,7 @@
 
       = f.label :routing_criteria_name do
         Libellé du routage
-        %span.notice Ce texte apparaitra sur le formulaire usager comme le libellé d'une liste
+      %p.notice Ce texte apparaitra sur le formulaire usager comme le libellé d'une liste
       = f.text_field :routing_criteria_name, placeholder: 'ex. Votre ville', required: true
       = f.submit 'Renommer', class: 'button primary send'
 
@@ -21,7 +21,7 @@
     = form_for :groupe_instructeur, html: { class: 'form' } do |f|
       = f.label :label do
         Ajouter un groupe
-        %span.notice Ce groupe sera un choix de la liste « #{@procedure.routing_criteria_name} » .
+      %p.notice Ce groupe sera un choix de la liste « #{@procedure.routing_criteria_name} » .
       = f.text_field :label, placeholder: 'ex. Ville de Bordeaux', required: true
       = f.submit 'Ajouter le groupe', class: 'button primary send'
 

app/views/new_administrateur/procedure_administrateurs/_add_admin_form.html.haml

@@ -4,6 +4,6 @@
   remote: true do |f|
   = f.label :email do
     Ajouter un administrateur
-    %span.notice= "Renseignez l’email d’un administrateur déjà enregistré sur demarches-simplifiees.fr pour lui permettre de modifier « #{procedure.libelle} »."
+  %p.notice Renseignez l’email d’un administrateur déjà enregistré sur demarches-simplifiees.fr pour lui permettre de modifier « #{procedure.libelle} ».
   = f.email_field :email, placeholder: 'marie.dupont@exemple.fr', required: true
   = f.submit 'Ajouter comme administrateur', class: 'button primary send'

app/views/new_administrateur/procedures/_informations.html.haml

@@ -25,13 +25,13 @@
   = f.label :duree_conservation_dossiers_dans_ds do
     Sur demarches-simplifiees.fr
     %span.mandatory *
-    .notice (durée en mois après le début de l’instruction)
+  %p.notice (durée en mois après le début de l’instruction)
   = f.number_field :duree_conservation_dossiers_dans_ds, class: 'form-control', placeholder: '6', required: true
 
   = f.label :duree_conservation_dossiers_hors_ds do
     Hors demarches-simplifiees.fr
     %span.mandatory *
-    .notice (durée en mois après la fin de l'instruction)
+  %p.notice (durée en mois après la fin de l'instruction)
   = f.number_field :duree_conservation_dossiers_hors_ds, class: 'form-control', placeholder: '6', required: true
 
 - if @procedure.created_at.present?
@@ -43,19 +43,19 @@
   Cadre juridique
   %span.mandatory *
 
-= f.label :cadre_juridique do
+%p.notice
-  .notice
+  Le cadre juridique justifie le droit de collecter les données demandées dans votre démarche auprès des usagers. Par exemple :
-    %p
+  %br
-      Le cadre juridique justifie le droit de collecter les données demandées dans votre démarche auprès des usagers. Par exemple :
+  • Texte de loi (loi, décret, circulaire, arrêté…)
-      %br
+  %br
-      • Texte de loi (loi, décret, circulaire, arrêté…)
+  • Texte juridique (statuts, délibération, décision du conseil d'administration…)
-      %br
+  %br
-      • Texte juridique (statuts, délibération, décision du conseil d'administration…)
+  = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
-      %br
+
-      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
+%p.notice
-      %p
+  Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
-        Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
+
-  Lien vers le texte
+= f.label :cadre_juridique, 'Lien vers le texte'
 = f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
 
 = f.label :deliberation, 'Importer le texte'
@@ -64,14 +64,13 @@
     attached_file: @procedure.deliberation,
     user_can_destroy: true }
 
-%h2.header-section
+%h2.header-section Notice explicative de la démarche
-  Notice explicative de la démarche
 
+%p.notice
+  Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
+
+= f.label :notice, 'Notice'
 - notice = @procedure.notice
-= f.label :notice do
-  .notice
-    %p
-      Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
 = render 'shared/attachment/edit',
   { form: f,
     attached_file: @procedure.notice,
@@ -82,15 +81,14 @@
   .editable-champ.editable-champ-radio.vertical
     = f.label :for_individual, value: true do
       Ma démarche s’adresse à un particulier
-      %span.notice
+    %p.notice En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
-        %p En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
     = f.radio_button :for_individual, true
 
   .editable-champ.editable-champ-radio.vertical
     = f.label :for_individual, value: false do
       Ma démarche s’adresse à une personne morale
-      %span.notice
+    %p.notice
-        %p En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
+      En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
     = f.radio_button :for_individual, false
 
   %p.explication
@@ -103,10 +101,9 @@
   - if feature_enabled?(:administrateur_web_hook)
     = f.label :web_hook_url do
       Lien de rappel HTTP (webhook)
-      .notice
+    %p.notice
-        %p
+      Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
-          Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour notifier un service tiers du changement de l'état d’un dossier de cette démarche sur demarches-simplifiees.fr.
+      = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
-          = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
     = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
 
   = f.label :auto_archive_on do

app/views/root/patron.html.haml

@@ -54,16 +54,13 @@
 
         %h2.header-section Bouton radio verticaux
         .editable-champ.editable-champ-radio.vertical
-          = f.label :archived, value: true do
+          = f.label :archived, 'Option A', value: true
-            Option A
+          %p.notice Une option tout à fait valable.
-            %span.notice
-              %p Une option tout à fait valable.
           = f.radio_button :archived, true
+
         .editable-champ.editable-champ-radio.vertical
-          = f.label :archived, value: false do
+          = f.label :archived, 'Option B', value: false
-            Option B
+          %p.notice Une autre option, pas mal non plus.
-            %span.notice
-              %p Une autre option, pas mal non plus.
           = f.radio_button :archived, false
 
         .send-wrapper

app/views/shared/dossiers/editable_champs/_champ_label.html.haml

@@ -1,4 +1,4 @@
-= form.label champ.main_value_name, { class: champ.repetition? ? 'header-section' : '' } do
+= form.label champ.main_value_name do
   #{champ.libelle}
   - if champ.mandatory?
     %span.mandatory *
@@ -7,5 +7,5 @@
     %span.updated-at{ class: highlight_if_unseen_class(seen_at, champ.updated_at) }
       = "modifié le #{try_format_datetime(champ.updated_at)}"
 
-  - if champ.description.present?
+- if champ.description.present?
-    %span.notice= string_to_html(champ.description)
+  .notice{ id: describedby_id(champ) }= string_to_html(champ.description)

app/views/shared/dossiers/editable_champs/_date.html.haml

@@ -1,4 +1,3 @@
 = form.date_field :value,
   value: champ.value,
-  placeholder: 'JJ/MM/AAAA',
   required: champ.mandatory?

app/views/shared/dossiers/editable_champs/_editable_champ.html.haml

@@ -1,5 +1,7 @@
 .editable-champ{ class: "editable-champ-#{champ.type_champ}" }
-  - if has_label?(champ)
+  - if champ.repetition?
+    = render partial: 'shared/dossiers/editable_champs/header_section', locals: { champ: champ }
+  - elsif has_label?(champ)
     = render partial: 'shared/dossiers/editable_champs/champ_label', locals: { form: form, champ: champ, seen_at: defined?(seen_at) ? seen_at : nil }
 
   = render partial: "shared/dossiers/editable_champs/#{champ.type_champ}",

app/views/shared/dossiers/editable_champs/_text.html.haml

@@ -1,3 +1,4 @@
 = form.text_field :value,
   placeholder: champ.libelle,
-  required: champ.mandatory?
+  required: champ.mandatory?,
+  aria: { describedby: describedby_id(champ) }

app/views/shared/dossiers/messages/_form.html.haml

@@ -5,10 +5,10 @@
   = f.text_area :body, rows: 5, placeholder: placeholder, required: true, class: 'message-textarea'
   .flex.justify-between.wrap
     %div
+      = f.label :piece_jointe, for: :piece_jointe do
+        Joindre un document
+        %span.notice (taille max : 20 Mo)
       = f.file_field :piece_jointe, id: 'piece_jointe', direct_upload: true
-      %label{ for: :piece_jointe }
-        %span.notice
-          (taille max : 20 Mo)
 
     %div
       = f.submit 'Envoyer le message', class: 'button primary send', data: { disable: true }

app/views/shared/help/dropdown_items/_service_item.html.haml

@@ -9,7 +9,7 @@
         = link_to service.email, "mailto:#{service.email}"
       %p.help-dropdown-service-item
         %span.icon.small.phone
-        = link_to service.telephone, "tel:#{service.telephone}"
+        = link_to service.telephone, service.telephone_url
       %p.help-dropdown-service-item
         %span.icon.small.clock
         = service.horaires

app/views/users/_procedure_footer.html.haml

@@ -3,40 +3,43 @@
     - service = procedure.service
     - if service.present?
       .footer-row.footer-columns
-        %ul.footer-column
+        .footer-column
           %p.footer-header Cette démarche est gérée par :
-          %li
+          %ul
-            = service.nom
+            %li
-            %br
+              = service.nom
-            = service.organisme
+              %br
-            %br
+              = service.organisme
-            = string_to_html(service.adresse, wrapper_tag = 'span')
+              %br
+              = string_to_html(service.adresse, wrapper_tag = 'span')
 
-        %ul.footer-column
+        .footer-column
           %p.footer-header Poser une question sur votre dossier :
-          %li
+          %ul
-            - if dossier.present? && dossier.messagerie_available?
+            %li
-              Directement
+              - if dossier.present? && dossier.messagerie_available?
-              = link_to "par la messagerie", messagerie_dossier_path(dossier)
+                Directement
-            - else
+                = link_to "par la messagerie", messagerie_dossier_path(dossier)
-              Par email :
+              - else
-              = link_to service.email, "mailto:#{service.email}"
+                Par email :
+                = link_to service.email, "mailto:#{service.email}"
 
-          %li
+            %li
-            Par téléphone :
+              Par téléphone :
-            %a{ href: "tel:#{service.telephone}" }= service.telephone
+              = link_to service.telephone, service.telephone_url
 
-          %li
+            %li
-            - horaires = "Horaires : #{formatted_horaires(service.horaires)}"
+              - horaires = "Horaires : #{formatted_horaires(service.horaires)}"
-            = simple_format(horaires, {}, wrapper_tag: 'span')
+              = simple_format(horaires, {}, wrapper_tag: 'span')
 
 
         - politiques = politiques_conservation_de_donnees(procedure)
         - if politiques.present?
-          %ul.footer-column
+          .footer-column
             %p.footer-header Conservation des données :
-            - politiques.each do |politique|
+            %ul
-              %li= politique
+              - politiques.each do |politique|
+                %li= politique
 
     = render partial: 'users/general_footer_row', locals: { dossier: dossier }