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

Merge pull request #10680 from demarches-simplifiees/a11y-fix-demarche-header

Browse source 
Refonte du menu d'aide
This commit is contained in:
Colin Darie 2024-09-09 14:17:50 +00:00 committed by GitHub
commit ab3139c2ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 130 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/assets/stylesheets/buttons.scss
View file

@ -243,6 +243,57 @@ ul.dropdown-items {
margin-bottom: 0;
}
// Apply custom styles to DSFR fr-translate component
.fr-translate__btn.fr-btn.help-btn::before {
content: none;
}
.help-content.fr-menu ul.fr-menu__list {
--text-decoration: underline;
text-align: left;
font-size: 1rem;
@media (min-width: 62em) {
font-size: 0.875rem;
padding: 0;
width: 360px;
}
}
.help-content.fr-menu ul.fr-menu__list li {
padding: 0.75rem 1rem;
@media (min-width: 62em) {
padding-right: 1rem;
padding-left: 1rem;
}
}
.help-content.fr-menu ul.fr-menu__list li:not(:last-child) {
@media (min-width: 62em) {
border-bottom: 1px solid $border-grey;
}
}
.help-content.fr-menu ul.fr-menu__list {
h1,
p {
font-size: inherit;
line-height: inherit;
}
dd {
word-break: break-all;
}
}
.help-content a[href]:hover,
.help-content a[href]:active {
@media (hover: hover) and (pointer: fine) {
--text-decoration: none;
}
}
.dropdown-items {
li {
display: flex;

15
app/assets/stylesheets/help_dropdown.scss
View file

@ -7,10 +7,6 @@
}
}
.help-dropdown-title {
font-weight: bold;
}
.dropdown-items li.help-dropdown-service {
cursor: default;
@ -23,14 +19,3 @@
color: $blue-france-500;
}
}
.help-dropdown-service-action {
margin-top: $default-padding;
margin-bottom: $default-spacer;
}
.help-dropdown-service-item {
margin-top: $default-spacer;
line-height: 18px;
}

29
app/views/shared/help/_help_dropdown_dossier.html.haml
View file

@ -1,17 +1,20 @@
= 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')
.fr-translate.fr-nav
.fr-nav__item
%button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
= t('help')
- title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
#help-menu.help-content.fr-collapse.fr-menu
- title = dossier.brouillon? ? t("help_dropdown.help_brouillon_title") : t("help_dropdown.help_filled_dossier")
%ul.fr-menu__list
- if dossier.messagerie_available?
- menu.with_item do
= render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
- if dossier.messagerie_available?
%li.flex
= render partial: 'shared/help/dropdown_items/messagerie_item', locals: { dossier: dossier, title: title }
- elsif dossier.procedure.service.present?
- menu.with_item do
= render partial: 'shared/help/dropdown_items/service_item',
locals: { service: dossier.procedure.service, title: title }
- elsif dossier.procedure.service.present?
%li.flex
= render partial: 'shared/help/dropdown_items/service_item',
locals: { service: dossier.procedure.service, title: title }
- menu.with_item do
= render partial: 'shared/help/dropdown_items/faq_item'
%li.flex
= render partial: 'shared/help/dropdown_items/faq_item'

17
app/views/shared/help/_help_dropdown_instructeur.html.haml
View file

@ -1,8 +1,11 @@
= 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')
.fr-translate.fr-nav
.fr-nav__item
%button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
= t('help')
- menu.with_item do
= render partial: 'shared/help/dropdown_items/faq_item'
- menu.with_item do
= render partial: 'shared/help/dropdown_items/email_item'
#help-menu.help-content.fr-collapse.fr-menu
%ul.fr-menu__list
%li.flex
= render partial: 'shared/help/dropdown_items/faq_item'
%li
= render partial: 'shared/help/dropdown_items/email_item'

19
app/views/shared/help/_help_dropdown_procedure.html.haml
View file

@ -1,9 +1,12 @@
= 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')
.fr-translate.fr-nav
.fr-nav__item
%button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" }
= t('help')
- if procedure.service.present?
- menu.with_item do
= 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'
#help-menu.help-content.fr-collapse.fr-menu
%ul.fr-menu__list
- if procedure.service.present?
%li.flex
= render partial: 'shared/help/dropdown_items/service_item', locals: { service: procedure.service, title: t('help_dropdown.procedure_title') }
%li.flex
= render partial: 'shared/help/dropdown_items/faq_item'

8
app/views/shared/help/dropdown_items/_email_item.html.haml
View file

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

10
app/views/shared/help/dropdown_items/_faq_item.html.haml
View file

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

9
app/views/shared/help/dropdown_items/_messagerie_item.html.haml
View file

@ -1,5 +1,4 @@
= link_to messagerie_dossier_path(dossier), role: 'menuitem' do
%span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.dropdown-description.fr-text--sm
%span.help-dropdown-title= title
%p.fr-text--sm= t('help_dropdown.contact_instructeur')
%span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.fr-pl-1w
%h1= title
= link_to t('help_dropdown.contact_instructeur'), messagerie_dossier_path(dossier)

35
app/views/shared/help/dropdown_items/_service_item.html.haml
View file

@ -1,14 +1,23 @@
%span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" }
.dropdown-description.fr-text--sm
%span.help-dropdown-title= title
.help-dropdown-service-action
%p.fr-text--sm= t('help_dropdown.contact_administration')
%p.fr-text--sm.help-dropdown-service-item
%span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
= link_to service.email, "mailto:#{service.email}", role: 'menuitem'
%p.fr-text--sm
%span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
= link_to service.telephone, service.telephone_url, role: 'menuitem'
%p.fr-text--sm
%span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }
= service.horaires
.fr-pl-1w
%h1= title
%p.fr-mb-1w= t('help_dropdown.contact_administration')
%dl
.flex.fr-mb-1v
%dt.fr-mr-1v
%span.fr-icon-mail-fill.fr-icon--sm{ "aria-hidden": "true" }
%span.visually-hidden= t('layouts.mailers.service_footer.by_email')
%dd
= link_to service.email, "mailto:#{service.email}"
.flex.fr-mb-1v
%dt.fr-mr-1v
%span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" }
%span.visually-hidden= t('layouts.mailers.service_footer.by_phone')
%dd
= link_to service.telephone, service.telephone_url
.flex
%dt.fr-mr-1v
%span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" }
%span.visually-hidden= t('layouts.mailers.service_footer.schedule')
%dd
= service.horaires

3
config/locales/en.yml
View file

@ -34,9 +34,8 @@ en:
sentence_for_humans: 'If you are a human, ignore this field'
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_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}.

1
config/locales/fr.yml
View file

@ -24,7 +24,6 @@ fr:
sentence_for_humans: 'Si vous êtes un humain, laissez ce champ vide'
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.

2
spec/system/accessibilite/wcag_usager_spec.rb
View file

@ -103,7 +103,7 @@ describe 'wcag rules for usager', js: true do
scenario 'commencer page, help dropdown' do
visit commencer_path(path: procedure.reload.path)
page.find("#help-menu_button").click
page.find(".fr-header__body .help-btn").click
test_expect_axe_clean_without_main_navigation
end
end

8
spec/system/help_spec.rb
View file

@ -18,7 +18,7 @@ describe 'Getting help:' do
expect(page).to have_help_menu
end
within('.help-dropdown') do
within('.help-content') do
expect(page).to have_content(procedure.service.email)
expect(page).to have_content(procedure.service.telephone)
expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
@ -51,7 +51,7 @@ describe 'Getting help:' do
expect(page).to have_help_menu
end
within('.help-dropdown') do
within('.help-content') do
expect(page).to have_content(dossier.procedure.service.email)
expect(page).to have_content(dossier.procedure.service.telephone)
expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
@ -69,7 +69,7 @@ describe 'Getting help:' do
expect(page).to have_help_menu
end
within('.help-dropdown') do
within('.help-content') do
expect(page).to have_link(nil, href: messagerie_dossier_path(dossier))
expect(page).to have_link(nil, href: I18n.t("links.common.faq.url"))
end
@ -97,6 +97,6 @@ describe 'Getting help:' do
end
def have_help_menu
have_selector('.help-dropdown')
have_selector("#help-menu")
end
end

4
spec/views/layouts/_header_spec.rb
View file

@ -38,7 +38,7 @@ describe 'layouts/_header', type: :view do
end
it 'displays the Help dropdown menu' do
expect(subject).to have_css(".help-dropdown")
expect(subject).to have_selector("#help-menu")
end
end
end
@ -67,7 +67,7 @@ describe 'layouts/_header', type: :view do
it { is_expected.to have_selector(:button, user.email, class: "account-btn") }
it 'displays the Help dropdown menu' do
expect(subject).to have_css(".help-dropdown")
expect(subject).to have_selector("#help-menu")
end
end
end