Another A11y issues run (#1085)

* Update releases

* Handle duplicate TTS in search results in NVDA

* Make modals return tab focus

packages/playground/src/createUI.ts

@@ -1,10 +1,10 @@
 export interface UI {
   /** Show a text modal, with some buttons */
-  showModal: (message: string, subtitle?: string, buttons?: { [text: string]: string }) => void
+  showModal: (message: string, postFocalElement: HTMLElement, subtitle?: string, buttons?: { [text: string]: string }) => void
   /** A quick flash of some text */
   flashInfo: (message: string) => void
   /** Creates a modal container which you can put your own DOM elements inside */
-  createModalOverlay: (classes?: string) => HTMLDivElement
+  createModalOverlay: (postFocalElement: HTMLElement, classes?: string) => HTMLDivElement
 }
 
 export const createUI = (): UI => {
@@ -27,7 +27,7 @@ export const createUI = (): UI => {
     }, 1000)
   }
 
-  const createModalOverlay = (classList?: string) => {
+  const createModalOverlay = (postFocalElement: HTMLElement, classList?: string) => {
     document.querySelectorAll(".navbar-sub li.open").forEach(i => i.classList.remove("open"))
 
     const existingPopover = document.getElementById("popover-modal")
@@ -54,6 +54,7 @@ export const createUI = (): UI => {
       modal.parentNode!.removeChild(modal)
       // @ts-ignore
       document.onkeydown = oldOnkeyDown
+      postFocalElement.focus()
     }
 
     modalBG.onclick = close
@@ -68,8 +69,8 @@ export const createUI = (): UI => {
   }
 
   /** For showing a lot of code */
-  const showModal = (code: string, subtitle?: string, links?: { [text: string]: string }) => {
-    const modal = createModalOverlay()
+  const showModal = (code: string, postFocalElement: HTMLElement, subtitle?: string, links?: { [text: string]: string }) => {
+    const modal = createModalOverlay(postFocalElement)
 
     if (subtitle) {
       const titleElement = document.createElement("h3")
@@ -101,7 +102,7 @@ export const createUI = (): UI => {
     const close = modal.querySelector(".close") as HTMLElement
     close.addEventListener("keydown", e => {
       if (e.key === "Tab") {
-        ;(modal.querySelector("textarea") as any).focus()
+        ; (modal.querySelector("textarea") as any).focus()
         e.preventDefault()
       }
     })
@@ -125,7 +126,7 @@ export const createUI = (): UI => {
     const lastButton = buttons.item(buttons.length - 1) as HTMLElement
     lastButton.addEventListener("keydown", e => {
       if (e.key === "Tab") {
-        ;(document.querySelector(".close") as any).focus()
+        ; (document.querySelector(".close") as any).focus()
         e.preventDefault()
       }
     })

packages/playground/src/exporter.ts

@@ -252,25 +252,29 @@ ${codify(stringifiedCompilerOptions, "json")}
     } else {
       ui.showModal(
         body,
+        document.getElementById("exports-drpdown")!,
         "Issue too long to post automatically. Copy this text, then click 'Create New Issue' to begin.",
         {
           "Create New Issue": "https://github.com/Microsoft/TypeScript/issues/new",
         }
       )
       // document.querySelector("#popover-modal pre") && (document.querySelector("#popover-modal pre") as any).focus()
     }
+    return false
   }
 
   async function copyAsMarkdownIssue() {
     const markdown = await makeMarkdown()
-    ui.showModal(markdown, "Markdown for Issue")
+    ui.showModal(markdown, document.getElementById("exports-drpdown")!, "Markdown Version of Playgrund Code for GitHub Issue")
+    return false
   }
 
   function copyForChat() {
     const query = sandbox.createURLQueryWithCompilerOptions(sandbox)
     const fullURL = `${document.location.protocol}//${document.location.host}${document.location.pathname}${query}`
     const chat = `[Playground Link](${fullURL})`
-    ui.showModal(chat, "Markdown for chat")
+    ui.showModal(chat, document.getElementById("exports-drpdown")!, "Markdown for chat")
+    return false
   }
 
   function copyForChatWithPreview() {
@@ -282,7 +286,8 @@ ${codify(stringifiedCompilerOptions, "json")}
 
     const code = "```\n" + preview + "\n```\n"
     const chat = `${code}\n[Playground Link](${fullURL})`
-    ui.showModal(chat, "Markdown code")
+    ui.showModal(chat, document.getElementById("exports-drpdown")!, "Markdown code")
+    return false
   }
 
   return {

packages/sandbox/src/releases.json

@@ -1,6 +1,7 @@
 {
   "versions": [
     "4.0.2",
+    "3.9.7",
     "3.9.2",
     "3.8.3",
     "3.8.2",

packages/sandbox/src/releases.ts

@@ -2,6 +2,7 @@
 
 export const supportedReleases = [
   "4.0.2",
+  "3.9.7",
   "3.9.2",
   "3.8.3",
   "3.8.2",
@@ -18,6 +19,7 @@ export const supportedReleases = [
 
 export type ReleaseVersions =
   | "4.0.2"
+  | "3.9.7"
   | "3.9.2"
   | "3.8.3"
   | "3.8.2"

packages/typescriptlang-org/scripts/downloadSearchAssets.js

@@ -30,7 +30,7 @@ const go = async () => {
 
       const echoResultsToScreenReaders = fixTabbing.replace(
         'this.trigger("cursorMoved",updateInput)',
-        'this.trigger("cursorMoved", updateInput); $el.parent().children().forEach(s => s.setAttribute("role", undefined));$el.attr("role", "alert");'
+        'this.trigger("cursorMoved", updateInput); $el.parent().children().forEach(s => s.setAttribute("role", undefined)); console.log($el); ; $el.find(".algolia-docsearch-suggestion--wrapper").attr("role", "alert");'
       )
       return echoResultsToScreenReaders
     }