From 9affc343013251588069d3d4fe8a32ec87b428c2 Mon Sep 17 00:00:00 2001
From: Steve Faulkner <southpolesteve@gmail.com>
Date: Tue, 14 Jul 2020 23:01:28 -0500
Subject: [PATCH] Initial Pass at Accessibility Checks in CI (#88)

---
 .github/workflows/ci.yml   | 24 ++++++++++++++++++++++++
 package-lock.json          | 15 +++++++++++++++
 package.json               |  1 +
 src/HostedExplorer.ts      |  3 +++
 src/hostedExplorer.html    |  3 ++-
 utils/accesibilityCheck.js | 22 ++++++++++++++++++++++
 6 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 utils/accesibilityCheck.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ad547dcda..8c29fa13a 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -155,8 +155,31 @@ jobs:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
           CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+  accessibility:
+    name: "Accessibility | Hosted"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Accessibility Check
+        run: |
+          # Ubuntu gets mad when webpack runs too many files watchers
+          cat /proc/sys/fs/inotify/max_user_watches
+          sudo sysctl fs.inotify.max_user_watches=524288
+          sudo sysctl -p
+          npm ci
+          npm start &
+          npx wait-on  -i 5000 https-get://0.0.0.0:1234/
+          node utils/accesibilityCheck.js
+        shell: bash
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
   nuget:
     name: Publish Nuget
+    if: github.ref == 'refs/heads/master'
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:
@@ -180,6 +203,7 @@ jobs:
           path: "*.nupkg"
   nugetmpac:
     name: Publish Nuget MPAC
+    if: github.ref == 'refs/heads/master'
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:
diff --git a/package-lock.json b/package-lock.json
index d9f280b80..52e878d37 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9230,6 +9230,21 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
+    "axe-core": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.5.5.tgz",
+      "integrity": "sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==",
+      "dev": true
+    },
+    "axe-puppeteer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/axe-puppeteer/-/axe-puppeteer-1.1.0.tgz",
+      "integrity": "sha512-VS17Y1rDQe6A0PdeTPxwOSBfmOdj6efgxyre9cN1du1snnVilczSDtQsgifBKBlzoL/3DKfGpgIi+N+zrzODOg==",
+      "dev": true,
+      "requires": {
+        "axe-core": "^3.5.3"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
diff --git a/package.json b/package.json
index c80b67fb3..2ffbc3936 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "@typescript-eslint/eslint-plugin": "3.2.0",
     "@typescript-eslint/parser": "3.2.0",
     "adal-angular": "1.0.15",
+    "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
diff --git a/src/HostedExplorer.ts b/src/HostedExplorer.ts
index 5a201bf2a..4ba4aeda3 100644
--- a/src/HostedExplorer.ts
+++ b/src/HostedExplorer.ts
@@ -68,6 +68,7 @@ class HostedExplorer {
 
     this._controlbarCommands = ko.observableArray([
       {
+        id: "commandbutton-connect",
         iconSrc: ConnectIcon,
         iconAlt: "connect button",
         onCommandClick: () => this.openConnectPane(),
@@ -78,6 +79,7 @@ class HostedExplorer {
         disabled: false
       },
       {
+        id: "commandbutton-settings",
         iconSrc: SettingsIcon,
         iconAlt: "setting button",
         onCommandClick: () => this.openSettingsPane(),
@@ -88,6 +90,7 @@ class HostedExplorer {
         disabled: false
       },
       {
+        id: "commandbutton-feedback",
         iconSrc: FeedbackIcon,
         iconAlt: "feeback button",
         onCommandClick: () =>
diff --git a/src/hostedExplorer.html b/src/hostedExplorer.html
index ca3b15826..6b1dfb202 100644
--- a/src/hostedExplorer.html
+++ b/src/hostedExplorer.html
@@ -8,7 +8,7 @@
 
   <body>
     <header>
-      <div class="items">
+      <div class="items" role="menubar">
         <div class="cosmosDBTitle">
           <span
             class="title"
@@ -53,6 +53,7 @@
       id="explorerMenu"
       name="explorer"
       class="iframe"
+      title="explorer"
       src="explorer.html?v=1.0.1&platform=Hosted"
       data-bind="visible: navigationSelection() === 'explorer'"
     >
diff --git a/utils/accesibilityCheck.js b/utils/accesibilityCheck.js
new file mode 100644
index 000000000..51f61875a
--- /dev/null
+++ b/utils/accesibilityCheck.js
@@ -0,0 +1,22 @@
+const { AxePuppeteer } = require("axe-puppeteer");
+const puppeteer = require("puppeteer");
+
+(async () => {
+  const browser = await puppeteer.launch({ ignoreHTTPSErrors: true });
+  const page = await browser.newPage();
+  await page.setBypassCSP(true);
+  await page.goto("https://localhost:1234/hostedExplorer.html");
+
+  const results = await new AxePuppeteer(page).withTags(["wcag2a", "wcag2aa"]).analyze();
+  if (results.violations && results.violations.length && results.violations.length > 0) {
+    throw results.violations;
+  }
+
+  await page.close();
+  await browser.close();
+  console.log(`Accessibility Check Passed!`);
+})().catch(err => {
+  console.error(`Accessibility Check Failed: ${err.length} Errors`);
+  console.error(err);
+  process.exit(1);
+});