Issue #3210443 by mherchel, bnjmnm, andy-blum, guilhermevp, Gauravmahlawat,...

Issue #3210443 by mherchel, bnjmnm, andy-blum, guilhermevp, Gauravmahlawat, Rinku Jacob 13: Olivero: Focus after submenu close via ESC key

core/tests/Drupal/Nightwatch/Tests/oliveroDesktopMenuTest.js

@@ -93,4 +93,67 @@ module.exports = {
         'false',
       );
   },
+  'Verify parent <button> focus on ESC in wide navigation': (browser) => {
+    browser
+      // Verify functionality on regular link's button.
+      .drupalRelativeURL('/node')
+      .waitForElementVisible(headerNavSelector)
+      .click(`[aria-controls="${linkSubMenuId}"]`)
+      .waitForElementVisible(`#${linkSubMenuId}`)
+      .keys(browser.Keys.TAB)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (linkSubMenuId) {
+          return document.activeElement.matches(`#${linkSubMenuId} *`);
+        },
+        [linkSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      .keys(browser.Keys.ESCAPE)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (linkSubMenuId) {
+          return document.activeElement.matches(
+            `[aria-controls="${linkSubMenuId}"]`,
+          );
+        },
+        [linkSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      // Verify functionality on route:<button> button.
+      .click(`[aria-controls="${buttonSubMenuId}"]`)
+      .waitForElementVisible(`#${buttonSubMenuId}`)
+      .keys(browser.Keys.TAB)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (buttonSubMenuId) {
+          return document.activeElement.matches(`#${buttonSubMenuId} *`);
+        },
+        [buttonSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      .keys(browser.Keys.ESCAPE)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (buttonSubMenuId) {
+          return document.activeElement.matches(
+            `[aria-controls="${buttonSubMenuId}"]`,
+          );
+        },
+        [buttonSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      );
+  },
 };

core/tests/Drupal/Nightwatch/Tests/oliveroMobileMenuTest.js

@@ -17,17 +17,20 @@ const focusTrapCheck = (browser, parentSelector, tabCount, tabBackwards) => {
   for (let i = 0; i < tabCount; i++) {
     browser.keys(browser.Keys.TAB).pause(50);
   }
-  browser.execute(
-    // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
-    function (parentSelector) {
-      // Verify focused element is still within the focus trap.
-      return document.activeElement.matches(parentSelector);
-    },
-    [parentSelector],
-    (result) => {
-      browser.assert.ok(result.value);
-    },
-  );
+  browser
+    .execute(
+      // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+      function (parentSelector) {
+        // Verify focused element is still within the focus trap.
+        return document.activeElement.matches(parentSelector);
+      },
+      [parentSelector],
+      (result) => {
+        browser.assert.ok(result.value);
+      },
+    )
+    // Release all keys.
+    .keys(browser.Keys.NULL);
 };
 
 module.exports = {
@@ -94,4 +97,70 @@ module.exports = {
       true,
     );
   },
+  'Verify parent <button> focus on ESC in narrow navigation': (browser) => {
+    browser
+      // Verify functionality on regular link's button.
+      .drupalRelativeURL('/node')
+      .waitForElementVisible('body')
+      .click(mobileNavButtonSelector)
+      .waitForElementVisible(headerNavSelector)
+      .waitForElementVisible(`[aria-controls="${linkSubMenuId}"]`)
+      .click(`[aria-controls="${linkSubMenuId}"]`)
+      .waitForElementVisible(`#${linkSubMenuId}`)
+      .keys(browser.Keys.TAB)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (linkSubMenuId) {
+          return document.activeElement.matches(`#${linkSubMenuId} *`);
+        },
+        [linkSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      .keys(browser.Keys.ESCAPE)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (linkSubMenuId) {
+          return document.activeElement.matches(
+            `[aria-controls="${linkSubMenuId}"]`,
+          );
+        },
+        [linkSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      // Verify functionality on route:<button> button.
+      .click(`[aria-controls="${buttonSubMenuId}"]`)
+      .waitForElementVisible(`#${buttonSubMenuId}`)
+      .keys(browser.Keys.TAB)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (buttonSubMenuId) {
+          return document.activeElement.matches(`#${buttonSubMenuId} *`);
+        },
+        [buttonSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      )
+      .keys(browser.Keys.ESCAPE)
+      .pause(50)
+      .execute(
+        // eslint-disable-next-line func-names, prefer-arrow-callback, no-shadow
+        function (buttonSubMenuId) {
+          return document.activeElement.matches(
+            `[aria-controls="${buttonSubMenuId}"]`,
+          );
+        },
+        [buttonSubMenuId],
+        (result) => {
+          browser.assert.ok(result.value);
+        },
+      );
+  },
 };

core/themes/olivero/js/second-level-navigation.es6.js

@@ -133,6 +133,12 @@
    */
   function closeAllSubNav() {
     secondLevelNavMenus.forEach((el) => {
+      // 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',
+        ).focus();
+      }
       toggleSubNav(el, false);
     });
   }

core/themes/olivero/js/second-level-navigation.js

@@ -80,6 +80,10 @@
 
   function closeAllSubNav() {
     secondLevelNavMenus.forEach(function (el) {
+      if (el.contains(document.activeElement)) {
+        el.querySelector('.primary-nav__button-toggle, .primary-nav__menu-link--button').focus();
+      }
+
       toggleSubNav(el, false);
     });
   }