Merge pull request #2338 from RyanCavanaugh/v2

Fix various accessibility issues

Author: RyanCavanaugh

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

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 @@
       }
     }
   }
-}
+}

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}>
-              <button role="tab" 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)

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

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>
 

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

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,13 +271,15 @@
       margin: 0 0 0 0;
       padding: 1rem;
       flex-direction: column;
+
       h3 {
         font-size: 0.8rem;
       }
 
       #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;
   }
-}
+}

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>
@@ -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>
   )
 }