Merge pull request #10020 from mfo/US/a11y-invite-with-nice-feedback

ETQ usager utilisant un lecteur d'écran: l'envoie d'une invitation est confusant (le form reste rempli, le message de confirmation n'est pas lu)

app/controllers/invites_controller.rb

@@ -15,7 +15,7 @@ class InvitesController < ApplicationController
 
     if invite.valid?
       # The notification is sent through an after commit hook in order to avoir concurrency issues
-      flash.notice = "Une invitation a été envoyée à #{invite.email}."
+      flash.notice = t('views.invites.create.success', email: invite.email)
     else
       flash.alert = invite.errors.full_messages
     end
@@ -49,9 +49,9 @@ class InvitesController < ApplicationController
     if invite.present?
       @dossier = invite.dossier
       invite.destroy!
-      flash.notice = "L’autorisation de #{invite.email} vient d’être révoquée."
+      flash.notice = t('views.invites.destroy.success', email: invite.email)
     else
-      flash.alert = "Vous ne pouvez pas révoquer cette autorisation"
+      flash.alert = t('views.invites.destroy.error')
     end
 
     respond_to do |format|

app/views/invites/_form.html.haml

@@ -1,31 +1,35 @@
 #invites-form.fr-p-2w
+  %h4.fr-h5= t('views.invites.form.modal_title')
+  %p.fr-highlight.fr-mb-3w= t('views.invites.form.modal_highlight')
+
+  %h5.fr-h6= t('views.invites.form.edit_dossier', count: invites.size)
   - if invites.present?
     #invite-list{ morphing ? { tabindex: "-1" } : {} }
-      %h4.fr-h6= t('views.invites.form.invite_to_participate')
       %ul
         - invites.each do |invite|
           %li
             = invite.email
             %small{ 'data-turbo': 'true' }
-              = link_to t('views.invites.form.withdraw_permission'), invite_path(invite), data: { turbo_method: :delete, turbo_confirm: t('views.invites.form.want_to_withdraw_permission') }, class: "fr-btn fr-btn--sm fr-btn--tertiary-no-outline"
+              = link_to t('views.invites.form.withdraw_permission'), invite_path(invite), data: { turbo_method: :delete, turbo_confirm: t('views.invites.form.want_to_withdraw_permission', email: invite.email) }, class: "fr-btn fr-btn--sm fr-btn--tertiary-no-outline"
 
-    %p= t('views.invites.form.edit_dossier')
     - if dossier.brouillon?
       %p= t('views.invites.form.submit_dossier_yourself')
 
-  - else
-    %p= t('views.invites.form.invite_to_edit_line1')
-    %p= t('views.invites.form.invite_to_edit_line2')
+  = form_tag dossier_invites_path(dossier), data: { turbo: true, turbo_force: :server }, method: :post, aria: { labelledby: 'invite-form-legend' } do
+    %fieldset.fr-fieldset
+      %legend.fr-fieldset__legend#invite-form-legend
+        %h5.fr-h6= t('views.invites.form.title')
 
-  = form_tag dossier_invites_path(dossier), data: { turbo: true, turbo_force: :server }, method: :post do
-    .fr-input-group
-      = label_tag :invite_email, class: "fr-label" do
-        = t('views.invites.form.email')
-        %span.fr-hint-text= t('views.invites.form.email_hint')
-      = email_field_tag :invite_email, '', required: true, class: "fr-input"
+      .fr-fieldset__element
+        .fr-input-group
+          = label_tag :invite_email, class: "fr-label" do
+            = t('views.invites.form.email')
+            %span.fr-hint-text= t('views.invites.form.email_hint')
+          = email_field_tag :invite_email, '', required: true, class: "fr-input"
 
-    .fr-input-group
-      = label_tag :invite_message, t('views.invites.form.invite_message'), class: "fr-label"
-      = text_area_tag :invite_message, '', class: "fr-input"
+      .fr-fieldset__element
+        .fr-input-group
+          = label_tag :invite_message, t('views.invites.form.invite_message'), class: "fr-label"
+          = text_area_tag :invite_message, '', class: "fr-input"
 
     = submit_tag t('views.invites.form.send_invitation'), class: 'fr-btn fr-btn--secondary'

app/views/layouts/_flash_messages.html.haml

@@ -1,4 +1,4 @@
-#flash_messages
+#flash_messages{ aria: { live: 'assertive' } }
   - if flash.any?
     #flash_message.center
       - flash.each do |key, value|

config/locales/en.yml

@@ -310,20 +310,27 @@ en:
         email_missing: "If you have not received our email (have you checked your spam ?), we can resend it."
         resent: 'Resend the confirmation email'
     invites:
+      create:
+        success: "One invitation has been sent to %{email}."
+      destroy:
+        success: "The permission given to %{email} had been revoked."
+        error: "You can't revoke this invitation"
       dropdown:
         invite_to_edit: Invite someone to edit this file
         view_invited_people: "View invited people"
         invite_to_view: "Invite someone to view this file"
       form:
-        invite_to_edit_line1: You can invite someone to complete this file with you.
-        invite_to_edit_line2: This person will have the right to edit your file.
+        modal_title: Invite someone
+        modal_highlight: "Invited people can view and edit your file"
+        title: Invite someone
         email: Email address
         invite_message: Add a message to the person you invite (optional)
         send_invitation: Send an invitation
-        invite_to_participate: "Invited people to participate in this file"
         withdraw_permission: "Withdraw the permission"
-        want_to_withdraw_permission: "Would you like to withdraw the permission?"
-        edit_dossier: "These people can edit this file."
+        want_to_withdraw_permission: "Would you like to withdraw the permission of %{email}?"
+        edit_dossier:
+          one: "1 user can edit this file."
+          other: "%{count} users can edit this file."
         submit_dossier_yourself: "You must submit the file yourself when it is complete."
     pagination:
       next: Next

config/locales/fr.yml

@@ -306,21 +306,29 @@ fr:
         email_missing: "Si vous n’avez pas reçu notre message (avez-vous vérifié les indésirables ?), nous pouvons vous le renvoyer."
         resent: 'Renvoyer un email de confirmation'
     invites:
+      create:
+        success: "Une invitation a été envoyée à %{email}."
+      destroy:
+        success: "L’autorisation de %{email} vient d’être révoquée."
+        error: "Vous ne pouvez pas révoquer cette autorisation"
       dropdown:
         invite_to_edit: Inviter une personne à modifier ce dossier
         view_invited_people: "Voir les personnes invitées"
         invite_to_view: "Inviter une personne à consulter ce dossier"
       form:
-        invite_to_edit_line1: Vous pouvez inviter quelqu’un à remplir ce dossier avec vous.
-        invite_to_edit_line2: Cette personne aura le droit de modifier votre dossier.
+        modal_title: "Gestion des invités"
+        modal_highlight: Les invités ont le droit de voir et modifier votre dossier.
+        title: Ajouter un invité
         email: Adresse mail
         email_hint: "Exemple : camilya.martin@exemple.fr"
         invite_message: Ajouter un message à la personne invitée (optionnel)
         send_invitation: Envoyer une invitation
-        invite_to_participate: "Personnes invitées à participer à ce dossier"
         withdraw_permission: "Révoquer l’autorisation"
-        want_to_withdraw_permission: "Souhaitez-vous supprimer l’autorisation ?"
-        edit_dossier: "Ces personnes peuvent modifier ce dossier."
+        want_to_withdraw_permission: "Souhaitez-vous supprimer l’autorisation de %{email} ?"
+        edit_dossier:
+          zero: "Aucun invité peut modifier ce dossier"
+          one: "1 invité peut modifier ce dossier"
+          other: "%{count} invités peuvent modifier ce dossier"
         submit_dossier_yourself: "Une fois le dossier complet, vous devez le déposer vous-même."
     pagination:
       next: Suivant