fix accessibility bug 2605237 a11y aria required children (#3598)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: navya9singh

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">

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>
 

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;
           }