Initial Pass at Accessibility Checks in CI (#88)

This commit is contained in:
Steve Faulkner 2020-07-14 23:01:28 -05:00 committed by GitHub
parent 15953da51e
commit 9affc34301
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 1 deletions

View File

@ -155,8 +155,31 @@ jobs:
NODE_TLS_REJECT_UNAUTHORIZED: 0 NODE_TLS_REJECT_UNAUTHORIZED: 0
CYPRESS_CACHE_FOLDER: ~/.cache/Cypress CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }} 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: nuget:
name: Publish Nuget name: Publish Nuget
if: github.ref == 'refs/heads/master'
needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo] needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
@ -180,6 +203,7 @@ jobs:
path: "*.nupkg" path: "*.nupkg"
nugetmpac: nugetmpac:
name: Publish Nuget MPAC name: Publish Nuget MPAC
if: github.ref == 'refs/heads/master'
needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo] needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:

15
package-lock.json generated
View File

@ -9230,6 +9230,21 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz",
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==" "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": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",

View File

@ -116,6 +116,7 @@
"@typescript-eslint/eslint-plugin": "3.2.0", "@typescript-eslint/eslint-plugin": "3.2.0",
"@typescript-eslint/parser": "3.2.0", "@typescript-eslint/parser": "3.2.0",
"adal-angular": "1.0.15", "adal-angular": "1.0.15",
"axe-puppeteer": "1.1.0",
"babel-jest": "24.9.0", "babel-jest": "24.9.0",
"babel-loader": "8.1.0", "babel-loader": "8.1.0",
"buffer": "5.1.0", "buffer": "5.1.0",

View File

@ -68,6 +68,7 @@ class HostedExplorer {
this._controlbarCommands = ko.observableArray([ this._controlbarCommands = ko.observableArray([
{ {
id: "commandbutton-connect",
iconSrc: ConnectIcon, iconSrc: ConnectIcon,
iconAlt: "connect button", iconAlt: "connect button",
onCommandClick: () => this.openConnectPane(), onCommandClick: () => this.openConnectPane(),
@ -78,6 +79,7 @@ class HostedExplorer {
disabled: false disabled: false
}, },
{ {
id: "commandbutton-settings",
iconSrc: SettingsIcon, iconSrc: SettingsIcon,
iconAlt: "setting button", iconAlt: "setting button",
onCommandClick: () => this.openSettingsPane(), onCommandClick: () => this.openSettingsPane(),
@ -88,6 +90,7 @@ class HostedExplorer {
disabled: false disabled: false
}, },
{ {
id: "commandbutton-feedback",
iconSrc: FeedbackIcon, iconSrc: FeedbackIcon,
iconAlt: "feeback button", iconAlt: "feeback button",
onCommandClick: () => onCommandClick: () =>

View File

@ -8,7 +8,7 @@
<body> <body>
<header> <header>
<div class="items"> <div class="items" role="menubar">
<div class="cosmosDBTitle"> <div class="cosmosDBTitle">
<span <span
class="title" class="title"
@ -53,6 +53,7 @@
id="explorerMenu" id="explorerMenu"
name="explorer" name="explorer"
class="iframe" class="iframe"
title="explorer"
src="explorer.html?v=1.0.1&platform=Hosted" src="explorer.html?v=1.0.1&platform=Hosted"
data-bind="visible: navigationSelection() === 'explorer'" data-bind="visible: navigationSelection() === 'explorer'"
> >

View File

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