From 2db978b8eee319e1b927caabc72a208b3cbd9a3f Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Mon, 29 Jun 2026 15:11:57 -0700
Subject: [PATCH 1/2] fix(a11y): remove incorrect role=tablist pattern from top
 navigation

Bug: 2605237 - aria-required-children violation on ul[role=tablist]

Root cause: TopNav.tsx used role='tablist' on the <ul>, role='none
presentation' on each <li>, and aria-owns to reference inner <a role='tab'>
elements. This pattern is broken because:
  - role='none' is not honored when a descendant is focusable (<a href>)
  - axe-core 4.10.2 flags li[tabindex] as 'children not allowed' in tablist
  - aria-owns is redundant when elements are already DOM descendants
  - The IDs (tab1-tab6) are not referenced by any JavaScript

Fix: Remove role='tablist', aria-owns, aria-busy, role='none presentation',
and role='tab'. The <nav aria-label='top menu'> wrapper already provides
correct semantics. Gatsby's Link sets aria-current='page' on the active item.

Affects ALL pages (homepage, playground, docs, etc.) since TopNav is global.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/layout/TopNav.tsx               | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.tsx b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
index 02036b4402c0..ff0e26fa2f82 100644
--- a/packages/typescriptlang-org/src/components/layout/TopNav.tsx
+++ b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
@@ -99,13 +99,13 @@ export const SiteNav = (props: Props) => {
           </IntlLink>
 
           <nav aria-label="top menu">
-            <ul role="tablist" aria-owns="tab1 tab2 tab3 tab4 tab5 tab6" aria-busy="true">
-            <li className="nav-item hide-small" role="none presentation" ><IntlLink id="tab1" role="tab" to="/download">{i("nav_download")}</IntlLink></li>
-              <li className="nav-item" role="none presentation"><IntlLink id="tab2" role="tab" to="/docs/"><span>{i("nav_documentation_short")}</span></IntlLink></li>
-              <li className="nav-item show-only-large" role="none presentation"><IntlLink id="tab3" role="tab" to="/docs/handbook/intro.html">{i("nav_handbook")}</IntlLink></li>
-              <li className="nav-item" role="none presentation"><IntlLink id="tab4" role="tab" to="/community">{i("nav_community")}</IntlLink></li>
-              <li className="nav-item show-only-largest" role="none presentation"><IntlLink id="tab5" role="tab" to="/play/">{i("nav_playground")}</IntlLink></li>
-              <li className="nav-item" role="none presentation"><IntlLink id="tab6" role="tab" to="/tools">{i("nav_tools")}</IntlLink></li>
+            <ul>
+            <li className="nav-item hide-small"><IntlLink id="tab1" to="/download">{i("nav_download")}</IntlLink></li>
+              <li className="nav-item"><IntlLink id="tab2" to="/docs/"><span>{i("nav_documentation_short")}</span></IntlLink></li>
+              <li className="nav-item show-only-large"><IntlLink id="tab3" to="/docs/handbook/intro.html">{i("nav_handbook")}</IntlLink></li>
+              <li className="nav-item"><IntlLink id="tab4" to="/community">{i("nav_community")}</IntlLink></li>
+              <li className="nav-item show-only-largest"><IntlLink id="tab5" to="/play/">{i("nav_playground")}</IntlLink></li>
+              <li className="nav-item"><IntlLink id="tab6" to="/tools">{i("nav_tools")}</IntlLink></li>
             </ul>
           </nav>
 

From 9fb9d7e1b6f18aa055f0eaf00c9597ca02588bbd Mon Sep 17 00:00:00 2001
From: Navya Singh <navyasingh@microsoft.com>
Date: Tue, 30 Jun 2026 11:57:25 -0700
Subject: [PATCH 2/2] fix(a11y): fix aria-required-children in editor-tabs on
 homepage

Same broken pattern as TopNav: ul.editor-tabs used role='tablist' with
li[role='none presentation'] wrappers around a[role='tab'] elements.
role='none' is ignored by axe when descendants are focusable (<a href>),
so the li children were flagged as not allowed in a tablist.

Fix: give <li> elements role='tab' + aria-selected + tabIndex directly,
removing the inner <a> wrappers and the redundant aria-owns/aria-busy.
Update CSS to apply color/cursor directly to li instead of li > a.

This clears the aria-required-children axe violation on the homepage,
confirmed by axe-core 4.x programmatic FastPass check.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/index/EditorExamples.tsx           | 11 +++++------
 .../src/templates/pages/css/index.scss                |  7 +++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
index 48c23c96ab51..c665ad7f0519 100644
--- a/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
+++ b/packages/typescriptlang-org/src/components/index/EditorExamples.tsx
@@ -41,12 +41,11 @@ export const EditorExamples = () => {
       <div className="slides">
 
         <div className="editor ts front">
-          <ul className="editor-tabs" role="tablist" aria-owns="tabId1 tabId2 tabId3 tabId4" aria-busy="true">
-            <li className={index === 0 ? "selected" : ""} role="none presentation"><a id="tabId1" href="#" role="tab" onClick={goto(0)} aria-selected={index === 0}>{i("index_2_tab_1")}</a></li>
-            <li className={index === 1 ? "selected" : ""} role="none presentation"><a id="tabId2" href="#" role="tab" onClick={goto(1)} aria-selected={index === 1}>{i("index_2_tab_2")}</a></li>
-            <li className={index === 2 ? "selected" : ""} role="none presentation"><a id="tabId3" href="#" role="tab" onClick={goto(2)} aria-selected={index === 2}>{i("index_2_tab_3")}</a></li>
-            <li className={index === 3 ? "selected" : ""} role="none presentation"><a id="tabId4" href="#" role="tab" onClick={goto(3)} aria-selected={index === 3}>{i("index_2_tab_4")}</a></li>
-            {/* <li className={index === 4 ? "selected" : ""} ><a href="#" onClick={goto(4) }>{i("index_2_tab_5")}</a></li> */}
+          <ul className="editor-tabs" role="tablist">
+            <li id="tabId1" className={index === 0 ? "selected" : ""} role="tab" tabIndex={index === 0 ? 0 : -1} onClick={goto(0)} aria-selected={index === 0}>{i("index_2_tab_1")}</li>
+            <li id="tabId2" className={index === 1 ? "selected" : ""} role="tab" tabIndex={index === 1 ? 0 : -1} onClick={goto(1)} aria-selected={index === 1}>{i("index_2_tab_2")}</li>
+            <li id="tabId3" className={index === 2 ? "selected" : ""} role="tab" tabIndex={index === 2 ? 0 : -1} onClick={goto(2)} aria-selected={index === 2}>{i("index_2_tab_3")}</li>
+            <li id="tabId4" className={index === 3 ? "selected" : ""} role="tab" tabIndex={index === 3 ? 0 : -1} onClick={goto(3)} aria-selected={index === 3}>{i("index_2_tab_4")}</li>
           </ul>
           <div className="content" id="above-the-fold-headline-code">
             <div className="text">
diff --git a/packages/typescriptlang-org/src/templates/pages/css/index.scss b/packages/typescriptlang-org/src/templates/pages/css/index.scss
index 929591f5e180..6476dd5eafbd 100644
--- a/packages/typescriptlang-org/src/templates/pages/css/index.scss
+++ b/packages/typescriptlang-org/src/templates/pages/css/index.scss
@@ -352,10 +352,9 @@ $headline-foreground-bg: white;
         li {
           list-style: none;
           padding: 10px;
-          a {
-            text-decoration: none;
-            color: white;
-          }
+          cursor: pointer;
+          text-decoration: none;
+          color: white;
           &.selected {
             text-decoration: underline;
           }