FEATURE Improve submenu handling and accessibility in header navigation
This commit is contained in:
parent
0966e97b6c
commit
ae5bb850de
|
|
@ -5,7 +5,12 @@ export default function menuInit() {
|
|||
const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
|
||||
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
|
||||
|
||||
console.log(submenuToggles);
|
||||
function closeSubmenus(e) {
|
||||
submenuToggles.forEach((button) => {
|
||||
button.setAttribute('aria-expanded', false);
|
||||
button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
|
||||
});
|
||||
}
|
||||
|
||||
// #### Open/close burger nav
|
||||
// burgerMenuToggle.addEventListener('click', function (e) {
|
||||
|
|
@ -41,9 +46,18 @@ export default function menuInit() {
|
|||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener('click', function (e) {
|
||||
let isExpanded = button.getAttribute('aria-expanded') === 'true';
|
||||
button.setAttribute('aria-expanded', !isExpanded);
|
||||
|
||||
button.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
|
||||
closeSubmenus(e);
|
||||
if (!isExpanded) {
|
||||
button.setAttribute('aria-expanded', true);
|
||||
button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeSubmenus(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user