From 829031be748cb6445d622a9593c651e4a0ce4198 Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Tue, 17 Mar 2026 14:29:10 -0700
Subject: [PATCH] fix: prevent keyboard focus on hidden sidebar items

When the sidebar is collapsed on small screens, its interactive elements
(links, buttons) could still receive keyboard focus because they were only
hidden via margin-left offset.

Changes:
- Add visibility: hidden to collapsed sidebar state and visibility: visible
  to the .show state in Sidebar.scss for CSS-level hiding
- Use the inert attribute in the JS toggle handler to immediately remove
  sidebar items from the tab order and accessibility tree on close,
  eliminating the 300ms transition window where items remain focusable
- Move focus back to the toggle button when closing the sidebar
- Add a useEffect in the Sidebar component to set inert initially on
  mobile viewports, with a media query listener for responsive behavior

Fixes Bug 2737380

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/layout/Sidebar.scss        |  2 ++
 .../src/components/layout/Sidebar.tsx         | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.scss b/packages/typescriptlang-org/src/components/layout/Sidebar.scss
index 0f1eaa478be9..842e762981e9 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.scss
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.scss
@@ -209,6 +209,7 @@ nav#sidebar {
     z-index: $z-index-for-handbook-nav;
     margin-left: -800px;
     width: 90%;
+    visibility: hidden;
 
     ul {
       padding-bottom: 200px;
@@ -223,6 +224,7 @@ nav#sidebar {
 
     &.show {
       margin-left: 0px;
+      visibility: visible;
     }
 
     & > ul > li,
diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
index 3d8d830fe7ea..348dd45d89cf 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
@@ -44,11 +44,15 @@ const toggleNavigationSection: MouseEventHandler = (event) => {
 export const SidebarToggleButton = () => {
   const toggleClick = () => {
     const navSidebar = document.getElementById("sidebar")
+    const toggleButton = document.getElementById("small-device-button-sidebar")
     const isOpen = navSidebar?.classList.contains("show")
     if (isOpen) {
       navSidebar?.classList.remove("show")
+      navSidebar?.setAttribute("inert", "")
+      toggleButton?.focus()
     } else {
       navSidebar?.classList.add("show")
+      navSidebar?.removeAttribute("inert")
     }
   }
 
@@ -127,6 +131,23 @@ export const Sidebar = (props: Props) => {
     }
   }
 
+  useEffect(() => {
+    const sidebar = document.getElementById("sidebar")
+    if (!sidebar) return
+
+    const mq = window.matchMedia("(max-width: 800px)")
+    const sync = () => {
+      if (mq.matches && !sidebar.classList.contains("show")) {
+        sidebar.setAttribute("inert", "")
+      } else {
+        sidebar.removeAttribute("inert")
+      }
+    }
+    sync()
+    mq.addEventListener("change", sync)
+    return () => mq.removeEventListener("change", sync)
+  }, [])
+
   return (
     <nav aria-label="sidebar" id="sidebar">
       <ul>