From a4a232dda24b0b17be5860ff13b077b73a190d0c Mon Sep 17 00:00:00 2001 From: Martin Date: Tue, 20 Feb 2024 17:27:13 +0100 Subject: [PATCH] a11y(invite): rework invite menu for easier readability by screen reader --- app/views/invites/_form.html.haml | 34 +++++++++++++++++-------------- config/locales/en.yml | 12 ++++++----- config/locales/fr.yml | 13 +++++++----- 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/app/views/invites/_form.html.haml b/app/views/invites/_form.html.haml index 8dded1989..824d1b36b 100644 --- a/app/views/invites/_form.html.haml +++ b/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' diff --git a/config/locales/en.yml b/config/locales/en.yml index 6220ce0a9..7cd3458c5 100644 --- a/config/locales/en.yml +++ b/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. - 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 diff --git a/config/locales/fr.yml b/config/locales/fr.yml index c2114aaa5..8fadb6826 100644 --- a/config/locales/fr.yml +++ b/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. - 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