From e847e9263e22f042861c8279b7645d6b930224e0 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Tue, 30 Jul 2024 12:49:42 +0200 Subject: [PATCH 01/12] Add label to icons carrying information --- .../shared/help/dropdown_items/_service_item.html.haml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml index 208601f51..9ae6e458c 100644 --- a/app/views/shared/help/dropdown_items/_service_item.html.haml +++ b/app/views/shared/help/dropdown_items/_service_item.html.haml @@ -4,11 +4,11 @@ .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" } + %span.fr-icon-mail-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_email') } = link_to service.email, "mailto:#{service.email}", role: 'menuitem' %p.fr-text--sm - %span.fr-icon-phone-fill.fr-icon--sm{ "aria-hidden": "true" } + %span.fr-icon-phone-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_phone') } = link_to service.telephone, service.telephone_url, role: 'menuitem' %p.fr-text--sm - %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" } + %span.fr-icon-time-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.schedule') } = service.horaires From f3bca9bfebaf88af1bf44bf97ea25f20e56cc54e Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Tue, 30 Jul 2024 15:22:52 +0200 Subject: [PATCH 02/12] Replace paragraphs with list --- app/assets/stylesheets/help_dropdown.scss | 6 ----- .../dropdown_items/_service_item.html.haml | 25 ++++++++++++------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss index f20b13a02..ba755a28f 100644 --- a/app/assets/stylesheets/help_dropdown.scss +++ b/app/assets/stylesheets/help_dropdown.scss @@ -24,13 +24,7 @@ } } -.help-dropdown-service-action { - margin-top: $default-padding; - margin-bottom: $default-spacer; -} - .help-dropdown-service-item { margin-top: $default-spacer; line-height: 18px; } - diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml index 9ae6e458c..9f04a22f6 100644 --- a/app/views/shared/help/dropdown_items/_service_item.html.haml +++ b/app/views/shared/help/dropdown_items/_service_item.html.haml @@ -3,12 +3,19 @@ %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-label": t('layouts.mailers.service_footer.by_email') } - = link_to service.email, "mailto:#{service.email}", role: 'menuitem' - %p.fr-text--sm - %span.fr-icon-phone-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_phone') } - = link_to service.telephone, service.telephone_url, role: 'menuitem' - %p.fr-text--sm - %span.fr-icon-time-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.schedule') } - = service.horaires + %dl.fr-text--sm + .flex.fr-mb-1w + %dt.fr-mr-1v + %span.help-dropdown-service-item.fr-icon-mail-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_email') } + %dd + = link_to service.email, "mailto:#{service.email}", role: 'menuitem' + .flex.fr-mb-1w + %dt.fr-mr-1v + %span.fr-icon-phone-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_phone') } + %dd + = link_to service.telephone, service.telephone_url, role: 'menuitem' + .flex.fr-mb-1w + %dt.fr-mr-1v + %span.fr-icon-time-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.schedule') } + %dd + = service.horaires From 87ab67fee51fbd160dd158203d452c3ba27539d6 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Tue, 30 Jul 2024 17:03:29 +0200 Subject: [PATCH 03/12] Replace aria-label with visually-hidden label --- .../shared/help/dropdown_items/_service_item.html.haml | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml index 9f04a22f6..5f2709e9d 100644 --- a/app/views/shared/help/dropdown_items/_service_item.html.haml +++ b/app/views/shared/help/dropdown_items/_service_item.html.haml @@ -6,16 +6,19 @@ %dl.fr-text--sm .flex.fr-mb-1w %dt.fr-mr-1v - %span.help-dropdown-service-item.fr-icon-mail-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_email') } + %span.help-dropdown-service-item.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}", role: 'menuitem' .flex.fr-mb-1w %dt.fr-mr-1v - %span.fr-icon-phone-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.by_phone') } + %span.help-dropdown-service-item.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, role: 'menuitem' .flex.fr-mb-1w %dt.fr-mr-1v - %span.fr-icon-time-fill.fr-icon--sm{ "aria-label": t('layouts.mailers.service_footer.schedule') } + %span.help-dropdown-service-item.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" } + %span.visually-hidden= t('layouts.mailers.service_footer.schedule') %dd = service.horaires From 5501be17c6a2414a8ea71f3d416c14d1de615db9 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 31 Jul 2024 10:22:59 +0200 Subject: [PATCH 04/12] Remove legacy code --- app/assets/stylesheets/help_dropdown.scss | 5 --- .../help/dropdown_items/_email_item.html.haml | 4 +- .../help/dropdown_items/_faq_item.html.haml | 2 +- .../dropdown_items/_messagerie_item.html.haml | 4 +- .../dropdown_items/_service_item.html.haml | 45 +++++++++---------- 5 files changed, 27 insertions(+), 33 deletions(-) diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss index ba755a28f..463c92698 100644 --- a/app/assets/stylesheets/help_dropdown.scss +++ b/app/assets/stylesheets/help_dropdown.scss @@ -23,8 +23,3 @@ color: $blue-france-500; } } - -.help-dropdown-service-item { - margin-top: $default-spacer; - line-height: 18px; -} diff --git a/app/views/shared/help/dropdown_items/_email_item.html.haml b/app/views/shared/help/dropdown_items/_email_item.html.haml index dae504d16..4fd296e75 100644 --- a/app/views/shared/help/dropdown_items/_email_item.html.haml +++ b/app/views/shared/help/dropdown_items/_email_item.html.haml @@ -1,5 +1,5 @@ = mail_to CONTACT_EMAIL, 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= t('help_dropdown.technical_contact_title') + .fr-pl-1w + %h1.fr-text--sm= t('help_dropdown.technical_contact_title') %p.fr-text--sm= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL) diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml index e4a4e60ef..dba62710f 100644 --- a/app/views/shared/help/dropdown_items/_faq_item.html.haml +++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml @@ -1,6 +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.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } - .dropdown-description.fr-text--sm + .fr-pl-1w.fr-text--sm %span.help-dropdown-title = t('help_dropdown.problem_title') %p.fr-text--sm= t('help_dropdown.problem_description') diff --git a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml index 0316831bc..862b92ae7 100644 --- a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml +++ b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml @@ -1,5 +1,5 @@ = 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 + .fr-pl-1w + %h1.fr-text--sm= title %p.fr-text--sm= t('help_dropdown.contact_instructeur') diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml index 5f2709e9d..74260c23b 100644 --- a/app/views/shared/help/dropdown_items/_service_item.html.haml +++ b/app/views/shared/help/dropdown_items/_service_item.html.haml @@ -1,24 +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') - %dl.fr-text--sm - .flex.fr-mb-1w - %dt.fr-mr-1v - %span.help-dropdown-service-item.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}", role: 'menuitem' - .flex.fr-mb-1w - %dt.fr-mr-1v - %span.help-dropdown-service-item.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, role: 'menuitem' - .flex.fr-mb-1w - %dt.fr-mr-1v - %span.help-dropdown-service-item.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" } - %span.visually-hidden= t('layouts.mailers.service_footer.schedule') - %dd - = service.horaires +.fr-pl-1w + %h1.fr-text--sm= title + %p.fr-mt-2w.fr-mb-1w.fr-text--sm= t('help_dropdown.contact_administration') + %dl.fr-text--sm + .flex.fr-mb-1w + %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}", role: 'menuitem' + .flex.fr-mb-1w + %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, role: 'menuitem' + .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 From 70908483a1566d91ba3bbb1321470095a9b8228a Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 31 Jul 2024 10:52:58 +0200 Subject: [PATCH 05/12] Include link content in title attribute --- config/locales/en.yml | 4 ++-- config/locales/fr.yml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/config/locales/en.yml b/config/locales/en.yml index e97328dee..fd58c6d50 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -34,9 +34,9 @@ en: sentence_for_humans: 'If you are a human, ignore this field' help: 'Help' help_dropdown: - general_title: "Online help" + general_title: "A problem with the website? Find your answer in the 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}. diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 71dfd008a..8a81603a7 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -24,7 +24,7 @@ fr: sentence_for_humans: 'Si vous êtes un humain, laissez ce champ vide' help: 'Aide' help_dropdown: - general_title: "Aide en ligne" + general_title: "Un problème avec le site ? Trouvez votre réponse dans l’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. From 399f0200473cccf54c8e85491d7df304a4af258a Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 31 Jul 2024 11:06:13 +0200 Subject: [PATCH 06/12] Replace span with h1 --- app/assets/stylesheets/help_dropdown.scss | 4 ---- app/views/shared/help/dropdown_items/_faq_item.html.haml | 5 ++--- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/help_dropdown.scss b/app/assets/stylesheets/help_dropdown.scss index 463c92698..7246675b4 100644 --- a/app/assets/stylesheets/help_dropdown.scss +++ b/app/assets/stylesheets/help_dropdown.scss @@ -7,10 +7,6 @@ } } -.help-dropdown-title { - font-weight: bold; -} - .dropdown-items li.help-dropdown-service { cursor: default; diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml index dba62710f..73af7afb9 100644 --- a/app/views/shared/help/dropdown_items/_faq_item.html.haml +++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml @@ -1,6 +1,5 @@ = 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" } - .fr-pl-1w.fr-text--sm - %span.help-dropdown-title - = t('help_dropdown.problem_title') + .fr-pl-1w + %h1.fr-text--sm= t('help_dropdown.problem_title') %p.fr-text--sm= t('help_dropdown.problem_description') From 33eece94fd51ef9be6c28b985d42279b19317768 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Mon, 5 Aug 2024 12:06:27 +0200 Subject: [PATCH 07/12] Change help menu design pattern (user pages) --- app/assets/stylesheets/buttons.scss | 38 +++++++++++++++++++ .../help/_help_dropdown_dossier.html.haml | 29 +++++++------- .../help/dropdown_items/_faq_item.html.haml | 6 +-- .../dropdown_items/_messagerie_item.html.haml | 6 +-- .../dropdown_items/_service_item.html.haml | 14 +++---- 5 files changed, 67 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index edaf01c16..27580dce0 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -243,6 +243,44 @@ 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-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; + } +} + .dropdown-items { li { display: flex; diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml index f14542c8a..b865f6843 100644 --- a/app/views/shared/help/_help_dropdown_dossier.html.haml +++ b/app/views/shared/help/_help_dropdown_dossier.html.haml @@ -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 + = render partial: 'shared/help/dropdown_items/faq_item' diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml index 73af7afb9..1c4f0b3b6 100644 --- a/app/views/shared/help/dropdown_items/_faq_item.html.haml +++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml @@ -1,5 +1,5 @@ -= link_to t("links.common.faq.url"), title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes, role: 'menuitem' do += link_to t("links.common.faq.url"), class: 'flex', title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do %span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } .fr-pl-1w - %h1.fr-text--sm= t('help_dropdown.problem_title') - %p.fr-text--sm= t('help_dropdown.problem_description') + %h1= t('help_dropdown.problem_title') + %p= t('help_dropdown.problem_description') diff --git a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml index 862b92ae7..cec0aef68 100644 --- a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml +++ b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml @@ -1,5 +1,5 @@ -= link_to messagerie_dossier_path(dossier), role: 'menuitem' do += link_to messagerie_dossier_path(dossier), class: 'flex' do %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } .fr-pl-1w - %h1.fr-text--sm= title - %p.fr-text--sm= t('help_dropdown.contact_instructeur') + %h1= title + %p= t('help_dropdown.contact_instructeur') diff --git a/app/views/shared/help/dropdown_items/_service_item.html.haml b/app/views/shared/help/dropdown_items/_service_item.html.haml index 74260c23b..4774799a2 100644 --- a/app/views/shared/help/dropdown_items/_service_item.html.haml +++ b/app/views/shared/help/dropdown_items/_service_item.html.haml @@ -1,20 +1,20 @@ %span.fr-icon-user-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } .fr-pl-1w - %h1.fr-text--sm= title - %p.fr-mt-2w.fr-mb-1w.fr-text--sm= t('help_dropdown.contact_administration') - %dl.fr-text--sm - .flex.fr-mb-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}", role: 'menuitem' - .flex.fr-mb-1w + = 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, role: 'menuitem' + = link_to service.telephone, service.telephone_url .flex %dt.fr-mr-1v %span.fr-icon-time-fill.fr-icon--sm{ "aria-hidden": "true" } From bc95b5b3231f68c78c6d559330fe32f47e3a74cf Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Mon, 5 Aug 2024 14:06:51 +0200 Subject: [PATCH 08/12] Change help menu design pattern (instructor pages) --- .../help/_help_dropdown_instructeur.html.haml | 17 ++++++++++------- .../help/dropdown_items/_email_item.html.haml | 6 +++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/app/views/shared/help/_help_dropdown_instructeur.html.haml b/app/views/shared/help/_help_dropdown_instructeur.html.haml index 329b80e50..9ebae16df 100644 --- a/app/views/shared/help/_help_dropdown_instructeur.html.haml +++ b/app/views/shared/help/_help_dropdown_instructeur.html.haml @@ -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' diff --git a/app/views/shared/help/dropdown_items/_email_item.html.haml b/app/views/shared/help/dropdown_items/_email_item.html.haml index 4fd296e75..029ffa4ed 100644 --- a/app/views/shared/help/dropdown_items/_email_item.html.haml +++ b/app/views/shared/help/dropdown_items/_email_item.html.haml @@ -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" } .fr-pl-1w - %h1.fr-text--sm= t('help_dropdown.technical_contact_title') - %p.fr-text--sm= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL) + %h1= t('help_dropdown.technical_contact_title') + %p= t('help_dropdown.technical_contact_description', contact_email: CONTACT_EMAIL) From bbfcb689d390e83f657e98075429d7caad84a824 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Mon, 5 Aug 2024 14:23:16 +0200 Subject: [PATCH 09/12] Change help menu design pattern (offline pages) --- .../help/_help_dropdown_procedure.html.haml | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/app/views/shared/help/_help_dropdown_procedure.html.haml b/app/views/shared/help/_help_dropdown_procedure.html.haml index dc4ddc14e..655b90b39 100644 --- a/app/views/shared/help/_help_dropdown_procedure.html.haml +++ b/app/views/shared/help/_help_dropdown_procedure.html.haml @@ -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' From 4e1332431b549c293628c64526453c8e484a6a85 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Mon, 5 Aug 2024 15:37:00 +0200 Subject: [PATCH 10/12] Update sepc files --- spec/system/accessibilite/wcag_usager_spec.rb | 2 +- spec/system/help_spec.rb | 8 ++++---- spec/views/layouts/_header_spec.rb | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/spec/system/accessibilite/wcag_usager_spec.rb b/spec/system/accessibilite/wcag_usager_spec.rb index 16e6b23c2..3f1c1b0bf 100644 --- a/spec/system/accessibilite/wcag_usager_spec.rb +++ b/spec/system/accessibilite/wcag_usager_spec.rb @@ -101,7 +101,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 diff --git a/spec/system/help_spec.rb b/spec/system/help_spec.rb index 26e58e02e..8c845da6f 100644 --- a/spec/system/help_spec.rb +++ b/spec/system/help_spec.rb @@ -16,7 +16,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")) @@ -49,7 +49,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")) @@ -67,7 +67,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 @@ -95,6 +95,6 @@ describe 'Getting help:' do end def have_help_menu - have_selector('.help-dropdown') + have_selector("#help-menu") end end diff --git a/spec/views/layouts/_header_spec.rb b/spec/views/layouts/_header_spec.rb index afe770f67..48bb0c4b1 100644 --- a/spec/views/layouts/_header_spec.rb +++ b/spec/views/layouts/_header_spec.rb @@ -36,7 +36,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 @@ -65,7 +65,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 From e358f196e92d796877c0b24c7d841c68b22db264 Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Mon, 5 Aug 2024 15:41:08 +0200 Subject: [PATCH 11/12] Change help__content to help-content to conform linting Regex --- app/assets/stylesheets/buttons.scss | 11 ++++++----- .../shared/help/_help_dropdown_dossier.html.haml | 2 +- .../shared/help/_help_dropdown_instructeur.html.haml | 2 +- .../shared/help/_help_dropdown_procedure.html.haml | 2 +- spec/system/help_spec.rb | 6 +++--- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index 27580dce0..a09e46812 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -248,7 +248,7 @@ ul.dropdown-items { content: none; } -.help__content.fr-menu ul.fr-menu__list { +.help-content.fr-menu ul.fr-menu__list { text-align: left; font-size: 1rem; @@ -259,7 +259,7 @@ ul.dropdown-items { } } -.help__content.fr-menu ul.fr-menu__list li { +.help-content.fr-menu ul.fr-menu__list li { padding: 0.75rem 1rem; @media (min-width: 62em) { @@ -268,14 +268,15 @@ ul.dropdown-items { } } -.help__content.fr-menu ul.fr-menu__list li:not(:last-child) { +.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 { +.help-content.fr-menu ul.fr-menu__list { + h1, + p { font-size: inherit; line-height: inherit; } diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml index b865f6843..a5177e82f 100644 --- a/app/views/shared/help/_help_dropdown_dossier.html.haml +++ b/app/views/shared/help/_help_dropdown_dossier.html.haml @@ -3,7 +3,7 @@ %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" } = t('help') - #help-menu.help__content.fr-collapse.fr-menu + #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 diff --git a/app/views/shared/help/_help_dropdown_instructeur.html.haml b/app/views/shared/help/_help_dropdown_instructeur.html.haml index 9ebae16df..62ade998f 100644 --- a/app/views/shared/help/_help_dropdown_instructeur.html.haml +++ b/app/views/shared/help/_help_dropdown_instructeur.html.haml @@ -3,7 +3,7 @@ %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" } = t('help') - #help-menu.help__content.fr-collapse.fr-menu + #help-menu.help-content.fr-collapse.fr-menu %ul.fr-menu__list %li.flex = render partial: 'shared/help/dropdown_items/faq_item' diff --git a/app/views/shared/help/_help_dropdown_procedure.html.haml b/app/views/shared/help/_help_dropdown_procedure.html.haml index 655b90b39..8718d1ea0 100644 --- a/app/views/shared/help/_help_dropdown_procedure.html.haml +++ b/app/views/shared/help/_help_dropdown_procedure.html.haml @@ -3,7 +3,7 @@ %button.help-btn.fr-translate__btn.fr-btn{ "aria-controls" => "help-menu", "aria-expanded" => "false" } = t('help') - #help-menu.help__content.fr-collapse.fr-menu + #help-menu.help-content.fr-collapse.fr-menu %ul.fr-menu__list - if procedure.service.present? %li.flex diff --git a/spec/system/help_spec.rb b/spec/system/help_spec.rb index 8c845da6f..1fd7f86bc 100644 --- a/spec/system/help_spec.rb +++ b/spec/system/help_spec.rb @@ -16,7 +16,7 @@ describe 'Getting help:' do expect(page).to have_help_menu end - within('.help__content') 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")) @@ -49,7 +49,7 @@ describe 'Getting help:' do expect(page).to have_help_menu end - within('.help__content') 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")) @@ -67,7 +67,7 @@ describe 'Getting help:' do expect(page).to have_help_menu end - within('.help__content') 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 From 9e87662c8f95d6ad5e739e62141f5fe327363c2c Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Thu, 8 Aug 2024 11:23:56 +0200 Subject: [PATCH 12/12] Distinguish links from content --- app/assets/stylesheets/buttons.scss | 12 ++++++++++++ .../shared/help/_help_dropdown_dossier.html.haml | 2 +- .../shared/help/dropdown_items/_faq_item.html.haml | 9 ++++----- .../help/dropdown_items/_messagerie_item.html.haml | 9 ++++----- config/locales/en.yml | 1 - config/locales/fr.yml | 1 - 6 files changed, 21 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss index a09e46812..59317a60c 100644 --- a/app/assets/stylesheets/buttons.scss +++ b/app/assets/stylesheets/buttons.scss @@ -249,6 +249,7 @@ ul.dropdown-items { } .help-content.fr-menu ul.fr-menu__list { + --text-decoration: underline; text-align: left; font-size: 1rem; @@ -280,6 +281,17 @@ ul.dropdown-items { 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 { diff --git a/app/views/shared/help/_help_dropdown_dossier.html.haml b/app/views/shared/help/_help_dropdown_dossier.html.haml index a5177e82f..acf2d247a 100644 --- a/app/views/shared/help/_help_dropdown_dossier.html.haml +++ b/app/views/shared/help/_help_dropdown_dossier.html.haml @@ -16,5 +16,5 @@ = render partial: 'shared/help/dropdown_items/service_item', locals: { service: dossier.procedure.service, title: title } - %li + %li.flex = render partial: 'shared/help/dropdown_items/faq_item' diff --git a/app/views/shared/help/dropdown_items/_faq_item.html.haml b/app/views/shared/help/dropdown_items/_faq_item.html.haml index 1c4f0b3b6..264d303e4 100644 --- a/app/views/shared/help/dropdown_items/_faq_item.html.haml +++ b/app/views/shared/help/dropdown_items/_faq_item.html.haml @@ -1,5 +1,4 @@ -= link_to t("links.common.faq.url"), class: 'flex', title: new_tab_suffix(t('help_dropdown.general_title')), **external_link_attributes do - %span.fr-icon-question-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } - .fr-pl-1w - %h1= t('help_dropdown.problem_title') - %p= 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 diff --git a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml index cec0aef68..d0684ffee 100644 --- a/app/views/shared/help/dropdown_items/_messagerie_item.html.haml +++ b/app/views/shared/help/dropdown_items/_messagerie_item.html.haml @@ -1,5 +1,4 @@ -= link_to messagerie_dossier_path(dossier), class: 'flex' do - %span.fr-icon-mail-fill.fr-text-action-high--blue-france{ "aria-hidden": "true" } - .fr-pl-1w - %h1= title - %p= 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) diff --git a/config/locales/en.yml b/config/locales/en.yml index fd58c6d50..008719000 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -34,7 +34,6 @@ en: sentence_for_humans: 'If you are a human, ignore this field' help: 'Help' help_dropdown: - general_title: "A problem with the website? Find your answer in the 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. diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 8a81603a7..4cbb3459b 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -24,7 +24,6 @@ fr: sentence_for_humans: 'Si vous êtes un humain, laissez ce champ vide' help: 'Aide' help_dropdown: - general_title: "Un problème avec le site ? Trouvez votre réponse dans l’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.