Merge pull request #4556 from betagouv/more_accessibility

Corrige des fautes syntaxiques html
2019-11-21 17:17:09 +01:00 · 2019-11-21 17:17:09 +01:00 · 04f29b404f
commit 04f29b404f
parent 1bba20a782 054181a16f
17 changed files with 110 additions and 100 deletions
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/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;
      }
--- a/app/helpers/champ_helper.rb
+++ b/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
--- a/app/models/service.rb
+++ b/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
--- a/app/views/admin/procedures/new_from_existing.html.haml
+++ b/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
-        .notice
-          Pour rechercher dans cette liste, utilisez la fonction "Recherche" de votre navigateur (CTRL+F ou command+F)
+      %p.notice
+        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|
--- a/app/views/instructeurs/procedures/email_notifications.html.haml
+++ b/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
-      Recevoir une notification quotidienne
+    = form.label :email_notification, "Recevoir une notification quotidienne"

-      %span.notice
-        Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
-      %span.notice
-        Il est envoyé une fois par jour, du lundi au samedi, vers 10 h du matin.
+    %p.notice
+      Cet email vous signale le dépôt de nouveaux dossiers sur cette démarche, ou des changements sur vos dossiers suivis.
+    %p.notice
+      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
-      Recevoir un récapitulatif hebdomadaire
-      %span.notice
-        Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
-      %span.notice
-        Il est envoyé chaque semaine le lundi matin, et n’est pas désactivable.
+    = form.label nil, "Recevoir un récapitulatif hebdomadaire"
+    %p.notice
+      Cet email récapitule l’activité de la semaine sur l’ensemble de vos démarches.
+    %p.notice
+      Il est envoyé chaque semaine le lundi matin, et n’est pas désactivable.

    .radios
      %label
--- a/app/views/layouts/mailers/_service_footer.html.haml
+++ b/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) }

--- a/app/views/new_administrateur/groupe_instructeurs/index.html.haml
+++ b/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'

--- a/app/views/new_administrateur/procedure_administrateurs/_add_admin_form.html.haml
+++ b/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'
--- a/app/views/new_administrateur/procedures/_informations.html.haml
+++ b/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
-  .notice
-    %p
-      Le cadre juridique justifie le droit de collecter les données demandées dans votre démarche auprès des usagers. Par exemple :
-      %br
-      • Texte de loi (loi, décret, circulaire, arrêté…)
-      %br
-      • Texte juridique (statuts, délibération, décision du conseil d'administration…)
-      %br
-      = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
-      %p
-        Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
-  Lien vers le texte
+%p.notice
+  Le cadre juridique justifie le droit de collecter les données demandées dans votre démarche auprès des usagers. Par exemple :
+  %br
+  • Texte de loi (loi, décret, circulaire, arrêté…)
+  %br
+  • Texte juridique (statuts, délibération, décision du conseil d'administration…)
+  %br
+  = link_to("En savoir plus avec cette vidéo de 5 minutes", CADRE_JURIDIQUE_URL, target: "_blank", rel: "noopener")
+
+%p.notice
+  Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
+
+= 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
-  Notice explicative de la démarche
+%h2.header-section 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 En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
+    %p.notice 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 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.
+    %p.notice
+      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
-          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")
+    %p.notice
+      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")
    = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'

  = f.label :auto_archive_on do
--- a/app/views/root/patron.html.haml
+++ b/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
-            Option A
-            %span.notice
-              %p Une option tout à fait valable.
+          = f.label :archived, 'Option A', value: true
+          %p.notice Une option tout à fait valable.
          = f.radio_button :archived, true
+
        .editable-champ.editable-champ-radio.vertical
-          = f.label :archived, value: false do
-            Option B
-            %span.notice
-              %p Une autre option, pas mal non plus.
+          = f.label :archived, 'Option B', value: false
+          %p.notice Une autre option, pas mal non plus.
          = f.radio_button :archived, false

        .send-wrapper
--- a/app/views/shared/dossiers/editable_champs/_champ_label.html.haml
+++ b/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?
-    %span.notice= string_to_html(champ.description)
+- if champ.description.present?
+  .notice{ id: describedby_id(champ) }= string_to_html(champ.description)
--- a/app/views/shared/dossiers/editable_champs/_date.html.haml
+++ b/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?
--- a/app/views/shared/dossiers/editable_champs/_editable_champ.html.haml
+++ b/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}",
--- a/app/views/shared/dossiers/editable_champs/_text.html.haml
+++ b/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) }
--- a/app/views/shared/dossiers/messages/_form.html.haml
+++ b/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 }
--- a/app/views/shared/help/dropdown_items/_service_item.html.haml
+++ b/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
--- a/app/views/users/_procedure_footer.html.haml
+++ b/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
-            = service.nom
-            %br
-            = service.organisme
-            %br
-            = string_to_html(service.adresse, wrapper_tag = 'span')
+          %ul
+            %li
+              = service.nom
+              %br
+              = service.organisme
+              %br
+              = string_to_html(service.adresse, wrapper_tag = 'span')

-        %ul.footer-column
+        .footer-column
          %p.footer-header Poser une question sur votre dossier :
-          %li
-            - if dossier.present? && dossier.messagerie_available?
-              Directement
-              = link_to "par la messagerie", messagerie_dossier_path(dossier)
-            - else
-              Par email :
-              = link_to service.email, "mailto:#{service.email}"
+          %ul
+            %li
+              - if dossier.present? && dossier.messagerie_available?
+                Directement
+                = link_to "par la messagerie", messagerie_dossier_path(dossier)
+              - else
+                Par email :
+                = link_to service.email, "mailto:#{service.email}"

-          %li
-            Par téléphone :
-            %a{ href: "tel:#{service.telephone}" }= service.telephone
+            %li
+              Par téléphone :
+              = link_to service.telephone, service.telephone_url

-          %li
-            - horaires = "Horaires : #{formatted_horaires(service.horaires)}"
-            = simple_format(horaires, {}, wrapper_tag: 'span')
+            %li
+              - horaires = "Horaires : #{formatted_horaires(service.horaires)}"
+              = 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|
-              %li= politique
+            %ul
+              - politiques.each do |politique|
+                %li= politique

    = render partial: 'users/general_footer_row', locals: { dossier: dossier }