Merge branch 'develop' of github.com:uswds/uswds into cm-disabled-forms-styles

mahoneycm · mahoneycm · commit ac463d399c10 · 2022-11-29T10:08:50.000-05:00
diff --git a/packages/usa-header/src/index.js b/packages/usa-header/src/index.js
@@ -106,11 +106,11 @@ const toggleNav = (active) => {
     closeButton.focus();
   } else if (
     !safeActive &&
-    document.activeElement === closeButton &&
-    menuButton
+    menuButton &&
+    getComputedStyle(menuButton).display !== 'none'
+
   ) {
-    // The mobile nav was just deactivated, and focus was on the close
-    // button, which is no longer visible. We don't want the focus to
+    // The mobile nav was just deactivated. We don't want the focus to
     // disappear into the void, so focus on the menu button if it's
     // visible (this may have been what the user was just focused on,
     // if they triggered the mobile nav by mistake).
@@ -147,7 +147,10 @@ const focusNavButton = (event) => {
 
   // Only shift focus if within dropdown
   if (!event.target.matches(NAV_CONTROL)) {
-    parentNavItem.querySelector(NAV_CONTROL).focus();
+    const navControl = parentNavItem.querySelector(NAV_CONTROL)
+    if (navControl) {
+      navControl.focus()
+    }
   }
 };
 
diff --git a/packages/usa-icon/src/usa-icon.twig b/packages/usa-icon/src/usa-icon.twig
@@ -6,13 +6,13 @@
 <div class="display-flex flex-wrap margin-top-5">
 {% for item in icons.items %}
   <div role="region" aria-atomic="true" class="font-sans-xl position-relative icon-example border-1px border-base-lighter hover:text-white hover:bg-primary-vivid hover:border-primary-darker " data-meta="{{ item.name }} {{ item.meta }}" aria-label="{{ item.name }} icon.">
-    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
+    <button type="button" onclick="copyHTML(this)" class="bg-transparent cursor-pointer text-no-underline text-black display-flex width-card height-card flex-align-center flex-align-center border-0 flex-column flex-justify-center padding-2  hover:text-white" aria-label="Copy icon to clipboard" style="-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;">
       <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
         <use xlink:href="{{ icons.img_path }}/sprite.svg#{{ item.name }}"></use>
       </svg>
       <span class="font-sans-3xs margin-top-2 display-block" aria-hidden="true">{{ item.name }}</span>
     </button>
-    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full" aria-label="{{ item.name }}"></span>
+    <span aria-live="assertive" style="pointer-events:none" class="message-holder bottom-1 position-absolute font-sans-3xs text-bold display-block text-center left-0 width-full"></span>
   </div>
 {% endfor %}
 </div>
@@ -42,7 +42,6 @@ function copyHTML(el){
 
   message = document.createElement("span");
   message.setAttribute("id", "icon-copy-notice");
-  message.setAttribute("aria-live", "assertive");
   message.innerHTML = "Copied to clipboard!";
 
    /* Copy the text inside the text field */
diff --git a/packages/usa-nav/src/test/navigation.spec.js b/packages/usa-nav/src/test/navigation.spec.js
@@ -32,6 +32,7 @@ describe("navigation toggle", () => {
   let sandbox;
   let header;
   let nav;
+  let navPrimary;
   let navControl;
   let overlay;
   let closeButton;
@@ -47,6 +48,7 @@ describe("navigation toggle", () => {
     navigation.on();
     header = body.querySelector(".usa-header");
     nav = body.querySelector(".usa-nav");
+    navPrimary = body.querySelector(".usa-nav__primary");
     navControl = body.querySelector(".usa-nav__link");
     overlay = body.querySelector(".usa-overlay");
     closeButton = body.querySelector(".usa-nav__close");
@@ -150,6 +152,15 @@ describe("navigation toggle", () => {
     assert.strictEqual(accordionButton.getAttribute("aria-expanded"), "false");
   });
 
+  it("hides the nav when the Escape key is hit", () => {
+    menuButton.click();
+    navControl.focus();
+    EVENTS.escape(navPrimary)
+    assert.strictEqual(isVisible(nav), false);
+    assert.strictEqual(isVisible(overlay), false);
+    assert.strictEqual(document.activeElement, menuButton)
+  });
+
   it("collapses dropdowns when focus leaves nav", () => {
     menuButton.click();
     navLink.click();
