a11y(invite): rework invite menu for easier readability by screen reader

app/views/invites/_form.html.haml

@@ -1,29 +1,33 @@
 #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
+  = form_tag dossier_invites_path(dossier), data: { turbo: true, turbo_force: :server }, method: :post, aria: { labelledby: 'invite-form-legend' } do
-    %p= t('views.invites.form.invite_to_edit_line1')
+    %fieldset.fr-fieldset
-    %p= t('views.invites.form.invite_to_edit_line2')
+      %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-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-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"

config/locales/en.yml

@@ -321,15 +321,17 @@ en:
         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.
+        modal_title: Invite someone
-        invite_to_edit_line2: This person will have the right to edit your file.
+        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?"
+        want_to_withdraw_permission: "Would you like to withdraw the permission of %{email}?"
-        edit_dossier: "These people can edit this file."
+        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

@@ -317,16 +317,19 @@ fr:
         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.
+        modal_title: "Gestion des invités"
-        invite_to_edit_line2: Cette personne aura le droit de modifier votre dossier.
+        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 ?"
+        want_to_withdraw_permission: "Souhaitez-vous supprimer l’autorisation de %{email} ?"
-        edit_dossier: "Ces personnes peuvent modifier ce dossier."
+        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