fix(console): make the mobile menu and copy buttons keyboard accessible (#56591)

packages/console/app/src/component/header.tsx

@@ -46,6 +46,18 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo
     contextMenuPosition: { x: 0, y: 0 },
   })
 
+  let mobileToggle: HTMLButtonElement | undefined
+  createEffect(() => {
+    if (!store.mobileMenuOpen) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      setStore("mobileMenuOpen", false)
+      mobileToggle?.focus()
+    }
+    document.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => document.removeEventListener("keydown", handleKeyDown))
+  })
+
   createEffect(() => {
     const handleClickOutside = () => {
       setStore("contextMenuOpen", false)
@@ -215,9 +227,10 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo
       </nav>
       <nav data-component="nav-mobile">
         <button
+          ref={mobileToggle}
           type="button"
           data-component="nav-mobile-toggle"
-          aria-expanded="false"
+          aria-expanded={store.mobileMenuOpen}
           aria-controls="nav-mobile-menu"
           class="nav-toggle"
           onClick={() => setStore("mobileMenuOpen", !store.mobileMenuOpen)}

packages/console/app/src/routes/brand/index.css

@@ -386,7 +386,8 @@
       }
     }
 
-    [data-component="brand-grid"] > div:hover [data-component="actions"] {
+    [data-component="brand-grid"] > div:hover [data-component="actions"],
+    [data-component="brand-grid"] > div:focus-within [data-component="actions"] {
       opacity: 1;
 
       @media (max-width: 40rem) {

packages/console/app/src/routes/download/index.css

@@ -403,7 +403,8 @@
       }
     }
 
-    &:hover [data-component="copy-status"] {
+    &:hover [data-component="copy-status"],
+    &:focus-visible [data-component="copy-status"] {
       opacity: 1;
     }
 

packages/console/app/src/style/component/focus.css

@@ -0,0 +1,9 @@
+/* Several controls reset their outline; give keyboard users a visible focus ring back. */
+[data-component="nav-mobile-toggle"]:focus-visible,
+[data-slot="command"]:focus-visible,
+[data-component="email"] [data-slot="form"] button:focus-visible,
+[data-component="cli-row"]:focus-visible,
+[data-component="brand-grid"] button:focus-visible {
+  outline: 2px solid var(--color-text-strong) !important;
+  outline-offset: 2px;
+}

packages/console/app/src/style/index.css

@@ -4,6 +4,7 @@
 
 @import "./component/button.css";
 @import "./component/faq.css";
+@import "./component/focus.css";
 
 @import "./reset.css";
 @import "./base.css";