Merge pull request #714 from maykinmedia/fix/1611-A11y-4.1.2-A-aria-e…

…xpanded-mobile-menus ♿ [#1611] Improving robust mobile menus with aria-expanded
maykinmedia · Jul 25, 2023 · 9a0b806 · 9a0b806
2 parents 614065a + eeb774d
commit 9a0b806
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 7 deletions.
diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -8,6 +8,7 @@
         aria-label="{% firstof title text %}"
         {% if href|startswith:"http" %}target="_blank"{% endif %}
         {% as_attributes extra_attributes %}
+        {% if ariaExpanded %} aria-expanded="{{ ariaExpanded }}" {% endif %}
     >
         {% if icon %}{% icon icon=icon outlined=icon_outlined %}{% endif %}
         {% if text_icon %}
@@ -29,6 +30,7 @@
         aria-label="{% firstof title text %}"
         {% as_attributes extra_attributes %}
         {% if id %} id="{{ id }}" {% endif %}
+        {% if ariaExpanded %} aria-expanded="{{ ariaExpanded }}" {% endif %}
     >
         {% if icon %}{% icon icon=icon outlined=icon_outlined %}{% endif %}
         {% if text_icon %}

diff --git a/src/open_inwoner/components/templates/components/Dropdown/Dropdown.html b/src/open_inwoner/components/templates/components/Dropdown/Dropdown.html
@@ -1,7 +1,7 @@
 {% load i18n button_tags %}
 
 <div class="dropdown">
-    {% button href="#" icon=icon|default:'expand_more' text_icon=text_icon icon_position='after' class=class bordered=False text=text icon_outlined=True transparent=True single=True disabled=disabled secondary=secondary size="small" %}
+    {% button href="#" icon=icon|default:'expand_more' text_icon=text_icon icon_position='after' class=class bordered=False text=text icon_outlined=True transparent=True single=True disabled=disabled secondary=secondary size="small" ariaExpanded="false" %}
     <div class="dropdown__content">
         {{ contents }}
     </div>

diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -6,7 +6,7 @@
 <header class="header" aria-label="Navigatie header">
     <div class="header__container">
         <div class="header__menu">
-            <button class="header__button">
+            <button class="header__button" aria-expanded="false">
                 <div class="header__menu-icon">
                     <span class="closed">{% trans "Menu" %}</span>
                     <span class="open">{% trans "Sluiten" %}</span>
@@ -47,7 +47,7 @@
 
                         {% if cms_apps.products and categories %}
                         <li class="primary-navigation__list-item dropdown-nav__toggle">
-                            <a href="#" class="link link--toggle link--icon link--icon-position-before" aria-label="{% trans "Onderwerpen" %}" title="{% trans "Onderwerpen" %}">
+                            <a href="#" class="link link--toggle link--icon link--icon-position-before" aria-label="{% trans "Onderwerpen" %}" title="{% trans "Onderwerpen" %}" aria-expanded="false">
                                 <span >{% trans "Onderwerpen" %}</span>
                                 <span aria-hidden="true" class="material-icons-outlined ">description</span>
                                 {% icon icon="expand_more" icon_position="after" icon_outlined=True %}

diff --git a/src/open_inwoner/js/components/dropdown/index.js b/src/open_inwoner/js/components/dropdown/index.js
@@ -14,7 +14,7 @@ export class Dropdown {
     event.preventDefault()
     setTimeout(() => {
       this.node.classList.add('dropdown--open')
-      this.node.setAttribute('aria-expanded', 'true')
+      this.button.setAttribute('aria-expanded', 'true')
     }, 5)
   }
 
@@ -24,7 +24,7 @@ export class Dropdown {
       (event.type === 'keydown' && event.key === 'Escape')
     ) {
       this.node.classList.remove('dropdown--open')
-      this.node.setAttribute('aria-expanded', 'false')
+      this.button.setAttribute('aria-expanded', 'false')
     }
   }
 }

diff --git a/src/open_inwoner/js/components/header/header.js b/src/open_inwoner/js/components/header/header.js
@@ -13,6 +13,9 @@ export const HEADERS = BEM.getBEMNodes(BLOCK_HEADER)
 /** Handler to bypass Safari bug */
 export const themesToggle = document.querySelectorAll('.dropdown-nav__toggle')
 
+/** Controls aria-expanded state for accessibility */
+export const interactiveButton = document.querySelectorAll('.header__button')
+
 /**
  * Controls the main header and interaction with the mobile menu and dismissing it using the escape key.
  */
@@ -53,12 +56,18 @@ class Header extends Component {
    * Gets called when `node` is clicked.
    * Clears the dismissed state, (prevents overriding focus/toggle).
    */
-  toggleMobileNavOpen(event) {
+  toggleMobileNavOpen() {
     document.body.classList.toggle('body--open')
     // Safari specific - close all when main menu closes
     themesToggle.forEach((elem) => {
       elem.classList.remove('nav__list--open')
     })
+    interactiveButton.forEach((elem) => {
+      elem.setAttribute(
+        'aria-expanded',
+        elem.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+      )
+    })
     window.scrollTo(0, 0)
   }
 

diff --git a/src/open_inwoner/js/components/header/subpage-navigation.js b/src/open_inwoner/js/components/header/subpage-navigation.js
@@ -4,8 +4,12 @@ class Subpage {
     this.node.addEventListener('click', this.toggleNavOpen.bind(this))
   }
 
-  toggleNavOpen(event) {
+  toggleNavOpen() {
     this.node.parentElement.classList.toggle('nav__list--open')
+    this.node.setAttribute(
+      'aria-expanded',
+      this.node.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+    )
   }
 }