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

add aria-disclosure for Mon compte button

Browse source
This commit is contained in:
Christophe Robillard 2020-09-08 18:32:06 +02:00
parent 434499a31f
commit 51c4001a1a
3 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/new_design/new_header.scss
View file

@ -192,9 +192,6 @@ $header-mobile-breakpoint: 550px;
background: none; background: none;
} }
&::after {
display: none;
}
} }
.header-menu { .header-menu {

13
app/javascript/new_design/dropdown.js
View file

@ -2,16 +2,21 @@ import { delegate } from '@utils';
delegate('click', 'body', (event) => { delegate('click', 'body', (event) => {
if (!event.target.closest('.dropdown')) { if (!event.target.closest('.dropdown')) {
[...document.querySelectorAll('.dropdown')].forEach((element) => [...document.querySelectorAll('.dropdown')].forEach((element) => {
element.classList.remove('open', 'fade-in-down') const button = element.querySelector('.dropdown-button');
); button.setAttribute('aria-expanded', false);
element.classList.remove('open', 'fade-in-down');
});
} }
}); });
delegate('click', '.dropdown-button', (event) => { delegate('click', '.dropdown-button', (event) => {
event.stopPropagation(); 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')) { if (parent.classList.contains('dropdown')) {
parent.classList.toggle('open'); parent.classList.toggle('open');
var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !buttonExpanded);
} }
}); });

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

@ -1,8 +1,8 @@
.dropdown.header-menu-opener .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 .hidden Mon compte
= image_tag "icons/account-circle.svg", alt: '' = image_tag "icons/account-circle.svg", alt: ''
%ul.header-menu.dropdown-content %ul.header-menu.dropdown-content#mon_compte_menu
%li %li
.menu-item{ title: current_email } .menu-item{ title: current_email }
= current_email = current_email