diff --git a/static/js/modules/sidebar.js b/static/js/modules/sidebar.js index 5546ba9..45a1b6a 100644 --- a/static/js/modules/sidebar.js +++ b/static/js/modules/sidebar.js @@ -15,5 +15,20 @@ export function initSidebar() { sidebarSubnav.classList.toggle('is-sr-only'); sidebarMore.classList.toggle('is-hidden'); sidebarLess.classList.toggle('is-hidden'); + + // The following is for aria keyboard navigation. We don't want + // assistive technologies to tab into a hidden sub-menu. Setting + // both aria-expanded and display=block/hidden gives us the + // correct behavior. Tabbing skips closed menu items but works + // on open ones. Part of the general accessibility card at + // https://trello.com/c/CEQ5jAe1 + var subnavIsOpen = sidebarMore.classList.contains("is-hidden") + if (subnavIsOpen) { + sidebarToggle.setAttribute("aria-expanded", "true") + sidebarSubnav.style.display = "block" + } else { + sidebarToggle.setAttribute("aria-expanded", "false") + sidebarSubnav.style.display = "none" + } }); } diff --git a/views/shared/_side_nav.html b/views/shared/_side_nav.html index c3e4ac1..7df3de1 100644 --- a/views/shared/_side_nav.html +++ b/views/shared/_side_nav.html @@ -30,15 +30,14 @@