Issue #3393400 by mglaman, finnsky, m4olivei, bnjmnm, plopesc, ckrina, smustgrave: Implement Nightwatch tests for Navigation module

core/modules/navigation/navigation.module

@@ -124,6 +124,7 @@ function navigation_theme($existing, $type, $theme, $path) {
     'base hook' => 'menu',
     'variables' => [
       'menu_name' => NULL,
+      'title' => NULL,
       'items' => [],
       'attributes' => [],
     ],

core/modules/navigation/src/ShortcutLazyBuilder.php

@@ -58,9 +58,9 @@ final class ShortcutLazyBuilder implements TrustedCallbackInterface {
     ];
 
     return [
-      '#title' => $label,
       '#theme' => 'navigation_menu',
       '#menu_name' => 'shortcuts',
+      '#title' => $label,
       '#items' => $shortcuts_items,
       '#cache' => $shortcut_links['#cache'],
     ];

core/modules/navigation/templates/menu-region--footer.html.twig

@@ -22,9 +22,9 @@
  * @ingroup themeable
  */
 #}
-{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
 <div class="admin-toolbar__item">
-  <h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
+  {# @todo id & aria-labelledby will be brought back via JS in https://www.drupal.org/project/drupal/issues/3452724 #}
+  <h4 class="visually-hidden focusable">{{ title }}</h4>
   <ul class="toolbar-block__list">
     {% if help %}
       <li class="toolbar-block__list-item">

core/modules/navigation/templates/navigation-menu.html.twig

@@ -1,8 +1,7 @@
 {% import _self as menus %}
-{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
 <div class="admin-toolbar__item">
-  <h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
-  <ul class="toolbar-block__list" aria-labelledby="{{ menu_heading_id }}">
+  <h4 class="visually-hidden focusable">{{ title }}</h4>
+  <ul class="toolbar-block__list">
     {{ menus.menu_items(items, attributes, 0) }}
   </ul>
 </div>

core/modules/navigation/tests/src/Functional/NavigationShortcutsBlockTest.php

@@ -92,7 +92,6 @@ class NavigationShortcutsBlockTest extends PageCacheTagsTestBase {
     ]));
     $this->verifyDynamicPageCache($test_page_url, 'MISS');
     $this->verifyDynamicPageCache($test_page_url, 'HIT');
-    $this->assertSession()->elementNotExists('css', '#menu--shortcuts');
     $this->assertSession()->pageTextNotContains('Shortcuts');
     $this->assertSession()->linkNotExists('Cron');
 
@@ -118,7 +117,6 @@ class NavigationShortcutsBlockTest extends PageCacheTagsTestBase {
     $this->verifyDynamicPageCache($test_page_url, 'MISS');
     $this->verifyDynamicPageCache($test_page_url, 'HIT');
     $this->assertCacheContexts(['user', 'url.query_args:_wrapper_format', 'session']);
-    $this->assertSession()->elementExists('css', '#menu--shortcuts');
     $this->assertSession()->pageTextContains('Shortcuts');
     $this->assertSession()->linkExists('Cron');
 

core/modules/navigation/tests/src/Nightwatch/Tests/a11yTest.js

@@ -0,0 +1,31 @@
+const navigationTest = {
+  '@tags': ['core', 'a11y', 'a11y:admin', 'navigation'],
+
+  before(browser) {
+    browser
+      .drupalInstall({
+        installProfile: 'nightwatch_a11y_testing',
+      })
+      .drupalInstallModule('navigation', true)
+      .setWindowSize(1220, 800);
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+};
+const testCases = [{ name: 'Claro page', path: '/user/1/edit' }];
+
+testCases.forEach((testCase) => {
+  navigationTest[`Accessibility - Navigation Module - ${testCase.name}`] = (
+    browser,
+  ) => {
+    browser.drupalLoginAsAdmin(() => {
+      browser
+        .drupalRelativeURL(testCase.path)
+        .axeInject()
+        .axeRun('body', testCase.options || {});
+    });
+  };
+});
+
+module.exports = navigationTest;

core/modules/navigation/tests/src/Nightwatch/Tests/expandCollapseTest.js

@@ -0,0 +1,42 @@
+const selectors = {
+  expandButton: {
+    expanded: '.admin-toolbar__expand-button[aria-expanded=true]',
+    collapsed: '.admin-toolbar__expand-button[aria-expanded=false]',
+  },
+  htmlAttribute: {
+    expanded: '[data-admin-toolbar="expanded"]',
+    collapsed: '[data-admin-toolbar="collapsed"]',
+  },
+};
+
+module.exports = {
+  '@tags': ['core', 'navigation'],
+  browser(browser) {
+    browser
+      .drupalInstall()
+      .drupalInstallModule('navigation', true)
+      .setWindowSize(1220, 800);
+  },
+  after(browser) {
+    browser.drupalUninstall();
+  },
+
+  'Expand/Collapse': (browser) => {
+    browser.drupalLoginAsAdmin(() => {
+      browser
+        .drupalRelativeURL('/')
+        .waitForElementPresent(
+          '[data-once="admin-toolbar-document-triggers-listener"][data-admin-toolbar="expanded"]',
+        )
+        // This pause required to wait for first init event.
+        .waitForElementVisible(selectors.expandButton.expanded)
+        .click(selectors.expandButton.expanded)
+        .waitForElementNotPresent(selectors.expandButton.expanded)
+        .waitForElementPresent(selectors.expandButton.collapsed)
+        .waitForElementPresent(selectors.htmlAttribute.collapsed)
+        .click(selectors.expandButton.collapsed)
+        .waitForElementPresent(selectors.expandButton.expanded)
+        .waitForElementPresent(selectors.htmlAttribute.expanded);
+    });
+  },
+};