docs(a11y): improve api reference accessibility (#4554)

* docs(a11y): improve docs accessibility * docs(theme): simplification
aws · Mar 21, 2023 · 435c4ab · 435c4ab
1 parent 81e6cfe
commit 435c4ab
Showing 1 changed file with 107 additions and 20 deletions.
diff --git a/packages/core-theme-documentation-generator/src/theme.tsx b/packages/core-theme-documentation-generator/src/theme.tsx
@@ -97,7 +97,64 @@ class SdkThemeContext extends DefaultThemeRenderContext {
           liveRegion.innerText = resultText
         }
 
-        searchField.addEventListener('keydown', debounce(handleResults))
+        searchField.addEventListener('keydown', debounce(handleResults));
+
+        // ADD ARIA-TAGS TO SHIELDS/BADGES
+
+        function waitForElm(selector) {
+          return new Promise(resolve => {
+              if (document.querySelector(selector)) {
+                  return resolve(document.querySelector(selector));
+              }
+      
+              const observer = new MutationObserver(mutations => {
+                  if (document.querySelector(selector)) {
+                      resolve(document.querySelector(selector));
+                      observer.disconnect();
+                  }
+              });
+      
+              observer.observe(document.body, {
+                  childList: true,
+                  subtree: true
+              });
+          });
+      }
+
+      // wait for container to exist
+      waitForElm('.container-main')
+        .then(elm => {
+          if (document.querySelectorAll('img[alt~="NPM"]').length > 0) {
+            const versionEl = document.querySelector('img[alt="NPM version"]')
+            const downloadsEl = document.querySelector('img[alt="NPM downloads"]')
+  
+            const sdkName = versionEl.src.match(/\\@aws-sdk\\/client-[^\\/]+/)[0]
+
+            // fetch sdk version
+            fetch("https://registry.npmjs.org/" + encodeURIComponent(sdkName) + "/latest")
+              .then(res => {
+                return res.json()
+              })
+              .then(({ version }) => {
+                versionEl.alt += ' ' + version
+              })
+              .catch(err => {
+                console.error(err)
+              })
+
+            // fetch sdk downloads for the last month
+            fetch("https://api.npmjs.org/downloads/point/last-month/" + encodeURIComponent(sdkName))
+              .then(res => {
+                return res.json()
+              })
+              .then(({ downloads }) => {
+                downloadsEl.alt += ' ' + downloads.toString() + ' per month'
+              })
+              .catch(err => {
+                console.error(err)
+              })
+          }
+        })
       })();
       `;
       const style = `
@@ -157,11 +214,29 @@ class SdkThemeContext extends DefaultThemeRenderContext {
         --light-color-background: #FFFFFF;
         --light-color-text: #232F3E;
         --light-color-link: #DF2A5D;
-
+      
+        --light-color-ts: #DF2A5D;
+        --light-color-ts-interface: #006643;
+        --light-color-ts-enum: #7c5aed;
+        --light-color-ts-class: #005B9E;
+        --light-color-ts-function: #572be7;
+        --light-color-ts-namespace: #9F1195;
+        --light-color-ts-private: #595959;
+        --light-color-ts-variable: #1A34FF;
+      
         /* Dark */
         --dark-color-background: #232F3E;
         --dark-color-text: #FFFFFF;
         --dark-color-link: #FF9900;
+      
+        --dark-color-ts: #9ffcea;
+        --dark-color-ts-interface: #38ef7d;
+        --dark-color-ts-enum: #ffad97;
+        --dark-color-ts-class: #7ce8f4;
+        --dark-color-ts-function: #D4BAFF; 
+        --dark-color-ts-namespace: #FF99DD;
+        --dark-color-ts-private: #e2e2e2;
+        --dark-color-ts-variable: #90BEFF;
       }
 
       .tsd-filter-visibility {
@@ -193,28 +268,40 @@ class SdkThemeContext extends DefaultThemeRenderContext {
         document.querySelector('.tsd-widget.tsd-toolbar-icon.menu svg').setAttribute('alt', 'toggle menu')
         document.querySelector('.tsd-widget.tsd-toolbar-icon.search svg').setAttribute('alt', 'open search')
       })();
+
+      // Add footer to every page
+      !(function () {
+        var guideName = document.createElement("meta");
+        (guideName.name = "guide-name"), (guideName.content = "API Reference");
+      
+        var serviceName = document.createElement("meta");
+        (serviceName.name = "service-name"), (serviceName.content = "AWS SDK for JavaScript v3");
+      
+        document.head.appendChild(guideName);
+        document.head.appendChild(serviceName);
+      
+        var zone = document.createElement("div");
+        zone.className += "container";
+        zone.id = "awsdocs-legal-zone-copyright";
+        zone.style.padding = "2rem";
+      
+        var footer = document.getElementsByTagName("footer");
+        if (footer && footer.length >= 1) {
+          footer[footer.length - 1].appendChild(zone);
+        } else {
+          document.body.appendChild(zone);
+        }
+      
+        var boot = document.createElement("script");
+        boot.src = "/assets/js/awsdocs-boot.js";
+        boot.type = "text/javascript";
+        document.head.appendChild(boot);
+      })();
       `;
       return (
         <>
           {oldFooter()}
-          <footer>
-            <div class="container" id="awsdocs-legal-zone-copyright" style="padding: 2rem;">
-              <a href="https://aws.amazon.com/privacy" target="_blank">
-                Privacy
-              </a>{" "}
-              |
-              <a href="https://aws.amazon.com/terms/" target="_blank">
-                {" "}
-                Site terms
-              </a>{" "}
-              |
-              <a id="awsdocs-cookie-preferences-link" href="#">
-                {" "}
-                Cookie preferences
-              </a>{" "}
-              |<span class="copyright">© 2023, Amazon Web Services, Inc. or its affiliates. All rights reserved.</span>
-            </div>
-          </footer>
+          <footer />
           <script>
             <JSX.Raw html={script} />
           </script>