FEATURE Improve submenu handling and accessibility in header navigation

This commit is contained in:
Antoine M 2026-01-30 10:16:45 +01:00
parent 0966e97b6c
commit ae5bb850de

View File

@ -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);
}
});
}