Merge pull request #8673 from colinux/translate-help-dropdown

Accessibilité: traduit les menus contextuels d'aide, normalise l'affichage et les icônes (dsfr)

app/assets/stylesheets/help_dropdown.scss

@@ -3,16 +3,11 @@
 
 .help-dropdown {
   .dropdown-content {
-    width: 340px;
+    width: 360px;
-  }
-
-  .dropdown-description {
-    font-size: 14px;
   }
 }
 
 .help-dropdown-title {
-  font-size: 16px;
   color: $blue-france-500;
 }
 
@@ -37,15 +32,5 @@
 .help-dropdown-service-item {
   margin-top: $default-spacer;
   line-height: 18px;
-
-  .icon {
-    vertical-align: middle;
-    margin-right: 5px;
-
-    &.clock {
-      filter: contrast(0) brightness(120%);
-      vertical-align: -4px;
-    }
-  }
 }
 

app/components/attachment/edit_component/edit_component.en.yml

@@ -7,6 +7,7 @@ en:
   delete_file: Delete file %{filename}
   replace: Replace
   replace_file: Replace file %{filename}
+  open_file: Open file %{filename}
   errors:
     uploading: "An error occurred while sending the file."
     virus_infected: "Virus detected, please send another file."

app/components/attachment/edit_component/edit_component.fr.yml

@@ -7,6 +7,7 @@ fr:
   delete_file: Supprimer le fichier %{filename}
   replace: Remplacer
   replace_file: Remplacer le fichier %{filename}
+  open_file: Ouvrir le fichier %{filename}
   errors:
     uploading: "Une erreur s’est produite pendant l’envoi du fichier."
     virus_infected: "Virus détecté, merci d’envoyer un autre fichier."

app/components/attachment/edit_component/edit_component.html.haml

@@ -12,7 +12,7 @@
           = render Dsfr::DownloadComponent.new(attachment:)
         - else
           .fr-py-1v
-            %span.attachment-filename.fr-mr-1w= link_to_if(viewable?, attachment.filename.to_s, helpers.url_for(attachment.blob), title: "Ouvrir le fichier #{attachment.filename.to_s}", **helpers.external_link_attributes)
+            %span.attachment-filename.fr-mr-1w= link_to_if(viewable?, attachment.filename.to_s, helpers.url_for(attachment.blob), title: t(".open_file", filename: attachment.filename), **helpers.external_link_attributes)
 
           = render Attachment::ProgressComponent.new(attachment: attachment)
 

app/controllers/application_controller.rb

@@ -337,6 +337,8 @@ class ApplicationController < ActionController::Base
       extract_locale_from_accept_language_header ||
       I18n.default_locale
 
+    gon.locale = locale
+
     I18n.with_locale(locale, &action)
   end
 

app/javascript/shared/track/crisp.ts

@@ -1,11 +1,15 @@
 import { getConfig } from '@utils';
 const {
-  crisp: { key, enabled, administrateur }
+  crisp: { key, enabled, administrateur },
+  locale
 } = getConfig();
 
 declare const window: Window &
   typeof globalThis & {
     CRISP_WEBSITE_ID?: string | null;
+    CRISP_RUNTIME_CONFIG?: {
+      locale: string;
+    };
     $crisp: (
       | [cmd: string, key: string, value: unknown]
       | [key: string, value: unknown]
@@ -15,6 +19,9 @@ declare const window: Window &
 if (enabled) {
   window.$crisp = [];
   window.CRISP_WEBSITE_ID = key;
+  window.CRISP_RUNTIME_CONFIG = {
+    locale: locale
+  };
 
   const script = document.createElement('script');
   const firstScript = document.getElementsByTagName('script')[0];

app/javascript/shared/utils.ts

@@ -16,6 +16,7 @@ const Gon = z
         api_education_url: z.string().optional()
       })
       .default({}),
+    locale: z.string().default('fr'),
     matomo: z
       .object({
         cookieDomain: z.string().optional(),

app/views/layouts/_skiplinks.html.haml

@@ -1,5 +1,5 @@
 .fr-skiplinks
-  %nav.fr-container{ role: "navigation", 'aria-label': "Accès rapide" }
+  %nav.fr-container{ role: "navigation", 'aria-label': t("skiplinks.quick") }
     %ul.fr-skiplinks__list
       %li
-        %a.fr-link{ href: "#contenu" } Contenu
+        %a.fr-link{ href: "#contenu" }= t('skiplinks.content')

app/views/shared/help/_help_dropdown_dossier.html.haml

@@ -1,7 +1,8 @@
 = render Dropdown::MenuComponent.new(wrapper: :span, wrapper_options: { class: ['help-dropdown']}, menu_options: { id: "help-menu" }) do |menu|
   - menu.with_button_inner_html do
     = t('help')
-  - title = dossier.brouillon? ? "Besoin d’aide pour remplir votre dossier ?" : "Une question sur votre dossier ?"
+
+  - title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
 
   - if dossier.messagerie_available?
     - menu.with_item do

app/views/shared/help/_help_dropdown_procedure.html.haml

@@ -4,6 +4,6 @@
 
   - if procedure.service.present?
     - menu.with_item do
-      = render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: "Une question sur cette démarche ?" }
+      = render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: t('help_dropdown.procedure_title') }
   - menu.with_item do
     = render partial: 'shared/help/dropdown_items/faq_item'

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

@@ -1,8 +1,5 @@
-%li{ role: 'none' }
+= mail_to CONTACT_EMAIL, role: 'menuitem' do
-  = mail_to CONTACT_EMAIL, role: 'menuitem' do
+  %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-    %span.icon.mail
+  .dropdown-description.fr-text--sm
-    .dropdown-description
+    %span.help-dropdown-title= t('help_dropdown.technical_contact_title')
-      %span.help-dropdown-title
+    %p.fr-text--sm= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL)
-        = t('help_dropdown.technical_contact_title')
-      %p
-        = t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL)

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

@@ -1,7 +1,6 @@
 = link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do
-  %span.icon.help
+  %span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-  .dropdown-description
+  .dropdown-description.fr-text--sm
     %span.help-dropdown-title
       = t('help_dropdown.problem_title')
-    %p
+    %p.fr-text--sm= t('help_dropdown.problem_description')
-      = t('help_dropdown.problem_description')

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

@@ -1,5 +1,5 @@
 = link_to messagerie_dossier_path(dossier), role: 'menuitem' do
-  %span.icon.mail
+  %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-  .dropdown-description
+  .dropdown-description.fr-text--sm
     %span.help-dropdown-title= title
-    %p Envoyez directement un message à l’instructeur.
+    %p.fr-text--sm= t('help_dropdown.contact_instructeur')

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

@@ -1,14 +1,14 @@
-%span.icon.person
+%span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
-.dropdown-description
+.dropdown-description.fr-text--sm
   %span.help-dropdown-title= title
   .help-dropdown-service-action
-    %p Contactez directement l’administration :
+    %p.fr-text--sm= t('help_dropdown.contact_administration')
-    %p.help-dropdown-service-item
+    %p.fr-text--sm.help-dropdown-service-item
-      %span.icon.small.mail
+      %span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
       = link_to service.email, "mailto:#{service.email}", role: 'menuitem'
-    %p.help-dropdown-service-item
+    %p.fr-text--sm
-      %span.icon.small.phone
+      %span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
       = link_to service.telephone, service.telephone_url, role: 'menuitem'
-    %p.help-dropdown-service-item
+    %p.fr-text--sm
-      %span.icon.small.clock
+      %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }
       = service.horaires

config/locales/en.yml

@@ -35,10 +35,15 @@ en:
   help: 'Help'
   help_dropdown:
     general_title: "Online help"
+    procedure_title: "Do you have a question about this procedure?"
     problem_title: A problem with the website ?
     problem_description: Find your answer in the online help.
     technical_contact_title: Technical contact
     technical_contact_description: Send us a message to %{contact_email}.
+    contact_administration: "Contact the administration directly:"
+    help_brouillon_title: "Need help filling out your file?"
+    help_filled_dossier: "A question about your file?"
+    contact_instructeur: Send a message directly to the instructor.
   utils:
     'yes': Yes
     'no': No
@@ -59,6 +64,9 @@ en:
     commentaire:
       send_message_to_instructeur: "Send a message to the instructor"
       reply_in_mailbox: "Reply in mailbox"
+  skiplinks:
+    quick: Quick access
+    content: Content
   layouts:
     commencer:
       no_procedure:

config/locales/fr.yml

@@ -25,10 +25,15 @@ fr:
   help: 'Aide'
   help_dropdown:
     general_title: "Aide en ligne"
+    procedure_title: "Une question sur cette démarche ?"
     problem_title: Un problème avec le site ?
     problem_description: Trouvez votre réponse dans l’aide en ligne.
     technical_contact_title: Contact technique
     technical_contact_description: Envoyez nous un message à %{contact_email}.
+    contact_administration: "Contactez directement l’administration :"
+    help_brouillon_title: "Besoin d’aide pour remplir votre dossier ?"
+    help_filled_dossier: "Une question sur votre dossier ?"
+    contact_instructeur: Envoyez directement un message à l’instructeur.
   utils:
     'yes': Oui
     'no': Non
@@ -50,6 +55,9 @@ fr:
     commentaire:
       send_message_to_instructeur: "Envoyer un message à l’instructeur"
       reply_in_mailbox: "Répondre dans la messagerie"
+  skiplinks:
+    quick: Accès rapide
+    content: Contenu
   layouts:
     commencer:
       no_procedure: