Merge pull request #10530 from demarches-simplifiees/a11y-fix-nav

Correction de la structure de navigation

app/components/dossiers/user_filter_component/user_filter_component.html.haml

@@ -1,6 +1,6 @@
 .fr-grid-row
   .fr-col-12
-    %nav.fr-translate.fr-nav
+    .fr-translate.fr-nav
       .fr-nav__item.custom-fr-translate-flex-end
         %button.fr-translate__btn.translate-no-icon.fr-btn.fr-btn--tertiary.custom-fr-translate-no-icon{ "aria-controls" => "filters", "aria-expanded" => "false", title: t('.button.select_filters') }
           = t('.button.select_filters')

app/components/main_navigation/instructeur_expert_navigation_component/instructeur_expert_navigation_component.html.haml

@@ -1,4 +1,4 @@
-%nav#header-navigation.fr-nav{ role: :navigation, "aria-label" => t('main_menu', scope: [:layouts, :header]) }
+#header-navigation.fr-nav
   %ul.fr-nav__list
     - if instructeur?
       %li.fr-nav__item

app/views/administrateurs/_main_navigation.html.haml

@@ -1,4 +1,4 @@
-%nav#header-navigation.fr-nav{ role: 'navigation', 'aria-label': 'Menu principal administrateur' }
+#header-navigation.fr-nav
   %ul.fr-nav__list
     %li.fr-nav__item= link_to 'Mes démarches', admin_procedures_path, class:'fr-nav__link', 'aria-current': current_page?(controller: 'administrateurs/procedures', action: :index) ? 'true' : nil
     - if Rails.application.config.ds_zonage_enabled

app/views/gestionnaires/groupe_gestionnaires/_main_navigation.html.haml

@@ -1,4 +1,4 @@
 - content_for(:main_navigation) do
-  %nav#header-navigation.fr-nav{ role: 'navigation', 'aria-label': 'Menu principal gestionnaire' }
+  #header-navigation.fr-nav
     %ul.fr-nav__list
       %li.fr-nav__item= link_to 'Mes groupes gestionnaires', gestionnaire_groupe_gestionnaires_path, class:'fr-nav__link', 'aria-current': current_page?(controller: 'groupe_gestionnaires', action: :index) ? 'page' : nil

app/views/layouts/_account_dropdown.haml

@@ -1,4 +1,4 @@
-%nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) }
+%nav.fr-translate.fr-nav{ role: "navigation", "aria-label"=> t('my_account', scope: [:layouts]) }
   .fr-nav__item
     %button.account-btn.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) }
       %span= current_email

app/views/layouts/_header.haml

@@ -8,83 +8,84 @@
 - is_user_context = nav_bar_profile == :user
 - is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any?
 %header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner", "data-controller": "dsfr-header" }
-  .fr-header__body
+  %nav{ :role => "navigation", "aria-label" => t('layouts.header.main_menu') }
-    .fr-container
+    .fr-header__body
-      .fr-header__body-row
+      .fr-container
-        .fr-header__brand.fr-enlarge-link
+        .fr-header__body-row
-          .fr-header__brand-top
+          .fr-header__brand.fr-enlarge-link
-            .fr-header__logo
+            .fr-header__brand-top
-              %p.fr-logo{ lang: "fr" }
+              .fr-header__logo
-                République
+                %p.fr-logo{ lang: "fr" }
-                = succeed "Française" do
+                  République
-                  %br/
+                  = succeed "Française" do
-            .fr-header__navbar
+                    %br/
-              - if is_search_enabled
+              .fr-header__navbar
-                %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file')
+                - if is_search_enabled
-              %button#navbar-burger-button.fr-btn--menu.fr-btn{ "aria-controls" => "modal-header__menu", "data-fr-opened" => "false", title: "Menu" } Menu
+                  %button.fr-btn--search.fr-btn{ "aria-controls" => "search-modal", "data-fr-opened" => "false", :title => t('views.users.dossiers.search.search_file') }= t('views.users.dossiers.search.search_file')
-          .fr-header__service
+                %button#navbar-burger-button.fr-btn--menu.fr-btn{ "aria-controls" => "modal-header__menu", "data-fr-opened" => "false", title: "Menu" } Menu
-            - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
+            .fr-header__service
+              - root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
 
-            = link_to root_profile_link, title: "#{root_profile_libelle} — #{Current.application_name}" do
+              = link_to root_profile_link, title: "#{root_profile_libelle} — #{Current.application_name}" do
-              %span.fr-header__service-title{ lang: "fr" }= Current.application_name
+                %span.fr-header__service-title{ lang: "fr" }= Current.application_name
 
-        .fr-header__tools
+          .fr-header__tools
-          .fr-header__tools-links.relative
+            .fr-header__tools-links.relative
+
+              %ul.fr-btns-group.flex.align-center
+                - if instructeur_signed_in? || user_signed_in?
+                  %li
+                    = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile, dossier: dossier }
+                - elsif (request.path != new_user_session_path && request.path !=agent_connect_path)
+                  - if request.path == new_user_registration_path
+                    %li.fr-hidden-sm.fr-unhidden-lg.fr-link--sm.fr-mb-2w.fr-mr-1v= t('views.shared.account.already_user_question')
+                  %li= link_to 'Agent', agent_connect_path, class: "fr-btn fr-btn--tertiary fr-icon-government-fill fr-btn--icon-left"
+                  %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn fr-btn--tertiary fr-icon-account-circle-fill fr-btn--icon-left"
 
-            %ul.fr-btns-group.flex.align-center
-              - if instructeur_signed_in? || user_signed_in?
                 %li
-                  = render partial: 'layouts/account_dropdown', locals: { nav_bar_profile: nav_bar_profile, dossier: dossier }
+                  - if dossier.present? && nav_bar_profile == :user
-              - elsif (request.path != new_user_session_path && request.path !=agent_connect_path)
+                    = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
-                - if request.path == new_user_registration_path
-                  %li.fr-hidden-sm.fr-unhidden-lg.fr-link--sm.fr-mb-2w.fr-mr-1v= t('views.shared.account.already_user_question')
-                %li= link_to 'Agent', agent_connect_path, class: "fr-btn fr-btn--tertiary fr-icon-government-fill fr-btn--icon-left"
-                %li= link_to t('views.shared.account.signin'), new_user_session_path, class: "fr-btn fr-btn--tertiary fr-icon-account-circle-fill fr-btn--icon-left"
 
-              %li
+                  - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
-                - if dossier.present? && nav_bar_profile == :user
+                    = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
-                  = render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
 
-                - elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
+                  - elsif nav_bar_profile == :instructeur
-                  = render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
+                    = render partial: 'shared/help/help_dropdown_instructeur'
-
+                  - else
-                - elsif nav_bar_profile == :instructeur
+                    // NB: on mobile in order to have links correctly aligned, we need a left icon
-                  = render partial: 'shared/help/help_dropdown_instructeur'
+                    = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn dropdown-button'
-                - else
-                  // NB: on mobile in order to have links correctly aligned, we need a left icon
-                  = link_to t('help'), t("links.common.faq.url"), class: 'fr-btn dropdown-button', title: t('help')
 
 
 
-              - if localization_enabled?
+                - if localization_enabled?
-                %li= render partial: 'layouts/locale_dropdown'
+                  %li= render partial: 'layouts/locale_dropdown'
 
 
-          - if params[:controller] == 'recherche'
+            - if params[:controller] == 'recherche'
-            = render partial: 'layouts/search_dossiers_form'
+              = render partial: 'layouts/search_dossiers_form'
 
-          - if is_instructeur_context
+            - if is_instructeur_context
-            = render partial: 'layouts/search_dossiers_form'
+              = render partial: 'layouts/search_dossiers_form'
 
-          - if is_expert_context
+            - if is_expert_context
-            = render partial: 'layouts/search_dossiers_form'
+              = render partial: 'layouts/search_dossiers_form'
 
-  = render SwitchDomainBannerComponent.new(user: current_user)
+    = render SwitchDomainBannerComponent.new(user: current_user)
 
-  #modal-header__menu.fr-header__menu.fr-modal{ "aria-labelledby": "navbar-burger-button" }
+    #modal-header__menu.fr-header__menu.fr-modal{ "aria-labelledby": "navbar-burger-button" }
-    .fr-container
+      .fr-container
-      %button.fr-btn--close.fr-btn{ "aria-controls" => "modal-header__menu", title: t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header])
+        %button.fr-btn--close.fr-btn{ "aria-controls" => "modal-header__menu", title: t('close_modal', scope: [:layouts, :header]) }= t('close_modal', scope: [:layouts, :header])
-      .fr-header__menu-links
+        .fr-header__menu-links
-        -# populated by dsfr js
+          -# populated by dsfr js
 
-      - if content_for?(:main_navigation)
+        - if content_for?(:main_navigation)
-        = yield(:main_navigation)
+          = yield(:main_navigation)
-      - elsif is_administrateur_context
+        - elsif is_administrateur_context
-        = render 'administrateurs/main_navigation'
+          = render 'administrateurs/main_navigation'
-      - elsif is_instructeur_context || is_expert_context
+        - elsif is_instructeur_context || is_expert_context
-        = render MainNavigation::InstructeurExpertNavigationComponent.new
+          = render MainNavigation::InstructeurExpertNavigationComponent.new
-      - elsif is_user_context
+        - elsif is_user_context
-        = render 'users/main_navigation'
+          = render 'users/main_navigation'
 
 
-  = yield(:notice_info)
+    = yield(:notice_info)

app/views/layouts/_locale_dropdown.html.haml

@@ -1,4 +1,4 @@
-%nav.fr-translate.fr-nav{ :role => "navigation", title: t('.select_locale') }
+.fr-translate.fr-nav
   .fr-nav__item
     %button.fr-translate__btn.fr-btn{ "aria-controls" => "translate", "aria-expanded" => "false", :title => t('.select_locale') }
       = I18n.locale.upcase

app/views/super_admins/release_notes/_main_navigation.html.haml

@@ -1,5 +1,5 @@
 - content_for(:main_navigation) do
-  %nav.fr-nav#header-navigation{ role: "navigation", aria: { label: 'Menu principal annonces' } }
+  #header-navigation.fr-nav
     %ul.fr-nav__list
       %li.fr-nav__item
         = link_to "Toutes les annonces", super_admins_release_notes_path, class: "fr-nav__link", target: "_self", aria: { current: action == :index ? "page" : nil }

app/views/users/_main_navigation.html.haml

@@ -1,4 +1,4 @@
-%nav#header-navigation.fr-nav{ role: :navigation, "aria-label" => t('main_menu', scope: [:layouts, :header]) }
+#header-navigation.fr-nav
   %ul.fr-nav__list
     - if params[:controller] == 'users/commencer'
       %li.fr-nav__item

config/locales/views/layouts/_account_dropdown.en.yml

@@ -2,7 +2,6 @@ en:
   layouts:
     header:
       files: My files
-    menu_aria_label: 'Menu my profile'
     go_superadmin: "Switch to super-admin"
     go_user: "Switch to user"
     go_instructor: "Switch to instructor"
@@ -11,7 +10,7 @@ en:
     go_gestionnaire: "Switch to admins group manager"
     profile: "See my profile"
     logout: "Log out"
-    my_account: "My account"
+    my_account: "My profile"
     connected_as: "connected as %{profile}"
     instructeur: instructor
     administrateur: admin

config/locales/views/layouts/_account_dropdown.fr.yml

@@ -2,7 +2,6 @@ fr:
   layouts:
     header:
       files: Mes dossiers
-    menu_aria_label: 'Menu mon profil'
     go_superadmin: "Passer en super-admin"
     go_user: "Passer en usager"
     go_instructor: "Passer en instructeur"
@@ -11,7 +10,7 @@ fr:
     go_gestionnaire: "Passer en gestionnaire"
     profile: "Voir mon profil"
     logout: "Se déconnecter"
-    my_account: "Mon compte"
+    my_account: "Mon profil"
     connected_as: "connecté en tant qu’%{profile}"
     instructeur: instructeur
     administrateur: administrateur

public/500.html

@@ -2110,7 +2110,6 @@
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
                       class="fr-btn dropdown-button"
-                      title="Aide"
                       href="/faq"
                       >Aide</a
                     >

public/502.html

@@ -2109,7 +2109,6 @@
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
                       class="fr-btn dropdown-button"
-                      title="Aide"
                       href="/faq"
                       >Aide</a
                     >

public/503.html

@@ -2109,7 +2109,6 @@
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
                       class="fr-btn dropdown-button"
-                      title="Aide
                       href="/faq"
                       >Aide</a
                     >

public/504.html

@@ -2109,7 +2109,6 @@
                     <!-- / NB: on mobile in order to have links correctly aligned, we need a left icon -->
                     <a
                       class="fr-btn dropdown-button"
-                      title="Aide"
                       href="/faq"
                       >Aide</a
                     >

spec/support/system_helpers.rb

@@ -130,7 +130,7 @@ module SystemHelpers
 
   def log_out
     within('.fr-header .fr-container .fr-header__tools .fr-btns-group') do
-      click_button(title: 'Mon compte')
+      click_button(title: 'Mon profil')
       expect(page).to have_selector('#account.fr-collapse--expanded', visible: true)
       click_on 'Se déconnecter'
     end