Merge pull request #8160 from colinux/fix-a11y-locale-dropdown

fix(locale-switcher): attributes & wording issues

app/assets/stylesheets/dsfr.scss

@@ -43,3 +43,9 @@ fieldset {
   padding-left: 0;
   padding-bottom: 0;
 }
+
+.fr-btn.fr-btn--icon-left[target="_blank"] {
+  &::after {
+    display: none;
+  }
+}

app/helpers/application_helper.rb

@@ -5,6 +5,18 @@ module ApplicationHelper
     I18n.locale.to_s
   end
 
+  def active_locale_link(locale)
+    link_to save_locale_path(locale:), {
+      method: :post,
+      class: "fr-translate__language fr-nav__link",
+      hreflang: locale,
+      lang: locale,
+      "aria-current": I18n.locale == locale ? "true" : nil
+    }.compact do
+      yield
+    end
+  end
+
   def sanitize_url(url)
     if !url.nil?
       super(url, schemes: ['http', 'https'], replace_evil_with: root_url)

app/views/layouts/_header.haml

@@ -50,7 +50,8 @@
                 - elsif nav_bar_profile == :instructeur
                   = render partial: 'shared/help/help_dropdown_instructeur'
                 - else
-                  = render partial: 'shared/help/help_button'
+                  // NB: on mobile in order to have links correctly aligned, we need a left icon
+                  = link_to t('help'), FAQ_URL, class: 'fr-btn fr-icon-questionnaire-line fr-btn--icon-left', title: new_tab_suffix(t('help')), **external_link_attributes
 
 
 

app/views/layouts/_locale_dropdown.html.haml

@@ -1,14 +1,13 @@
 %nav.fr-translate.fr-nav{ :role => "navigation", title: t('.select_locale') }
   .fr-nav__item
     %button.fr-translate__btn.fr-btn{ "aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale') }
-      = t(".#{I18n.locale}")
-      %span.fr-hidden-lg= t('.francais')
+      = I18n.locale.upcase
+      %span.fr-hidden-lg= " - #{t('.locale_name')}"
     #translate.fr-collapse.fr-menu
       %ul.fr-menu__list
         %li
-          = active_link_to save_locale_path(locale: :fr), method: :post, class: "fr-translate__language fr-nav__link", active: I18n.locale == :fr, hreflang: "fr", lang: "fr" do
-            = t('.fr_francais')
+          = active_locale_link(:fr) do
+            FR - Français
         %li
-          = active_link_to save_locale_path(locale: :en), method: :post, class: "fr-translate__language   fr-nav__link", active: I18n.locale == :en, hreflang: "en", lang: "en" do
-            = t('.en_english')
-
+          = active_locale_link(:en) do
+            EN - English

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

@@ -1 +0,0 @@
-= link_to t('help'), FAQ_URL, class: 'fr-btn', title: new_tab_suffix(t('help')), **external_link_attributes

config/locales/en.yml

@@ -69,18 +69,13 @@ en:
         are_you_new: First time on %{app_name}?
     my_account: My account
     header:
-      close_modal: 'Fermer'
+      close_modal: 'Close'
       back: "Back"
       back_title: "Revenir sur le site de mon administration"
       main_menu: "Main menu"
     locale_dropdown:
-      languages: "Languages"
       select_locale: "Choose a language"
-      fr: FR
-      en: EN
-      francais: " - French"
-      fr_francais:  FR - French
-      en_english: EN - English
+      locale_name: "English"
     notifications:
       actions:
         access: View your File

config/locales/fr.yml

@@ -64,13 +64,8 @@ fr:
       back_title: "Revenir sur le site de mon administration"
       main_menu: "Menu principal"
     locale_dropdown:
-      languages: "Langues"
       select_locale: "Sélectionner une langue"
-      fr: FR
-      en: EN
-      francais: " - Français"
-      fr_francais:  FR - Français
-      en_english: EN - Anglais
+      locale_name: "Français"
     notifications:
       actions:
         access: Consulter mon dossier