From 7a26f7ec15596a90c6a1a7d8dbe52cebe6c0fd22 Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Thu, 28 Jul 2022 16:27:22 +0200
Subject: [PATCH] a11y on main menu
---
assets/js/theme/nav/mainMenu.js | 13 ++++++++++---
assets/sass/_theme/design-system/nav.sass | 4 ++--
2 files changed, 12 insertions(+), 5 deletions(-)
diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 61f3badc..a43851bd 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -47,9 +47,16 @@ class MainMenu {
document.documentElement.classList.toggle(CLASSES.menusOpened);
}
- toggleDropdown (button) {
- const isExpanded = button.getAttribute('aria-expanded') === 'true';
- button.setAttribute('aria-expanded', !isExpanded);
+ toggleDropdown (clickedButton) {
+ const isExpanded = clickedButton.getAttribute('aria-expanded') === 'true';
+ // Close all dropdowns except selected
+ this.dropdownsButtons.forEach(button => {
+ if (clickedButton === button) {
+ clickedButton.setAttribute('aria-expanded', !isExpanded);
+ } else {
+ button.setAttribute('aria-expanded', 'false');
+ }
+ });
}
onScroll () {
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index 6d38a562..ce2ac2ae 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -46,8 +46,8 @@
display: block
&:last-child a
padding-right: 0
- li.has-children:hover
- .dropdown-menu
+ li.has-children
+ a[aria-expanded="true"] + .dropdown-menu
display: block
.nav-level-2
--
GitLab