From a4163798cd19fb252f22ed95c56227195a23744e Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Sat, 17 Oct 2026 16:56:12 -0700
Subject: [PATCH] fix(console): make the mobile menu and copy buttons keyboard
 accessible (#56591)

---
 packages/console/app/src/component/header.tsx     | 15 ++++++++++++++-
 packages/console/app/src/routes/brand/index.css   |  3 ++-
 .../console/app/src/routes/download/index.css     |  3 ++-
 .../console/app/src/style/component/focus.css     |  9 +++++++++
 packages/console/app/src/style/index.css          |  1 +
 5 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/console/app/src/style/component/focus.css

diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx
index bdef0403e5c..c96fe74ff77 100644
--- a/packages/console/app/src/component/header.tsx
+++ b/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)}
diff --git a/packages/console/app/src/routes/brand/index.css b/packages/console/app/src/routes/brand/index.css
index 0e39f3742f2..7fc2e743e74 100644
--- a/packages/console/app/src/routes/brand/index.css
+++ b/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) {
diff --git a/packages/console/app/src/routes/download/index.css b/packages/console/app/src/routes/download/index.css
index 5e6cb1c9bdc..440a5c66422 100644
--- a/packages/console/app/src/routes/download/index.css
+++ b/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;
     }
 
diff --git a/packages/console/app/src/style/component/focus.css b/packages/console/app/src/style/component/focus.css
new file mode 100644
index 00000000000..92b7f30da4e
--- /dev/null
+++ b/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;
+}
diff --git a/packages/console/app/src/style/index.css b/packages/console/app/src/style/index.css
index 99b71870b8a..acc41c16cb0 100644
--- a/packages/console/app/src/style/index.css
+++ b/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";