From 3c28dd1d2cc00cfb4e4237fda26fadbb982ee152 Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Tue, 17 Mar 2026 12:29:08 -0700
Subject: [PATCH] fix: add aria-label to sidebar toggle button for
 accessibility

The #small-device-button-sidebar button only contained an SVG icon with
no discernible text for screen readers. Added aria-label='Toggle sidebar
navigation' to satisfy WCAG button-name rule.

Fixes ADO Bug 2737374

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 packages/typescriptlang-org/src/components/layout/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
index 3d8d830fe7ea..322068aef708 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
@@ -54,7 +54,7 @@ export const SidebarToggleButton = () => {
 
 
   return (
-    <button id="small-device-button-sidebar" onClick={toggleClick}>
+    <button id="small-device-button-sidebar" aria-label="Toggle sidebar navigation" onClick={toggleClick}>
       <svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m0 1c0-.552285.447715-1 1-1h24c.5523 0 1 .447715 1 1v3h-26z" /><path d="m0 11h13 13v4h-26z" /><path d="m0 22h26v3c0 .5523-.4477 1-1 1h-24c-.552284 0-1-.4477-1-1z" /></g></svg>
     </button>
   )