From 55361f84127cd9aa1649a236a933769b12265ec5 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Tue, 29 Jun 2021 13:15:24 +0300
Subject: [PATCH] Issue #3213074 by mherchel, Indrajith KB, Gauravmahlawat:
 Olivero: Refactor second-level-navigation.es6.js to meet Drupal's JavaScript
 coding standards

---
 .../olivero/js/second-level-navigation.es6.js | 36 ++++++++++---------
 .../olivero/js/second-level-navigation.js     | 26 +++++++-------
 .../navigation/menu--primary-menu.html.twig   | 26 +++++++++++---
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/core/themes/olivero/js/second-level-navigation.es6.js b/core/themes/olivero/js/second-level-navigation.es6.js
index 4383eed760a..63bb06a605b 100644
--- a/core/themes/olivero/js/second-level-navigation.es6.js
+++ b/core/themes/olivero/js/second-level-navigation.es6.js
@@ -1,7 +1,7 @@
 ((Drupal) => {
   const { isDesktopNav } = Drupal.olivero;
   const secondLevelNavMenus = document.querySelectorAll(
-    '.primary-nav__menu-item--has-children',
+    '[data-drupal-selector="primary-nav-menu-item-has-children"]',
   );
 
   /**
@@ -12,7 +12,7 @@
    */
   function toggleSubNav(topLevelMenuItem, toState) {
     const buttonSelector =
-      '.primary-nav__button-toggle, .primary-nav__menu-link--button';
+      '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
     const button = topLevelMenuItem.querySelector(buttonSelector);
     const state =
       toState !== undefined
@@ -27,29 +27,29 @@
             'aria-expanded',
             'false',
           );
-          el.querySelector('.primary-nav__menu--level-2').classList.remove(
-            'is-active-menu-parent',
-          );
-          el.querySelector('.primary-nav__menu-🥕').classList.remove(
-            'is-active-menu-parent',
-          );
+          el.querySelector(
+            '[data-drupal-selector="primary-nav-menu--level-2"]',
+          ).classList.remove('is-active-menu-parent');
+          el.querySelector(
+            '[data-drupal-selector="primary-nav-menu-🥕"]',
+          ).classList.remove('is-active-menu-parent');
         });
       }
       button.setAttribute('aria-expanded', 'true');
       topLevelMenuItem
-        .querySelector('.primary-nav__menu--level-2')
+        .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')
         .classList.add('is-active-menu-parent');
       topLevelMenuItem
-        .querySelector('.primary-nav__menu-🥕')
+        .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')
         .classList.add('is-active-menu-parent');
     } else {
       button.setAttribute('aria-expanded', 'false');
       topLevelMenuItem.classList.remove('is-touch-event');
       topLevelMenuItem
-        .querySelector('.primary-nav__menu--level-2')
+        .querySelector('[data-drupal-selector="primary-nav-menu--level-2"]')
         .classList.remove('is-active-menu-parent');
       topLevelMenuItem
-        .querySelector('.primary-nav__menu-🥕')
+        .querySelector('[data-drupal-selector="primary-nav-menu-🥕"]')
         .classList.remove('is-active-menu-parent');
     }
   }
@@ -67,7 +67,7 @@
 
     setTimeout(() => {
       const menuParentItem = e.target.closest(
-        '.primary-nav__menu-item--has-children',
+        '[data-drupal-selector="primary-nav-menu-item-has-children"]',
       );
       if (!menuParentItem.contains(document.activeElement)) {
         toggleSubNav(menuParentItem, false);
@@ -78,7 +78,7 @@
   // Add event listeners onto each sub navigation parent and button.
   secondLevelNavMenus.forEach((el) => {
     const button = el.querySelector(
-      '.primary-nav__button-toggle, .primary-nav__menu-link--button',
+      '[data-drupal-selector="primary-nav-submenu-toggle-button"]',
     );
 
     button.removeAttribute('aria-hidden');
@@ -136,7 +136,7 @@
       // Return focus to the toggle button if the submenu contains focus.
       if (el.contains(document.activeElement)) {
         el.querySelector(
-          '.primary-nav__button-toggle, .primary-nav__menu-link--button',
+          '[data-drupal-selector="primary-nav-submenu-toggle-button"]',
         ).focus();
       }
       toggleSubNav(el, false);
@@ -154,7 +154,7 @@
 
     secondLevelNavMenus.forEach((el) => {
       const button = el.querySelector(
-        '.primary-nav__button-toggle, .primary-nav__menu-link--button',
+        '[data-drupal-selector="primary-nav-submenu-toggle-button"]',
       );
       const state = button.getAttribute('aria-expanded') === 'true';
 
@@ -181,7 +181,9 @@
     (e) => {
       if (
         areAnySubNavsOpen() &&
-        !e.target.matches('.header-nav, .header-nav *')
+        !e.target.matches(
+          '[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *',
+        )
       ) {
         closeAllSubNav();
       }
diff --git a/core/themes/olivero/js/second-level-navigation.js b/core/themes/olivero/js/second-level-navigation.js
index 517c159d038..8575af8ec5e 100644
--- a/core/themes/olivero/js/second-level-navigation.js
+++ b/core/themes/olivero/js/second-level-navigation.js
@@ -7,10 +7,10 @@
 
 (function (Drupal) {
   var isDesktopNav = Drupal.olivero.isDesktopNav;
-  var secondLevelNavMenus = document.querySelectorAll('.primary-nav__menu-item--has-children');
+  var secondLevelNavMenus = document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]');
 
   function toggleSubNav(topLevelMenuItem, toState) {
-    var buttonSelector = '.primary-nav__button-toggle, .primary-nav__menu-link--button';
+    var buttonSelector = '[data-drupal-selector="primary-nav-submenu-toggle-button"]';
     var button = topLevelMenuItem.querySelector(buttonSelector);
     var state = toState !== undefined ? toState : button.getAttribute('aria-expanded') !== 'true';
 
@@ -18,19 +18,19 @@
       if (isDesktopNav()) {
         secondLevelNavMenus.forEach(function (el) {
           el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
-          el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
-          el.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
+          el.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
+          el.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
         });
       }
 
       button.setAttribute('aria-expanded', 'true');
-      topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');
-      topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.add('is-active-menu-parent');
+      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.add('is-active-menu-parent');
+      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.add('is-active-menu-parent');
     } else {
       button.setAttribute('aria-expanded', 'false');
       topLevelMenuItem.classList.remove('is-touch-event');
-      topLevelMenuItem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
-      topLevelMenuItem.querySelector('.primary-nav__menu-🥕').classList.remove('is-active-menu-parent');
+      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu--level-2"]').classList.remove('is-active-menu-parent');
+      topLevelMenuItem.querySelector('[data-drupal-selector="primary-nav-menu-🥕"]').classList.remove('is-active-menu-parent');
     }
   }
 
@@ -39,7 +39,7 @@
   function handleBlur(e) {
     if (!Drupal.olivero.isDesktopNav()) return;
     setTimeout(function () {
-      var menuParentItem = e.target.closest('.primary-nav__menu-item--has-children');
+      var menuParentItem = e.target.closest('[data-drupal-selector="primary-nav-menu-item-has-children"]');
 
       if (!menuParentItem.contains(document.activeElement)) {
         toggleSubNav(menuParentItem, false);
@@ -48,7 +48,7 @@
   }
 
   secondLevelNavMenus.forEach(function (el) {
-    var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
+    var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
     button.removeAttribute('aria-hidden');
     button.removeAttribute('tabindex');
     el.addEventListener('touchstart', function () {
@@ -81,7 +81,7 @@
   function closeAllSubNav() {
     secondLevelNavMenus.forEach(function (el) {
       if (el.contains(document.activeElement)) {
-        el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button').focus();
+        el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]').focus();
       }
 
       toggleSubNav(el, false);
@@ -93,7 +93,7 @@
   function areAnySubNavsOpen() {
     var subNavsAreOpen = false;
     secondLevelNavMenus.forEach(function (el) {
-      var button = el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button');
+      var button = el.querySelector('[data-drupal-selector="primary-nav-submenu-toggle-button"]');
       var state = button.getAttribute('aria-expanded') === 'true';
 
       if (state) {
@@ -110,7 +110,7 @@
     }
   });
   document.addEventListener('touchstart', function (e) {
-    if (areAnySubNavsOpen() && !e.target.matches('.header-nav, .header-nav *')) {
+    if (areAnySubNavsOpen() && !e.target.matches('[data-drupal-selector="header-nav"], [data-drupal-selector="header-nav"] *')) {
       closeAllSubNav();
     }
   }, {
diff --git a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
index 99470be9838..0e486925781 100644
--- a/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
+++ b/core/themes/olivero/templates/navigation/menu--primary-menu.html.twig
@@ -31,6 +31,7 @@
 
 {% macro menu_links(items, attributes, menu_level) %}
   {% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
+  {% set drupal_selector_primary_nav_level = 'primary-nav-menu--level-' ~ (menu_level + 1) %}
   {% import _self as menus %}
   {% if items %}
 
@@ -39,10 +40,10 @@
       has the overflow:hidden CSS rule applied.
     #}
     {% if menu_level == 1 %}
-      <span class="primary-nav__menu-🥕"></span>
+      <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
     {% endif %}
 
-    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level) }}>
+    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
       {% set attributes = attributes.removeClass(primary_nav_level) %}
       {% for item in items %}
 
@@ -72,7 +73,7 @@
           ]
         %}
 
-        <li{{ item.attributes.addClass(item_classes) }}>
+        <li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', item.below ? 'primary-nav-menu-item-has-children' : false) }}>
           {#
             A unique HTML ID should be used, but that isn't available through
             Twig yet, so the |clean_id filter is used for now.
@@ -84,7 +85,11 @@
           {% endset %}
 
           {% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
-            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, { 'class': link_classes }) }}
+            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
+              'class': link_classes,
+              'data-drupal-selector': 'primary-nav-menu-link-has-children',
+              })
+            }}
 
             {% if item.below %}
               {#
@@ -92,7 +97,17 @@
                 but still visible in non-JS environments so that chevron can indicate presence of
                 drop menu).
               #}
-              <button class="primary-nav__button-toggle" aria-controls="{{ aria_id }}" aria-expanded="false" aria-hidden="true" tabindex="-1">
+              {%
+                set toggle_button_attributes = create_attribute({
+                  'class': 'primary-nav__button-toggle',
+                  'data-drupal-selector': 'primary-nav-submenu-toggle-button',
+                  'aria-controls': aria_id,
+                  'aria-expanded': 'false',
+                  'aria-hidden': 'true',
+                  'tabindex': '-1',
+                })
+              %}
+              <button{{ toggle_button_attributes }}>
                 <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
                 <span class="icon--menu-toggle"></span>
               </button>
@@ -106,6 +121,7 @@
               'class': link_classes,
               'aria-controls': item.below ? aria_id : false,
               'aria-expanded': item.below ? 'false' : false,
+              'data-drupal-selector': item.below ? 'primary-nav-submenu-toggle-button' : false,
               })
             }}