From 9bc64535729a69ead5db748116f1a1e646fa2ba3 Mon Sep 17 00:00:00 2001 From: Navya Singh Date: Tue, 17 Mar 2026 15:46:37 -0700 Subject: [PATCH] fix: associate category labels with checkbox groups in playground config Add role='group' and aria-labelledby to the
    elements containing compiler option checkboxes in the TypeScript Playground TS Config panel. Each category heading (

    ) now has a unique id, and the associated checkbox list references it via aria-labelledby, ensuring screen readers can programmatically determine the relationship between the visible category label and its group of checkboxes. This fixes WCAG 1.3.1 (Info and Relationships) for all 9 category groups: Output Formatting, Emit, Compiler Diagnostics, Interop Constraints, Language and Environment, Type Checking, Modules, Projects, and Backwards Compatibility. Fixes Bug 2737338 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- packages/playground/src/createConfigDropdown.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/playground/src/createConfigDropdown.ts b/packages/playground/src/createConfigDropdown.ts index 11be14f640cc..f67f8e38aca1 100644 --- a/packages/playground/src/createConfigDropdown.ts +++ b/packages/playground/src/createConfigDropdown.ts @@ -106,7 +106,11 @@ export const createConfigDropdown = (sandbox: Sandbox, monaco: Monaco) => { .forEach(categoryID => { const categoryDiv = document.createElement("div") const header = document.createElement("h4") + const headerId = "category-header-" + categoryID + header.id = headerId const ol = document.createElement("ol") + ol.setAttribute("role", "group") + ol.setAttribute("aria-labelledby", headerId) Object.keys(categoryMap[categoryID]).forEach(optID => { const optSummary = categoryMap[categoryID][optID]