fix: timeouts due to audio, video elements (#39)

CHANGELOG.md

@@ -4,31 +4,44 @@
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 
-- [0.3.1-beta](#031-beta)
+  - [0.3.2-beta](#032-beta)
+    - [Bug Fixes](#bug-fixes)
     - [Refactor](#refactor)
+- [0.3.1-beta (2020-08-20)](#031-beta-2020-08-20)
+    - [Refactor](#refactor-1)
 - [0.3.0-beta (2020-08-19)](#030-beta-2020-08-19)
     - [Features](#features)
 - [0.2.0-beta (2020-06-25)](#020-beta-2020-06-25)
     - [Features](#features-1)
-    - [Bug Fixes](#bug-fixes)
+    - [Bug Fixes](#bug-fixes-1)
     - [BREAKING CHANGES](#breaking-changes)
 - [v0.1.0-alpha (2020-06-02)](#v010-alpha-2020-06-02)
     - [Features](#features-2)
 - [(2020-05-29)](#2020-05-29)
     - [Features](#features-3)
 - [(2020-05-07)](#2020-05-07)
-    - [Bug Fixes](#bug-fixes-1)
+    - [Bug Fixes](#bug-fixes-2)
     - [Features](#features-4)
 - [(2020-04-07)](#2020-04-07)
-    - [Bug Fixes](#bug-fixes-2)
+    - [Bug Fixes](#bug-fixes-3)
     - [Features](#features-5)
 - [(2020-03-20)](#2020-03-20)
-    - [Bug Fixes](#bug-fixes-3)
+    - [Bug Fixes](#bug-fixes-4)
     - [Features](#features-6)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-# [0.3.1-beta](2020-08-19)
+## [0.3.2-beta] (2020-09-22)
+
+### Bug Fixes
+
+-   **preset-rules:** disable preloading media in axe config to fix timeout
+
+### Refactor
+
+-   chore: update typescript and typescript/eslint plugin to v4 ([#37](https://github.com/salesforce/sa11y/pull/37))
+
+# [0.3.1-beta](https://github.com/salesforce/sa11y/releases/tag/v0.3.1-beta) (2020-08-20)
 
 ### Refactor
 

cSpell.json

@@ -1,6 +1,18 @@
 {
     "ignorePaths": ["node_modules/**", "package.json"],
-    "ignoreWords": ["circleci", "CNCF", "dlitem", "doctoc", "iife", "SPDX", "tsdoc", "wcag", "wdio", "webdriverio"],
+    "ignoreWords": [
+        "circleci",
+        "CNCF",
+        "dlitem",
+        "doctoc",
+        "iife",
+        "SPDX",
+        "tsdoc",
+        "wcag",
+        "wdio",
+        "webdriverio",
+        "webm"
+    ],
     "flagWords": ["master-slave", "slave", "blacklist", "whitelist"],
     "allowCompoundWords": true
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sa11y-monorepo",
-    "version": "0.3.1-beta",
+    "version": "0.3.2-beta",
     "private": true,
     "description": "Salesforce Accessibility Automated Testing Libraries and Tools (@sa11y packages)",
     "license": "BSD-3-Clause",
@@ -23,19 +23,20 @@
         "commit": "! git diff --cached --exit-code && lint-staged && git-cz",
         "install:clean": "lerna clean --yes && yarn install",
         "lint": "eslint . --ext ts,js,md",
-        "lint:all": "tsc --noEmit && yarn lint && yarn lint:lockfile && yarn lint:deps && yarn lint:depgraph",
+        "lint:all": "tsc --noEmit && yarn lint && yarn lint:lockfile && yarn lint:deps && yarn lint:depgraph && yarn lint:version",
         "lint:deps": "lerna exec depcheck",
         "lint:depgraph": "yarn pkg:depgraph && git diff --quiet docs/sa11y_dependency_graph.svg || echo 'Dependency graph needs to be updated!'",
         "lint:fix": "yarn lint --fix",
         "lint:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts registry.yarnpkg.com --validate-https",
         "lint:staged": "lint-staged",
+        "lint:version": "yarn lerna exec --since master vertioner",
         "lint:watch": "esw --watch --changed --color --ext .js,.ts",
         "pkg:list": "lerna list --long --all --toposort",
         "pkg:deps": "yarn pkg:list --graph",
         "pkg:depgraph": "yarn package-dependency-graph --graphviz --svg docs/sa11y_dependency_graph.svg",
         "release:changelog": "conventional-changelog --infile CHANGELOG.md --same-file --preset angular --output-unreleased",
-        "release:version": "yarn lerna version --no-push --no-git-tag-version",
-        "release:version:auto": "yarn release:version --conventional-commits --no-changelog",
+        "release:version": "yarn lerna version --no-push --no-git-tag-version && yarn build:clean",
+        "release:version:auto": "yarn release:version --conventional-commits --no-changelog && yarn build:clean",
         "release:publish": "yarn test:clean && yarn lerna publish from-package",
         "test": "jest --coverage",
         "test:ci": "yarn lint:all && yarn test --ci && yarn test:wdio",
@@ -64,12 +65,12 @@
         "@babel/preset-typescript": "^7.10.4",
         "@commitlint/cli": "11.0.0",
         "@commitlint/config-conventional": "11.0.0",
-        "@types/jest": "^26.0.13",
-        "@types/node": "^14.10.2",
-        "@typescript-eslint/eslint-plugin": "^4.1.1",
-        "@typescript-eslint/parser": "^4.1.1",
-        "@wdio/cli": "^6.5.0",
-        "@wdio/local-runner": "^6.5.0",
+        "@types/jest": "^26.0.14",
+        "@types/node": "^14.11.2",
+        "@typescript-eslint/eslint-plugin": "^4.2.0",
+        "@typescript-eslint/parser": "^4.2.0",
+        "@wdio/cli": "^6.5.2",
+        "@wdio/local-runner": "^6.5.2",
         "@wdio/mocha-framework": "^6.5.0",
         "@wdio/spec-reporter": "^6.4.7",
         "@wdio/sync": "^6.5.0",
@@ -86,7 +87,7 @@
         "eslint-import-resolver-typescript": "^2.3.0",
         "eslint-plugin-eslint-comments": "^3.1.2",
         "eslint-plugin-import": "^2.22.0",
-        "eslint-plugin-jest": "^24.0.1",
+        "eslint-plugin-jest": "^24.0.2",
         "eslint-plugin-license-header": "^0.2.0",
         "eslint-plugin-markdown": "^2.0.0-rc.0",
         "eslint-plugin-notice": "^0.9.10",
@@ -96,16 +97,17 @@
         "husky": "^4.3.0",
         "jest": "^26.4.2",
         "lerna": "^3.21.0",
-        "lint-staged": "^10.3.0",
+        "lint-staged": "^10.4.0",
         "lockfile-lint": "^4.3.7",
         "markdown-link-check": "^3.8.3",
         "package-dependency-graph": "^1.9.1",
         "prettier": "^2.1.2",
         "rimraf": "^3.0.2",
         "ts-node": "^9.0.0",
-        "typescript": "^4.0.2",
+        "typescript": "^4.0.3",
+        "vertioner": "^1.0.6",
         "wdio-chromedriver-service": "^6.0.4",
-        "webdriverio": "^6.5.0"
+        "webdriverio": "^6.5.2"
     },
     "engines": {
         "node": "^10 || ^12"

packages/assert/__tests__/assert.test.ts

@@ -10,6 +10,8 @@ import { recommended, getA11yConfig, base } from '@sa11y/preset-rules';
 import {
     beforeEachSetup,
     checkA11yError,
+    audioURL,
+    videoURL,
     domWithA11yIssues,
     domWithNoA11yIssues,
     shadowDomID,
@@ -83,4 +85,20 @@ describe('assertAccessible API', () => {
         expect(elem).toBeTruthy();
         await assertAccessible(elem).catch((e) => checkA11yError(e));
     });
+
+    it.each(['', 'non-existent-audio.mp3', audioURL])(
+        'should test audio without timing-out using src %#',
+        async (source: string) => {
+            document.body.innerHTML = `<audio src=${source}>Audio test</audio>`;
+            await assertAccessible(document, getA11yConfig(['audio-caption', 'no-autoplay-audio']));
+        }
+    );
+
+    it.each(['', 'non-existent-video.webm', videoURL])(
+        'should test video without timing-out using src %#',
+        async (source: string) => {
+            document.body.innerHTML = `<video src=${source}>Video test</video>`;
+            await assertAccessible(document, getA11yConfig(['video-caption', 'no-autoplay-audio']));
+        }
+    );
 });

packages/assert/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/assert",
-    "version": "0.1.3-beta.0",
+    "version": "0.1.4-beta.0",
     "description": "Provides assertAccessible API to check DOM for accessibility issues",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/assert#readme",
@@ -20,13 +20,13 @@
         "dist/**/*.js"
     ],
     "dependencies": {
-        "@sa11y/common": "0.2.0-beta.0",
-        "@sa11y/format": "0.2.1-beta.0",
-        "@sa11y/preset-rules": "0.2.0-beta.0",
+        "@sa11y/common": "0.2.1-beta.0",
+        "@sa11y/format": "0.2.2-beta.0",
+        "@sa11y/preset-rules": "0.2.1-beta.0",
         "axe-core": "4.0.2"
     },
     "devDependencies": {
-        "@sa11y/test-utils": "0.2.0-beta.0"
+        "@sa11y/test-utils": "0.2.1-beta.0"
     },
     "publishConfig": {
         "access": "public"

packages/browser-lib/__tests__/browser-lib.test.ts

@@ -41,7 +41,7 @@ function verifySa11yLoaded(filePath: string): void {
     void browser.execute(sa11yMinJs);
     // After injecting sa11y and axe should be defined
     // TODO (refactor): Get sa11y version dynamically (from package.json)
-    expect(isLoaded(namespace)).toEqual('0.1.0-alpha');
+    expect(isLoaded(namespace)).toEqual('0.1.1-alpha.0');
     expect(isLoaded('axe')).toEqual(axeVersion);
 }
 

packages/browser-lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/browser-lib",
-    "version": "0.1.0-alpha",
+    "version": "0.1.1-alpha.0",
     "description": "Provides a minified version of selected `@sa11y` libraries to be injected into a browser (using webdriver) and executed from integration testing workflows.",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/browser-lib#readme",
@@ -34,15 +34,15 @@
         "url": "https://github.com/salesforce/sa11y/issues"
     },
     "dependencies": {
-        "@sa11y/assert": "0.1.3-beta.0",
-        "@sa11y/format": "0.2.1-beta.0",
-        "@sa11y/preset-rules": "0.2.0-beta.0"
+        "@sa11y/assert": "0.1.4-beta.0",
+        "@sa11y/format": "0.2.2-beta.0",
+        "@sa11y/preset-rules": "0.2.1-beta.0"
     },
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^15.0.0",
+        "@rollup/plugin-commonjs": "^15.1.0",
         "@rollup/plugin-node-resolve": "^9.0.0",
-        "@sa11y/common": "0.2.0-beta.0",
-        "rollup": "^2.26.11",
+        "@sa11y/common": "0.2.1-beta.0",
+        "rollup": "^2.28.2",
         "rollup-plugin-progress": "^1.1.2",
         "rollup-plugin-sizes": "^1.0.3",
         "rollup-plugin-terser": "^7.0.2",

packages/common/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/common",
-    "version": "0.2.0-beta.0",
+    "version": "0.2.1-beta.0",
     "description": "Common utilities, constants, error messages for @sa11y",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/common#readme",

packages/format/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/format",
-    "version": "0.2.1-beta.0",
+    "version": "0.2.2-beta.0",
     "description": "Accessibility results re-formatter",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/format#readme",
@@ -26,7 +26,7 @@
         "axe-core": "4.0.2"
     },
     "devDependencies": {
-        "@sa11y/test-utils": "0.2.0-beta.0"
+        "@sa11y/test-utils": "0.2.1-beta.0"
     },
     "publishConfig": {
         "access": "public"

packages/jest/README.md

@@ -11,6 +11,7 @@ Accessibility matcher for [Jest](https://jestjs.io)
 - [Setup](#setup)
   - [Project level](#project-level)
   - [Test module level](#test-module-level)
+- [⚠ Caution](#%E2%9A%A0-caution)
 - [Usage](#usage)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -37,7 +38,10 @@ You can set up the a11y API once at the project level to make it available to al
 -   Add a Jest setup file (e.g. `jest-setup.js`) and add the following code that registers the a11y API
 
 ```javascript
-const { registerSa11yMatcher } = require('@sa11y/jest');
+// Import using either CommonJS `require` or ES6 `import`
+const { registerSa11yMatcher } = require('@sa11y/jest'); // CommonJS
+import { registerSa11yMatcher } from '@sa11y/jest'; // ES6
+// Register the sa11y matcher
 registerSa11yMatcher();
 ```
 
@@ -66,10 +70,15 @@ beforeAll(() => {
 
 -   This makes the `toBeAccessible` API available for the tests only in that specific test module where `registerSa11yMatcher()` is invoked.
 
-## Usage
+## ⚠ Caution
 
--   **WARNING**: `toBeAccessible` **must** be invoked with `async/wait` or `Promise` or the equivalent supported asynchronous method in your environment
+-   **async**: `toBeAccessible` **must** be invoked with `async/wait` or `Promise` or the equivalent supported asynchronous method in your environment
     -   Not invoking it async would result in incorrect results e.g. no issues reported even when the page is not accessible
+-   **color-contrast**: Color-contrast check is disabled for Jest tests as it [does not work in JSDOM](https://github.com/dequelabs/axe-core/issues/595)
+    -   If you need to check for color-contrast please use a real browser to test e.g. using [`@sa11y/wdio`](https://github.com/salesforce/sa11y/tree/master/packages/wdio#readme)
+
+## Usage
+
 -   `toBeAccessible` can either be invoked on the entire `document` (JSDOM) or on a specific HTML element to check for accessibility
 
 ```javascript

packages/jest/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/jest",
-    "version": "0.1.3-beta.0",
+    "version": "0.1.4-beta.0",
     "description": "Accessibility testing matcher for Jest",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/jest#readme",
@@ -22,17 +22,17 @@
         "dist/**/*.js"
     ],
     "dependencies": {
-        "@sa11y/assert": "0.1.3-beta.0",
-        "@sa11y/format": "0.2.1-beta.0",
-        "@sa11y/preset-rules": "0.2.0-beta.0",
+        "@sa11y/assert": "0.1.4-beta.0",
+        "@sa11y/format": "0.2.2-beta.0",
+        "@sa11y/preset-rules": "0.2.1-beta.0",
         "jest-matcher-utils": "^26.4.2"
     },
     "peerDependencies": {
         "jest": ">=26.0.0"
     },
     "devDependencies": {
-        "@sa11y/common": "0.2.0-beta.0",
-        "@sa11y/test-utils": "0.2.0-beta.0"
+        "@sa11y/common": "0.2.1-beta.0",
+        "@sa11y/test-utils": "0.2.1-beta.0"
     },
     "publishConfig": {
         "access": "public"

packages/preset-rules/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sa11y/preset-rules",
-    "version": "0.2.0-beta.0",
+    "version": "0.2.1-beta.0",
     "description": "Accessibility preset rule configs for axe",
     "license": "BSD-3-Clause",
     "homepage": "https://github.com/salesforce/sa11y/tree/master/packages/preset-rules#readme",

packages/preset-rules/src/a11yConfig.ts

@@ -33,6 +33,10 @@ export function getA11yConfig(rules: string[]): A11yConfig {
             type: 'rule',
             values: rules,
         },
+        // Disable preloading assets as it causes timeouts for audio/video elements
+        //  with jest and delays webdriver tests by 2-3x when assets are not found (404)
+        //  Ref: https://github.com/dequelabs/axe-core/issues/2528
+        preload: false,
         resultTypes: ['violations'],
     };
 }

packages/test-integration/__tests__/jest.test.js

@@ -16,7 +16,7 @@ describe('integration test @sa11y/jest', () => {
         await expect(document).toBeAccessible();
     });
 
-    it('show throw error for inaccessible dom', async () => {
+    it('should throw error for inaccessible dom', async () => {
         expect.assertions(2);
         document.body.innerHTML = domWithA11yIssues;
         await expect(document)

packages/test-integration/jest-setup.js

@@ -5,9 +5,6 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-// Since this is not a typescript project, disabling typescript eslint warning
-// TODO (lint): using 'exclude: ["./packages/test-integration/**/*.js"]' in tsconfig.eslint.json doesn't work
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { registerSa11yMatcher } = require('@sa11y/jest');
+import { registerSa11yMatcher } from '@sa11y/jest';
 
 registerSa11yMatcher();