From 30ab2bf80b952a15dd3022a852d1a41d5c31a6fb Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 10:45:34 -0700
Subject: [PATCH 01/10] Fix localization copy

---
 packages/typescriptlang-org/src/copy/en/community.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/typescriptlang-org/src/copy/en/community.ts b/packages/typescriptlang-org/src/copy/en/community.ts
index 2d9cc242c6d1..fc5c0b67df10 100644
--- a/packages/typescriptlang-org/src/copy/en/community.ts
+++ b/packages/typescriptlang-org/src/copy/en/community.ts
@@ -1,8 +1,8 @@
 export const comCopy = {
-  com_layout_title: "How to set up TypeScript", // FIXME: Is this the right title for the community page?
+  com_layout_title: "TypeScript Community Resources",
   com_layout_description:
     "Connect with other TypeScripters online and offline.",
-  com_headline: "Connect with us", // FIXME: I think this is not used anywhere
+  com_headline: "Connect with us",
   com_connect_online: "Online",
   com_connect_online_description:
     " Tell us what’s working well, what you want to see added or improved, and find out about new updates.",

From 3c9338eface7cbe8dcf560c9d6e3a95ff2492e41 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 10:46:12 -0700
Subject: [PATCH 02/10] Add h1 block; fixes 1514624

---
 packages/typescriptlang-org/src/templates/pages/community.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/typescriptlang-org/src/templates/pages/community.tsx b/packages/typescriptlang-org/src/templates/pages/community.tsx
index ee025f0b4191..715ee9bc819b 100644
--- a/packages/typescriptlang-org/src/templates/pages/community.tsx
+++ b/packages/typescriptlang-org/src/templates/pages/community.tsx
@@ -40,6 +40,9 @@ export const Comm: React.FC<Props> = props => {
 
   return (
     <Layout title={i("com_layout_title")} description={i("com_layout_description")} lang={props.pageContext.lang}>
+      <div className="container community centered">
+        <h1>{i("com_headline")}</h1>
+      </div>
       <div className="raised main-content-block container community" style={{ marginTop: "80px" }}>
         <Row>
           <Col className="sidebar">

From 50e9cd8c42db6f74e60a53f4865300ede38ee07c Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 10:48:10 -0700
Subject: [PATCH 03/10] Make hidden element unfocusable; fixes 1514640

---
 .../src/components/layout/SiteFooter-PlaygroundSamples.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/typescriptlang-org/src/components/layout/SiteFooter-PlaygroundSamples.tsx b/packages/typescriptlang-org/src/components/layout/SiteFooter-PlaygroundSamples.tsx
index e3561e306dd3..e8dd3572c7f9 100644
--- a/packages/typescriptlang-org/src/components/layout/SiteFooter-PlaygroundSamples.tsx
+++ b/packages/typescriptlang-org/src/components/layout/SiteFooter-PlaygroundSamples.tsx
@@ -50,7 +50,7 @@ export const PlaygroundSamples = (props: Props) => {
   }, []);
 
   return (
-    <div id="playground-samples-popover" aria-hidden="true" aria-label="Code Samples Submenu">
+    <div id="playground-samples-popover" aria-hidden="true" aria-label="Code Samples Submenu" tabIndex={-1}>
       <RenderExamples defaultSection="TypeScript" sections={["JavaScript", "TypeScript"]} />
       <div className="arrow-down" />
     </div>)

From 9ec6706b4af104b17b36874db05df0cdd565782b Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 11:43:27 -0700
Subject: [PATCH 04/10] Use correct semantic HTML (ul -> div); fixes 1515362

---
 packages/playground/src/index.ts              |  32 +++---
 .../src/templates/play.scss                   | 105 ++++++++++++------
 .../typescriptlang-org/src/templates/play.tsx |  22 ++--
 3 files changed, 100 insertions(+), 59 deletions(-)

diff --git a/packages/playground/src/index.ts b/packages/playground/src/index.ts
index d8f1cfa02694..fc01ecec4c66 100644
--- a/packages/playground/src/index.ts
+++ b/packages/playground/src/index.ts
@@ -191,21 +191,21 @@ export const setupPlayground = (
       const lenses = !showFileCodeLens
         ? []
         : [
-            {
-              range: {
-                startLineNumber: 1,
-                startColumn: 1,
-                endLineNumber: 2,
-                endColumn: 1,
-              },
-              id: "implicit-filename-first",
-              command: {
-                id: "noop",
-                title: `// @filename: ${sandbox.filepath}`,
-              },
+          {
+            range: {
+              startLineNumber: 1,
+              startColumn: 1,
+              endLineNumber: 2,
+              endColumn: 1,
             },
-          ]
-      return { lenses, dispose: () => {} }
+            id: "implicit-filename-first",
+            command: {
+              id: "noop",
+              title: `// @filename: ${sandbox.filepath}`,
+            },
+          },
+        ]
+      return { lenses, dispose: () => { } }
     },
   })
 
@@ -338,7 +338,7 @@ export const setupPlayground = (
         a.parentElement!.classList.toggle("open")
         a.setAttribute("aria-expanded", "true")
 
-        const exampleContainer = a.closest("li")!.getElementsByTagName("ul").item(0)
+        const exampleContainer = a.closest("li")!.getElementsByClassName("dropdown-dialog").item(0) as HTMLElement
         if (!exampleContainer) return
 
         const firstLabel = exampleContainer.querySelector("label") as HTMLElement
@@ -359,7 +359,7 @@ export const setupPlayground = (
           if (lastButton) {
             redirectTabPressTo(lastButton, exampleContainer, ".examples-close")
           } else {
-            const sections = document.querySelectorAll("ul.examples-dropdown .section-content")
+            const sections = document.querySelectorAll(".dropdown-dialog .section-content")
             sections.forEach(s => {
               const buttons = s.querySelectorAll("a.example-link")
               const lastButton = buttons.item(buttons.length - 1) as HTMLElement
diff --git a/packages/typescriptlang-org/src/templates/play.scss b/packages/typescriptlang-org/src/templates/play.scss
index 6c35a1af949c..995a00729d52 100644
--- a/packages/typescriptlang-org/src/templates/play.scss
+++ b/packages/typescriptlang-org/src/templates/play.scss
@@ -8,7 +8,7 @@
   height: 3rem;
   position: relative;
 
-  > ul {
+  >ul {
     display: flex;
     padding: 0;
     margin: 0;
@@ -50,18 +50,27 @@
       color: var(--text-color);
     }
 
-    &.dropdown.open ul {
-      display: block;
+    &.dropdown.open {
+
+      ul,
+      .dropdown-dialog {
+        display: block;
+      }
     }
 
-    &.dropdown ul {
-      display: none;
+    &.dropdown {
 
-      position: absolute;
-      top: 100%;
-      left: 0;
-      z-index: 1;
-      float: left;
+      ul,
+      .dropdown-dialog {
+
+        display: none;
+
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1;
+        float: left;
+      }
     }
 
     // Menu items
@@ -120,7 +129,7 @@
     }
 
     // Examples dropdown
-    &.dropdown ul.examples-dropdown {
+    &.dropdown .dropdown-dialog {
       width: 800px;
       overflow-y: scroll;
       padding: 2rem;
@@ -148,7 +157,7 @@
         display: flex;
         flex-wrap: wrap;
 
-        > div {
+        >div {
           min-width: 200px;
           max-width: 400px;
 
@@ -182,7 +191,7 @@
               position: absolute;
             }
 
-            > span {
+            >span {
               font-family: $font-code;
               margin-left: 4px;
             }
@@ -215,23 +224,26 @@
 }
 
 // The subnav which starts with "Playground"
-main > nav {
+main>nav {
   position: relative;
 
-  .examples-dropdown {
+  .dropdown-dialog {
     padding-left: 0;
     background-color: var(--playground-dropdown-bg);
   }
 
-  > ul {
+  >ul {
     li.disabled {
       opacity: 0.5;
     }
+
     li.active {
+
       &:hover,
       &.open {
         background-color: var(--playground-dropdown-bg);
       }
+
       &.open .caret {
         transform: scaleY(-1);
       }
@@ -256,20 +268,23 @@ button.examples-close {
 
 // The toolbar for the editor
 main #editor-toolbar {
+
   // For the main buttons
-  > ul > li {
+  >ul>li {
     margin-left: 0px;
     margin-bottom: 0px;
 
-    > a {
+    >a {
       // Fix their vertical centering
       padding-top: 0.8rem;
+
       &:hover {
         @media (prefers-color-scheme: dark) {
           border-bottom: 1px solid white;
         }
       }
     }
+
     // Ensure menus use this button for
     // their x
     position: relative;
@@ -298,7 +313,7 @@ main #editor-toolbar {
   border-left: 4px solid transparent;
 }
 
-#editor-toolbar > ul > li > a:first-child {
+#editor-toolbar>ul>li>a:first-child {
   padding-left: 1rem;
 }
 
@@ -319,6 +334,7 @@ main #editor-toolbar {
       margin-top: 12px;
       margin-left: 12px;
     }
+
     ul {
       padding: 0;
 
@@ -341,6 +357,7 @@ main #editor-toolbar {
         a {
           display: block;
           text-decoration: none;
+
           svg {
             margin-right: 8px;
           }
@@ -352,10 +369,12 @@ main #editor-toolbar {
 
         &.selectable.selected {
           background-color: var(--blue-tinged-strong);
+
           // font-weight: bold;
           a {
             color: var(--text-color);
           }
+
           path {
             stroke: var(--text-color);
           }
@@ -548,6 +567,7 @@ main #editor-toolbar {
       margin-bottom: 10px;
 
       position: relative;
+
       ul.right {
         background-color: var(--playground-dropdown-bg);
 
@@ -629,6 +649,7 @@ main #editor-toolbar {
         overflow-x: auto;
         width: 100%;
         padding: 0 10px;
+
         code {
           font-family: $font-code;
           font-size: 14px;
@@ -776,19 +797,22 @@ main #editor-toolbar {
       span.ast-node-number {
         color: blue;
       }
+
       span.ast-node-string {
         color: green;
       }
+
       span.ast-node-boolean {
         color: red;
       }
+
       span.ast-node-undefined {
         color: brown;
       }
     }
 
     // When showing a list of children, always do block so that they are newlined
-    .ast-children > div.ast-tree-start {
+    .ast-children>div.ast-tree-start {
       display: block;
       margin-left: 12px;
       min-height: 1rem;
@@ -806,7 +830,7 @@ main #editor-toolbar {
       }
 
       &.open {
-        > a.node-name {
+        >a.node-name {
           top: 4px;
         }
       }
@@ -837,16 +861,17 @@ main #editor-toolbar {
 
     div.ast-tree-start.open {
       display: block;
-      > ul {
+
+      >ul {
         display: block;
       }
     }
 
-    div.ast-tree-start > a:not(:last-child):before {
+    div.ast-tree-start>a:not(:last-child):before {
       content: "+";
     }
 
-    div.ast-tree-start.open > a:not(:last-child):before {
+    div.ast-tree-start.open>a:not(:last-child):before {
       content: "-";
     }
   }
@@ -888,6 +913,7 @@ main #editor-toolbar {
       li {
         margin-bottom: 0.2rem;
       }
+
       span {
         margin-right: 1rem;
       }
@@ -895,9 +921,11 @@ main #editor-toolbar {
 
     li {
       list-style: none;
+
       span {
         font-weight: 600;
       }
+
       margin-bottom: 1rem;
     }
   }
@@ -911,6 +939,7 @@ main #editor-toolbar {
   0% {
     background-color: yellow;
   }
+
   100% {
     background-color: inherit;
   }
@@ -938,6 +967,7 @@ input.good {
 #playground-container .playground-plugins {
   &.featured {
     border: 1px solid lightgrey;
+
     li {
       border-bottom: 1px solid lightgrey;
     }
@@ -965,6 +995,7 @@ input.good {
   label {
     padding-left: 30px;
     padding-right: 10px;
+
     span {
       font-weight: 600;
     }
@@ -980,6 +1011,7 @@ input.good {
     text-align: center;
     text-decoration: none;
     line-height: 1rem;
+
     &:hover {
       background-color: #fcb7b7;
       color: red;
@@ -1058,13 +1090,11 @@ input.good {
 
     &.warning {
       color: white;
-      background: repeating-linear-gradient(
-        45deg,
-        #d63131,
-        #d63131 10px,
-        #c63131 10px,
-        #c63131 20px
-      );
+      background: repeating-linear-gradient(45deg,
+          #d63131,
+          #d63131 10px,
+          #c63131 10px,
+          #c63131 20px);
     }
   }
 }
@@ -1086,6 +1116,7 @@ input.good {
     position: relative;
     width: 80px;
     height: 80px;
+
     div {
       position: absolute;
       width: 16px;
@@ -1099,41 +1130,49 @@ input.good {
         left: 8px;
         animation-delay: 0s;
       }
+
       &:nth-child(2) {
         top: 8px;
         left: 32px;
         animation-delay: -0.4s;
       }
+
       &:nth-child(3) {
         top: 8px;
         left: 56px;
         animation-delay: -0.8s;
       }
+
       &:nth-child(4) {
         top: 32px;
         left: 8px;
         animation-delay: -0.4s;
       }
+
       &:nth-child(5) {
         top: 32px;
         left: 32px;
         animation-delay: -0.8s;
       }
+
       &:nth-child(6) {
         top: 32px;
         left: 56px;
         animation-delay: -1.2s;
       }
+
       &:nth-child(7) {
         top: 56px;
         left: 8px;
         animation-delay: -0.8s;
       }
+
       &:nth-child(8) {
         top: 56px;
         left: 32px;
         animation-delay: -1.2s;
       }
+
       &:nth-child(9) {
         top: 56px;
         left: 56px;
@@ -1144,10 +1183,12 @@ input.good {
 }
 
 @keyframes lds-grid {
+
   0%,
   100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.5;
   }
@@ -1184,4 +1225,4 @@ input.good {
 
 .monaco-list {
   background-color: var(--background-color);
-}
+}
\ No newline at end of file
diff --git a/packages/typescriptlang-org/src/templates/play.tsx b/packages/typescriptlang-org/src/templates/play.tsx
index 5e5e3783aea4..0320c3e42fb6 100644
--- a/packages/typescriptlang-org/src/templates/play.tsx
+++ b/packages/typescriptlang-org/src/templates/play.tsx
@@ -26,7 +26,7 @@ type Props = {
     lang: string
     examplesTOC: typeof import("../../static/js/examples/en.json")
     optionsSummary: any // this is just passed through to the playground JS library at this point
-    playgroundHandbookTOC: { docs : any[] }
+    playgroundHandbookTOC: { docs: any[] }
   }
 }
 
@@ -112,8 +112,8 @@ const Play: React.FC<Props> = (props) => {
       }
 
       // Allow prod/staging builds to set a custom commit prefix to bust caches
-      const {sandboxRoot, playgroundRoot, playgroundWorker} = getPlaygroundUrls()
-      
+      const { sandboxRoot, playgroundRoot, playgroundWorker } = getPlaygroundUrls()
+
       // @ts-ignore
       const re: any = global.require
       re.config({
@@ -157,7 +157,7 @@ const Play: React.FC<Props> = (props) => {
         container.style.height = `${height - Math.round(container.getClientRects()[0].top) - 18}px`
 
         const extension = (!!params.get("useJavaScript") ? "js" : params.get("filetype") || "ts") as any
-        const workerPath = params.get("multiFile") ?  `${document.location.origin + playgroundWorker}?filetype=${extension}` : undefined
+        const workerPath = params.get("multiFile") ? `${document.location.origin + playgroundWorker}?filetype=${extension}` : undefined
 
         // Create the sandbox
         const sandboxEnv = await sandbox.createTypeScriptSandbox({
@@ -167,7 +167,7 @@ const Play: React.FC<Props> = (props) => {
           filetype: extension,
           acquireTypes: !localStorage.getItem("disable-ata"),
           supportTwoslashCompilerOptions: true,
-          customTypeScriptWorkerPath: workerPath ,
+          customTypeScriptWorkerPath: workerPath,
           monacoSettings: {
             fontFamily: "var(--code-font)",
             fontLigatures: true
@@ -206,7 +206,7 @@ const Play: React.FC<Props> = (props) => {
 
           <li className="dropdown">
             <a id="compiler-options-button" href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="menu" aria-expanded="false" aria-controls="compiler-options-dropdown">{i("play_subnav_config")} <span className="caret"></span></a>
-            <ul id="compiler-options-dropdown" className="examples-dropdown" aria-labelledby="compiler-options-button">
+            <div id="compiler-options-dropdown" className="dropdown-dialog" aria-labelledby="compiler-options-button">
               <h3>{i("play_subnav_config")}</h3>
               <div className="info" id="config-container">
                 <button className="examples-close">{i("play_subnav_examples_close")}</button>
@@ -224,23 +224,23 @@ const Play: React.FC<Props> = (props) => {
                 </div>
 
               </div>
-            </ul>
+            </div>
           </li>
 
           <li className="dropdown">
             <a href="#" id="examples-button" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="menu" aria-expanded="false" aria-controls="examples">{i("play_subnav_examples")} <span className="caret"></span></a>
-            <ul className="examples-dropdown" id="examples" aria-labelledby="examples-button">
+            <div className="dropdown-dialog" id="examples" aria-labelledby="examples-button">
               <button className="examples-close" aria-label="Close dropdown" role="button">{i("play_subnav_examples_close")}</button>
               <RenderExamples defaultSection="TypeScript" sections={["JavaScript", "TypeScript"]} examples={props.pageContext.examplesTOC} locale={props.pageContext.lang} />
-            </ul>
+            </div>
           </li>
 
           <li className="dropdown">
             <a href="#" id="whatisnew-button" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="menu" aria-expanded="false" aria-controls="whatisnew">{i("play_subnav_whatsnew")} <span className="caret"></span></a>
-            <ul className="examples-dropdown" id="whatisnew" aria-labelledby="whatisnew-button">
+            <div className="dropdown-dialog" id="whatisnew" aria-labelledby="whatisnew-button">
               <button role="button" aria-label="Close dropdown" className="examples-close">{i("play_subnav_examples_close")}</button>
               <RenderExamples defaultSection="4.4" sections={["4.4", "4.3", "4.2", "4.1", "4.0", "3.8", "3.7", "Playground"]} examples={props.pageContext.examplesTOC} locale={props.pageContext.lang} />
-            </ul>
+            </div>
           </li>
 
           <li className="dropdown">

From 3f84cce764df06a2e74b1a62ca244573c9551ae8 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 11:47:11 -0700
Subject: [PATCH 05/10] Set tab role on proper child. Fixes 1515372; 1515405

---
 packages/typescriptlang-org/src/components/ShowExamples.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/ShowExamples.tsx b/packages/typescriptlang-org/src/components/ShowExamples.tsx
index 8630312eb2b3..eb2d23b49a5a 100644
--- a/packages/typescriptlang-org/src/components/ShowExamples.tsx
+++ b/packages/typescriptlang-org/src/components/ShowExamples.tsx
@@ -113,8 +113,8 @@ export const RenderExamples = (props: Props) => {
           const startOpen = section.id === props.defaultSection
           const selectedClass = startOpen ? " selected" : ""
           return (
-            <li key={section.name}>
-              <button role="tab" onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
+            <li key={section.name} role="tab">
+              <button onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
             </li>
           )
         }

From 9382eb81c22b74d6bb84df973a4c8565543b3f44 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 12:38:31 -0700
Subject: [PATCH 06/10] Use proper aria roles for version tabs. Fixes 1515425

---
 .../src/components/ShowExamples.scss          | 49 ++++++++++---------
 .../src/components/ShowExamples.tsx           |  8 ++-
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/ShowExamples.scss b/packages/typescriptlang-org/src/components/ShowExamples.scss
index 30116819454b..5127a2485e88 100644
--- a/packages/typescriptlang-org/src/components/ShowExamples.scss
+++ b/packages/typescriptlang-org/src/components/ShowExamples.scss
@@ -14,8 +14,28 @@
     color: var(--link-color);
   }
 
+  button.section-name {
+    font-size: 2rem;
+    font-weight: 600;
+
+    height: 2.8rem;
+    text-decoration: none;
+    border-bottom: none;
+    padding-bottom: 0.05rem;
+    margin-top: 0;
+    padding-top: 0;
+    margin-right: 1rem;
+    border: none;
+    background-color: transparent;
+    color: var(--text-color);
+  }
+
+  button.section-name.selected {
+    border-bottom: $ts-main-blue-color 2px solid;
+  }
+
   // The titles of the sections
-  > ol {
+  >ol {
     padding-left: 0;
 
     li {
@@ -28,26 +48,6 @@
         background-color: transparent;
       }
     }
-
-    button.section-name {
-      font-size: 2rem;
-      font-weight: 600;
-
-      height: 2.8rem;
-      text-decoration: none;
-      border-bottom: none;
-      padding-bottom: 0.05rem;
-      margin-top: 0;
-      padding-top: 0;
-      margin-right: 1rem;
-      border: none;
-      background-color: transparent;
-      color: var(--text-color);
-    }
-
-    button.section-name.selected {
-      border-bottom: $ts-main-blue-color 2px solid;
-    }
   }
 
   ol {
@@ -56,11 +56,11 @@
     padding-left: 0;
   }
 
-  > div.section-content {
+  >div.section-content {
     flex-wrap: wrap;
     display: flex;
 
-    > p > a {
+    >p>a {
       display: inline-block;
       color: $ts-main-blue-color;
       padding: 0;
@@ -118,6 +118,7 @@
             &.done {
               background-color: $ts-main-blue-darker-color;
             }
+
             &.changed {
               border: $ts-main-blue-darker-color 1px solid;
             }
@@ -126,4 +127,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/typescriptlang-org/src/components/ShowExamples.tsx b/packages/typescriptlang-org/src/components/ShowExamples.tsx
index eb2d23b49a5a..92443572919d 100644
--- a/packages/typescriptlang-org/src/components/ShowExamples.tsx
+++ b/packages/typescriptlang-org/src/components/ShowExamples.tsx
@@ -108,18 +108,16 @@ export const RenderExamples = (props: Props) => {
   const sections = props.sections.map(sectionID => locale.sections.find(localeSection => sectionID === localeSection.id) || english.sections.find(localeSection => sectionID === localeSection.id))
   return (
     <div className="examples">
-      <ol role="tablist">
+      <div role="tablist">
         {sections.map(section => {
           const startOpen = section.id === props.defaultSection
           const selectedClass = startOpen ? " selected" : ""
           return (
-            <li key={section.name} role="tab">
-              <button onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
-            </li>
+            <button key={section.name} role="tab" onClick={buttonOnClick(section.id.toLowerCase().replace(".", "-"))} className={"section-name button " + selectedClass} aria-selected={selectedClass.length ? "true" : "false"} >{section.name}</button>
           )
         }
         )}
-      </ol>
+      </div>
 
       {sections.map(section => {
         const sectionDict = sortedSectionsDictionary(locale, section)

From b3d296d9325672b7fe2eaeb7b00f4f0f428f2fc1 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 13:10:56 -0700
Subject: [PATCH 07/10] Improve contrast ratios throughout; fixes 1515465

h2 -> h1; fixes 1515494
---
 .../src/templates/documentation.scss          | 28 +++++++++----
 .../src/templates/documentation.tsx           | 24 +++++------
 .../src/templates/markdown-twoslash.scss      | 41 +++++++++++++++----
 3 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/packages/typescriptlang-org/src/templates/documentation.scss b/packages/typescriptlang-org/src/templates/documentation.scss
index c18b4a48b4f1..636764604b1f 100644
--- a/packages/typescriptlang-org/src/templates/documentation.scss
+++ b/packages/typescriptlang-org/src/templates/documentation.scss
@@ -1,13 +1,11 @@
 @import "../style/globals.scss";
 
 #beta {
-  background: repeating-linear-gradient(
-    45deg,
-    #9b9a4e,
-    #9b9a4e 10px,
-    #6e6a33 10px,
-    #6e6a33 20px
-  );
+  background: repeating-linear-gradient(45deg,
+      #9b9a4e,
+      #9b9a4e 10px,
+      #6e6a33 10px,
+      #6e6a33 20px);
   background-color: "#c63131";
   text-align: center;
   color: white;
@@ -32,7 +30,7 @@
   }
 
   // Page title
-  & > h2 {
+  &>h1 {
     font-size: 3.5rem;
     line-height: 3.5rem;
     font-weight: 400;
@@ -76,9 +74,11 @@
     nav {
       position: sticky;
       top: 30px;
+
       &.deprecated {
         top: 7rem;
       }
+
       margin-bottom: 1rem;
     }
 
@@ -120,6 +120,7 @@
     }
 
     .like-dislike-subnav {
+
       #like-button,
       #dislike-button {
         cursor: pointer;
@@ -130,6 +131,7 @@
   .preamble a {
     color: var(--text-color);
   }
+
   .justify-between {
     justify-content: space-between;
   }
@@ -269,6 +271,7 @@
       margin: 0 0 0 0;
       padding: 1rem;
       flex-direction: column;
+
       h3 {
         font-size: 0.8rem;
       }
@@ -276,6 +279,7 @@
       #deprecated-icon {
         margin-right: 1rem;
       }
+
       #deprecated-action {
         margin-top: 1rem;
       }
@@ -325,24 +329,30 @@
 
     tr {
       width: 100%;
+
       p {
         margin: 0;
         padding: 0;
       }
+
       code {
         word-wrap: normal;
       }
     }
+
     // Override the default stripes
     tr.odd {
       background-color: var(--background-color) !important;
     }
+
     tr.even {
       background-color: var(--background-minor-highlight-color) !important;
     }
+
     ul {
       margin: 0;
       padding: 0;
+
       li {
         list-style: none;
         margin: 0;
@@ -446,4 +456,4 @@
     -webkit-animation: 0.1s ease forwards;
     animation: 0.1s ease forwards;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
index 0cae8d84ece4..a678d8cc478e 100644
--- a/packages/typescriptlang-org/src/templates/documentation.tsx
+++ b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -138,21 +138,21 @@ const HandbookTemplate: React.FC<Props> = (props) => {
             </>
           }
 
-          {showExperimental && 
-           <div id="deprecated-header">
-                <div id="deprecated-content">
-                  <div id="deprecated-icon">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="black" /><path d="M8 3V9" stroke="black" /><path d="M8 11L8 13" stroke="black" /></svg>
-                  </div>
-                  <div>
-                    <h3>{i("handb_experimental_title")}</h3>
-                    <p>{i("handb_experimental_subtitle")}</p>
-                  </div>
+          {showExperimental &&
+            <div id="deprecated-header">
+              <div id="deprecated-content">
+                <div id="deprecated-icon">
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7.5" stroke="black" /><path d="M8 3V9" stroke="black" /><path d="M8 11L8 13" stroke="black" /></svg>
                 </div>
+                <div>
+                  <h3>{i("handb_experimental_title")}</h3>
+                  <p>{i("handb_experimental_subtitle")}</p>
+                </div>
+              </div>
             </div>
           }
 
-          <h2>{post.frontmatter.title}</h2>
+          <h1>{post.frontmatter.title}</h1>
           {post.frontmatter.preamble && <div className="preamble" dangerouslySetInnerHTML={{ __html: post.frontmatter.preamble }} />}
           <article>
             <div className="whitespace raised">
@@ -190,7 +190,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
           <Contributors lang={props.pageContext.lang} i={i} path={props.pageContext.repoPath} lastEdited={props.pageContext.modifiedTime} />
         </div>
       </section>
-    <Popup {...showPopup}/>
+      <Popup {...showPopup} />
     </Layout>
   )
 }
diff --git a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss
index 62ced3218a70..dc10d9cd644a 100644
--- a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss
+++ b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss
@@ -30,24 +30,30 @@ pre {
   overflow-x: auto;
   position: relative;
 }
+
 pre.shiki {
   overflow-x: auto;
 }
+
 pre.shiki:hover .dim {
   opacity: 1;
 }
+
 pre.shiki div.dim {
-  opacity: 0.5;
+  opacity: 0.9;
 }
+
 pre.shiki div.dim,
 pre.shiki div.highlight {
   margin: 0;
   padding: 0;
 }
+
 pre.shiki div.highlight {
   opacity: 1;
   background-color: #f1f8ff;
 }
+
 pre.shiki div.line {
   min-height: 1rem;
 }
@@ -87,8 +93,9 @@ pre.twoslash data-lsp:hover::before {
 pre .code-container {
   overflow: auto;
 }
+
 /* The try button */
-pre .code-container > a {
+pre .code-container>a {
   position: absolute;
   right: 8px;
   bottom: 8px;
@@ -101,16 +108,19 @@ pre .code-container > a {
   transition-timing-function: ease;
   transition: opacity 0.3s;
 }
+
 /* Respect no animations */
 @media (prefers-reduced-motion: reduce) {
-  pre .code-container > a {
+  pre .code-container>a {
     transition: none;
   }
 }
-pre .code-container > a:hover {
+
+pre .code-container>a:hover {
   color: white;
   background-color: #719af4;
 }
+
 pre .code-container:hover a {
   opacity: 1;
 }
@@ -121,6 +131,7 @@ pre code {
   white-space: pre;
   -webkit-overflow-scrolling: touch;
 }
+
 pre code a {
   text-decoration: none;
 }
@@ -148,6 +159,7 @@ pre .error-behind {
   white-space: pre-wrap;
   display: block;
 }
+
 pre .error {
   position: absolute;
   background-color: #fee;
@@ -158,14 +170,17 @@ pre .error {
   align-items: center;
   color: black;
 }
+
 pre .error .code {
   display: none;
 }
+
 pre .error-behind {
   user-select: none;
   visibility: transparent;
   color: #fee;
 }
+
 /* Queries */
 pre .arrow {
   /* Transparent background */
@@ -181,6 +196,7 @@ pre .arrow {
   height: 8px;
   width: 8px;
 }
+
 pre .popover {
   margin-bottom: 10px;
   background-color: #eee;
@@ -189,13 +205,14 @@ pre .popover {
   margin-top: 10px;
   border-radius: 3px;
 }
+
 /* Completion */
 pre .inline-completions ul.dropdown {
   display: inline-block;
   position: absolute;
   width: 240px;
-  background-color: gainsboro;
-  color: grey;
+  background-color: #E7E7E7;
+  color: #333;
   padding-top: 4px;
   font-family: var(--code-font);
   font-size: 0.8rem;
@@ -203,6 +220,7 @@ pre .inline-completions ul.dropdown {
   padding: 0;
   border-left: 4px solid #4b9edd;
 }
+
 pre .inline-completions ul.dropdown::before {
   background-color: #4b9edd;
   width: 2px;
@@ -211,27 +229,33 @@ pre .inline-completions ul.dropdown::before {
   left: -3px;
   content: " ";
 }
+
 pre .inline-completions ul.dropdown li {
   overflow-x: hidden;
   padding-left: 4px;
   margin-bottom: 4px;
 }
+
 pre .inline-completions ul.dropdown li.deprecated {
   text-decoration: line-through;
 }
+
 pre .inline-completions ul.dropdown li span.result-found {
-  color: #4b9edd;
+  color: #2265a5;
 }
+
 pre .inline-completions ul.dropdown li span.result {
   width: 100px;
   color: black;
   display: inline-block;
 }
+
 .dark-theme .markdown pre {
   background-color: #d8d8d8;
   border-color: #ddd;
   filter: invert(98%) hue-rotate(180deg);
 }
+
 data-lsp {
   /* Ensures there's no 1px jump when the hover happens */
   border-bottom: 1px dotted transparent;
@@ -239,6 +263,7 @@ data-lsp {
   transition-timing-function: ease;
   transition: border-color 0.3s;
 }
+
 /* Respect people's wishes to not have animations */
 @media (prefers-reduced-motion: reduce) {
   data-lsp {
@@ -273,4 +298,4 @@ data-lsp {
       }
     }
   }
-}
+}
\ No newline at end of file

From 760f5f6b4401a18f612ab0338697064ccb028857 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 13:16:57 -0700
Subject: [PATCH 08/10] Paint link icon in white in high contrast mode; fixes
 1515516

---
 .../src/templates/pages/css/documentation.scss            | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/typescriptlang-org/src/templates/pages/css/documentation.scss b/packages/typescriptlang-org/src/templates/pages/css/documentation.scss
index 8127e03ae90f..4e8f3d765e63 100644
--- a/packages/typescriptlang-org/src/templates/pages/css/documentation.scss
+++ b/packages/typescriptlang-org/src/templates/pages/css/documentation.scss
@@ -28,6 +28,7 @@
     &:hover {
       background-color: $ts-light-bg-grey;
     }
+
     &:active {
       background-color: $ts-light-bg-grey-highlight-color;
       margin-bottom: 19px;
@@ -36,6 +37,10 @@
 
   @media screen and (-ms-high-contrast: active) {
     border: 1px solid grey;
+
+    svg path {
+      fill: white;
+    }
   }
 
   &.headline {
@@ -99,6 +104,7 @@
 
   &.wide {
     justify-content: space-between;
+
     .item {
       min-width: 240px;
     }
@@ -154,4 +160,4 @@ div#like-dislike-subnav {
       }
     }
   }
-}
+}
\ No newline at end of file

From 06e32d5d6cc8db47b206610766331a9b7fdfeab9 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 13:24:15 -0700
Subject: [PATCH 09/10] Remove like/dislike from tab order when not visible

Fixes 1515517 and 1515523
---
 packages/typescriptlang-org/src/templates/documentation.tsx     | 2 +-
 .../src/templates/scripts/setupLikeDislikeButtons.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/typescriptlang-org/src/templates/documentation.tsx b/packages/typescriptlang-org/src/templates/documentation.tsx
index a678d8cc478e..7b698c2e1fd7 100644
--- a/packages/typescriptlang-org/src/templates/documentation.tsx
+++ b/packages/typescriptlang-org/src/templates/documentation.tsx
@@ -96,7 +96,7 @@ const HandbookTemplate: React.FC<Props> = (props) => {
       <section id="doc-layout" >
         <SidebarToggleButton />
 
-        <div className="page-popup" id="page-helpful-popup" style={{ opacity: 0 }}>
+        <div className="page-popup" id="page-helpful-popup" style={{ opacity: 0, display: "none" }}>
           <p>Was this page helpful?</p>
           <div>
             <button className="first" id="like-button-popup" title="Like this page"><LikeUnfilledSVG /></button>
diff --git a/packages/typescriptlang-org/src/templates/scripts/setupLikeDislikeButtons.ts b/packages/typescriptlang-org/src/templates/scripts/setupLikeDislikeButtons.ts
index 027270497f81..d0677590d3f0 100644
--- a/packages/typescriptlang-org/src/templates/scripts/setupLikeDislikeButtons.ts
+++ b/packages/typescriptlang-org/src/templates/scripts/setupLikeDislikeButtons.ts
@@ -55,7 +55,7 @@ export const setupLikeDislikeButtons = (slug: string, i: any) => {
 
       const popupOpacity = bottomOfWindow ? "1" : "0"
       if (popup.style.opacity != popupOpacity) {
-        // popup.style.display = bottomOfWindow ? "block" : "none"
+        popup.style.display = bottomOfWindow ? "block" : "none"
         popup.style.opacity = popupOpacity
       }
 

From 29d2703503c59c314ae8a0bd701cc3ff1b2afa67 Mon Sep 17 00:00:00 2001
From: Ryan Cavanaugh <ryanca@microsoft.com>
Date: Thu, 14 Apr 2022 13:33:01 -0700
Subject: [PATCH 10/10] Remove duplicate nav element; fixes 1522530

---
 .../typescriptlang-org/src/components/layout/TopNav.tsx    | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/typescriptlang-org/src/components/layout/TopNav.tsx b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
index c90245dfb05d..12dab9f44515 100644
--- a/packages/typescriptlang-org/src/components/layout/TopNav.tsx
+++ b/packages/typescriptlang-org/src/components/layout/TopNav.tsx
@@ -30,7 +30,7 @@ export const SiteNav = (props: Props) => {
 
     // @ts-ignore - this comes from the script above
     docsearch({
-      appId:"BGCDYOIYZ5",
+      appId: "BGCDYOIYZ5",
       apiKey: '37ee06fa68db6aef451a490df6df7c60',
       indexName: 'typescriptlang',
       inputSelector: '.search input',
@@ -99,8 +99,7 @@ export const SiteNav = (props: Props) => {
 
 
         <div className="right above-small">
-
-          <nav role="navigation" className="search-section">
+          <div className="search-section">
             <OpenInMyLangQuickJump />
             <div className="nav-item">
               <form id="search-form" className="search top-nav" role="search">
@@ -109,7 +108,7 @@ export const SiteNav = (props: Props) => {
                 <input type="submit" style={{ display: "none" }} />
               </form>
             </div>
-          </nav>
+          </div>
         </div>
       </div>