DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Correction de la structure de navigation
This commit is contained in:
mfo 2024-06-20 13:25:54 +00:00 committed by GitHub
commit cbe8d92f81
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 74 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/dossiers/user_filter_component/user_filter_component.html.haml
View file

@ -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')

2
app/components/main_navigation/instructeur_expert_navigation_component/instructeur_expert_navigation_component.html.haml
View file

@ -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

2
app/views/administrateurs/_main_navigation.html.haml
View file

@ -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

2
app/views/gestionnaires/groupe_gestionnaires/_main_navigation.html.haml
View file

@ -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

2
app/views/layouts/_account_dropdown.haml
View file

@ -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

125
app/views/layouts/_header.haml
View file

@ -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
.fr-container
.fr-header__body-row
.fr-header__brand.fr-enlarge-link
.fr-header__brand-top
.fr-header__logo
%p.fr-logo{ lang: "fr" }
République
= succeed "Française" do
%br/
.fr-header__navbar
- if is_search_enabled
%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')
%button#navbar-burger-button.fr-btn--menu.fr-btn{ "aria-controls" => "modal-header__menu", "data-fr-opened" => "false", title: "Menu" } Menu
.fr-header__service
- root_profile_link, root_profile_libelle = root_path_info_for_profile(nav_bar_profile)
%nav{ :role => "navigation", "aria-label" => t('layouts.header.main_menu') }
.fr-header__body
.fr-container
.fr-header__body-row
.fr-header__brand.fr-enlarge-link
.fr-header__brand-top
.fr-header__logo
%p.fr-logo{ lang: "fr" }
République
= succeed "Française" do
%br/
.fr-header__navbar
- if is_search_enabled
%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')
%button#navbar-burger-button.fr-btn--menu.fr-btn{ "aria-controls" => "modal-header__menu", "data-fr-opened" => "false", title: "Menu" } Menu
.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
%span.fr-header__service-title{ lang: "fr" }= Current.application_name
= link_to root_profile_link, title: "#{root_profile_libelle} — #{Current.application_name}" do
%span.fr-header__service-title{ lang: "fr" }= Current.application_name
.fr-header__tools
.fr-header__tools-links.relative
.fr-header__tools
.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 }
- 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"
- if dossier.present? && nav_bar_profile == :user
= render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
%li
- if dossier.present? && nav_bar_profile == :user
= render partial: 'shared/help/help_dropdown_dossier', locals: { dossier: dossier }
- elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
= render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
- elsif procedure.present? && (nav_bar_profile == :user || nav_bar_profile == :guest)
= render partial: 'shared/help/help_dropdown_procedure', locals: { procedure: procedure }
- elsif nav_bar_profile == :instructeur
= render partial: 'shared/help/help_dropdown_instructeur'
- 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')
- elsif nav_bar_profile == :instructeur
= render partial: 'shared/help/help_dropdown_instructeur'
- 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'
- if localization_enabled?
%li= render partial: 'layouts/locale_dropdown'
- if localization_enabled?
%li= render partial: 'layouts/locale_dropdown'
- if params[:controller] == 'recherche'
= render partial: 'layouts/search_dossiers_form'
- if params[:controller] == 'recherche'
= render partial: 'layouts/search_dossiers_form'
- if is_instructeur_context
= render partial: 'layouts/search_dossiers_form'
- if is_instructeur_context
= render partial: 'layouts/search_dossiers_form'
- if is_expert_context
= render partial: 'layouts/search_dossiers_form'
- if is_expert_context
= 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" }
.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])
.fr-header__menu-links
-# populated by dsfr js
#modal-header__menu.fr-header__menu.fr-modal{ "aria-labelledby": "navbar-burger-button" }
.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])
.fr-header__menu-links
-# populated by dsfr js
- if content_for?(:main_navigation)
= yield(:main_navigation)
- elsif is_administrateur_context
= render 'administrateurs/main_navigation'
- elsif is_instructeur_context || is_expert_context
= render MainNavigation::InstructeurExpertNavigationComponent.new
- elsif is_user_context
= render 'users/main_navigation'
- if content_for?(:main_navigation)
= yield(:main_navigation)
- elsif is_administrateur_context
= render 'administrateurs/main_navigation'
- elsif is_instructeur_context || is_expert_context
= render MainNavigation::InstructeurExpertNavigationComponent.new
- elsif is_user_context
= render 'users/main_navigation'
= yield(:notice_info)
= yield(:notice_info)

2
app/views/layouts/_locale_dropdown.html.haml
View file

@ -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

2
app/views/super_admins/release_notes/_main_navigation.html.haml
View file

@ -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 }

2
app/views/users/_main_navigation.html.haml
View file

@ -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

3
config/locales/views/layouts/_account_dropdown.en.yml
View file

@ -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

3
config/locales/views/layouts/_account_dropdown.fr.yml
View file

@ -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

1
public/500.html
View file

@ -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
>

1
public/502.html
View file

@ -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
>

1
public/503.html
View file

@ -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
>

1
public/504.html
View file

@ -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
>

2
spec/support/system_helpers.rb
View file

@ -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