diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss index 597bfd52e..f3613af3f 100644 --- a/app/assets/stylesheets/new_design/new_header.scss +++ b/app/assets/stylesheets/new_design/new_header.scss @@ -192,9 +192,6 @@ $header-mobile-breakpoint: 550px; background: none; } - &::after { - display: none; - } } .header-menu { diff --git a/app/javascript/new_design/dropdown.js b/app/javascript/new_design/dropdown.js index 1614c08d3..c92a8f896 100644 --- a/app/javascript/new_design/dropdown.js +++ b/app/javascript/new_design/dropdown.js @@ -2,16 +2,21 @@ import { delegate } from '@utils'; delegate('click', 'body', (event) => { if (!event.target.closest('.dropdown')) { - [...document.querySelectorAll('.dropdown')].forEach((element) => - element.classList.remove('open', 'fade-in-down') - ); + [...document.querySelectorAll('.dropdown')].forEach((element) => { + const button = element.querySelector('.dropdown-button'); + button.setAttribute('aria-expanded', false); + element.classList.remove('open', 'fade-in-down'); + }); } }); delegate('click', '.dropdown-button', (event) => { event.stopPropagation(); - const parent = event.target.closest('.dropdown-button').parentElement; + const button = event.target.closest('.dropdown-button'); + const parent = button.parentElement; if (parent.classList.contains('dropdown')) { parent.classList.toggle('open'); + var buttonExpanded = button.getAttribute('aria-expanded') === 'true'; + button.setAttribute('aria-expanded', !buttonExpanded); } }); diff --git a/app/views/layouts/_account_dropdown.haml b/app/views/layouts/_account_dropdown.haml index 892a44e0e..4a26dad47 100644 --- a/app/views/layouts/_account_dropdown.haml +++ b/app/views/layouts/_account_dropdown.haml @@ -1,8 +1,8 @@ .dropdown.header-menu-opener - %button.button.dropdown-button.header-menu-button{ title: "Mon compte" } + %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", 'aria-expanded' => 'false', 'aria-controls' => 'mon_compte_menu' } .hidden Mon compte = image_tag "icons/account-circle.svg", alt: '' - %ul.header-menu.dropdown-content + %ul.header-menu.dropdown-content#mon_compte_menu %li .menu-item{ title: current_email } = current_email