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>

Author: navya9singh

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,

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>