From 57d29d8bdb18a0cadc8b83a277ec1c46134cb1cb Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Mon, 10 Jun 2024 12:16:03 +0200
Subject: [PATCH] :wheelchair: [#2376] Set aria-expanded for desktop in BEM
 block

---
 .../templates/components/Header/Header.html   |  4 +-
 .../Header/NavigationAuthenticated.html       |  2 +-
 .../components/Header/PrimaryNavigation.html  |  2 +-
 .../components/header/primary-navigation.js   | 75 ++++++++++++-------
 4 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/Header/Header.html b/src/open_inwoner/components/templates/components/Header/Header.html
index 45f8d477db..f622bee1e3 100644
--- a/src/open_inwoner/components/templates/components/Header/Header.html
+++ b/src/open_inwoner/components/templates/components/Header/Header.html
@@ -32,7 +32,7 @@
         </div>
         {# end of mobile header-menu with logo #}
 
-        <div class="header__submenu">
+        <div class="header--mobile header__submenu">
             {% if cms_apps.products and request.user.is_authenticated or not config.hide_search_from_anonymous_users %}
                 <nav class="header__actions header__actions--open" aria-label="Zoek navigatie mobiel">
                     <form id="search-form-mobile-open" class="search-form-delegate form form--inline">
@@ -42,7 +42,7 @@
                 </nav>
             {% endif %}
 
-                <nav class="primary-navigation" aria-label="Hoofd navigatie">
+                <nav class="primary-navigation primary-navigation--mobile" aria-label="Hoofd navigatie">
                     <ul class="primary-navigation__list">
 
                         <li class="primary-navigation__list-item">
diff --git a/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html b/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
index eccacad48e..c75e09b1ee 100644
--- a/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
+++ b/src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
@@ -4,7 +4,7 @@
 
 {% if request.user.is_authenticated %}
 
-    <nav class="primary-navigation primary-navigation__authenticated" aria-label="Navigatie na inloggen">
+    <nav class="primary-navigation primary-navigation--desktop primary-navigation__authenticated" aria-label="Navigatie na inloggen">
         <ul class="primary-navigation__list">
             <li class="primary-navigation__list-item">
             {% button text=_('Welkom ')|addstr:request.user.get_short_name type="button" icon="expand_more" icon_position="after" icon_outlined=True transparent=True extra_classes="primary-navigation--toggle" %}
diff --git a/src/open_inwoner/components/templates/components/Header/PrimaryNavigation.html b/src/open_inwoner/components/templates/components/Header/PrimaryNavigation.html
index d676acb5dd..3740fd4f30 100644
--- a/src/open_inwoner/components/templates/components/Header/PrimaryNavigation.html
+++ b/src/open_inwoner/components/templates/components/Header/PrimaryNavigation.html
@@ -2,7 +2,7 @@
 
 {% get_solo "configurations.SiteConfiguration" as config %}
 
-<nav class="primary-navigation primary-navigation__main" aria-label="Hoofd navigatie">
+<nav class="primary-navigation primary-navigation--desktop primary-navigation__main" aria-label="Hoofd navigatie">
     <ul class="primary-navigation__list">
         {% if cms_apps.products and menu_categories %}
             {% if request.user.is_authenticated or not config.hide_categories_from_anonymous_users %}
diff --git a/src/open_inwoner/js/components/header/primary-navigation.js b/src/open_inwoner/js/components/header/primary-navigation.js
index 38a7331bda..694bbc6d3f 100644
--- a/src/open_inwoner/js/components/header/primary-navigation.js
+++ b/src/open_inwoner/js/components/header/primary-navigation.js
@@ -4,21 +4,21 @@ import { Component } from '../abstract/component'
 /** @type {string} The primary navigation block name. */
 const BLOCK_PRIMARY_NAVIGATION = 'primary-navigation'
 
-/** @type {NodeList<HTMLElement>} The primary navigation block name. */
-const PRIMARY_NAVIGATIONS = BEM.getBEMNodes(BLOCK_PRIMARY_NAVIGATION)
-
 /** @type {string} The dismissed modifier state, overrides focus/hover. */
 const MODIFIER_DISMISSED = 'dismissed'
 
-/** Handler to bypass Safari bug */
-const navigationToggle = document.querySelectorAll(
-  '.primary-navigation--toggle'
-)
-
 /**
  * Controls the primary navigation and dismissing it using the escape key.
  */
 class PrimaryNavigation extends Component {
+  constructor(node, initialState = { dismissed: false }) {
+    super(node, initialState)
+    /** Handler to bypass Safari bug */
+    this.navigationToggle = this.node.querySelectorAll(
+      '.primary-navigation--desktop .primary-navigation--toggle'
+    )
+  }
+
   /**
    * Binds events to callbacks.
    * Callbacks should trigger `setState` which in turn triggers `render`.
@@ -36,7 +36,12 @@ class PrimaryNavigation extends Component {
    * Focusin and Focusout are used instead of Focus for Safari
    */
   onFocusOut() {
-    this.node.classList.remove('primary-navigation--open')
+    if (this.node) {
+      BEM.removeModifier(this.node, 'open')
+    }
+    this.navigationToggle.forEach((toggle) => {
+      toggle.setAttribute('aria-expanded', 'false')
+    })
   }
 
   /**
@@ -44,46 +49,58 @@ class PrimaryNavigation extends Component {
    * Clears the dismissed state, (prevents overriding focus/toggle).
    */
   toggleDesktopNavOpen() {
-    this.node.classList.toggle('primary-navigation--open')
-    // Safari specific
-    this.node.classList.remove('primary-navigation--dismissed')
-    this.node.classList.remove('primary-navigation__main--dismissed')
+    if (this.node) {
+      const isOpen = BEM.hasModifier(this.node, 'open')
+      BEM.toggleModifier(this.node, 'open', !isOpen)
+      BEM.toggleModifier(this.node, MODIFIER_DISMISSED)
+
+      if (BLOCK_PRIMARY_NAVIGATION) {
+        BEM.removeModifier(this.node, MODIFIER_DISMISSED)
+      }
+      // Safari specific
+      this.navigationToggle.forEach((toggle) => {
+        toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true')
+      })
+    }
   }
 
   /**
    * Gets called when a key is released.
    * If key is escape key, explicitly dismiss the menu (overriding focus/hover).
-   //* @param {KeyboardEvent} event
+   * @param {KeyboardEvent} event
    */
   onKeyUp(event) {
     if (event.key === 'Escape') {
       this.setState({ dismissed: true })
-      this.node.blur()
-      this.node.classList.remove('primary-navigation--open')
-      // Safari specific
-      navigationToggle.forEach((elem) => {
-        elem.blur()
-      })
+      if (this.node) {
+        this.node.blur()
+        // Safari specific
+        this.navigationToggle.forEach((elem) => elem.blur())
+      }
     }
   }
 
   /**
    * Persists state to DOM.
    * Rendering should be one-way traffic and not inspect any current values in DOM.
-   //* @param {Object} state State to render.
+   * @param {Object} state State to render.
    */
   render(state) {
-    BEM.toggleModifier(this.node, MODIFIER_DISMISSED, state.dismissed)
-
-    if (state.dismissed) {
-      this.node.blur()
+    if (this.node) {
+      BEM.toggleModifier(this.node, MODIFIER_DISMISSED, state.dismissed)
 
-      return this.node.querySelector('.primary-navigation--toggle')
+      if (state.dismissed) {
+        this.node.blur()
+      }
     }
   }
 }
 
 // Start!
-;[...PRIMARY_NAVIGATIONS].forEach(
-  (node) => new PrimaryNavigation(node, { dismissed: false })
-)
+document.addEventListener('DOMContentLoaded', () => {
+  BEM.getBEMNodes(BLOCK_PRIMARY_NAVIGATION).forEach((node) => {
+    if (node) {
+      new PrimaryNavigation(node, { dismissed: false })
+    }
+  })
+})