build: replace deprecated axe dependency

package.json

@@ -80,6 +80,7 @@
     "@angular/platform-browser-dynamic": "^11.1.0-next.2",
     "@angular/platform-server": "^11.1.0-next.2",
     "@angular/router": "^11.1.0-next.2",
+    "@axe-core/webdriverjs": "^4.1.0",
     "@bazel/bazelisk": "^1.4.0",
     "@bazel/buildifier": "^3.5.0",
     "@bazel/ibazel": "^0.14.0",
@@ -111,7 +112,6 @@
     "@types/stylelint": "^9.10.1",
     "@types/yaml": "^1.9.7",
     "autoprefixer": "^6.7.6",
-    "axe-webdriverjs": "^1.1.1",
     "browser-sync": "^2.26.7",
     "chalk": "^4.1.0",
     "codelyzer": "^6.0.0-next.2",

src/e2e-app/e2e-app/e2e-app-layout.html

@@ -1,43 +1,9 @@
 <button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
 
-<mat-nav-list *ngIf="showLinks">
-  <a mat-list-item [routerLink]="['block-scroll-strategy']">Block scroll strategy</a>
-  <a mat-list-item [routerLink]="['button']">Button</a>
-  <a mat-list-item [routerLink]="['button-toggle']">Button Toggle</a>
-  <a mat-list-item [routerLink]="['checkbox']">Checkbox</a>
-  <a mat-list-item [routerLink]="['component-harness']">Component Harness</a>
-  <a mat-list-item [routerLink]="['dialog']">Dialog</a>
-  <a mat-list-item [routerLink]="['expansion']">Expansion</a>
-  <a mat-list-item [routerLink]="['grid-list']">Grid list</a>
-  <a mat-list-item [routerLink]="['icon']">Icon</a>
-  <a mat-list-item [routerLink]="['input']">Input</a>
-  <a mat-list-item [routerLink]="['list']">List</a>
-  <a mat-list-item [routerLink]="['menu']">Menu</a>
-  <a mat-list-item [routerLink]="['progress-bar']">Progress bar</a>
-  <a mat-list-item [routerLink]="['progress-spinner']">Progress Spinner</a>
-  <a mat-list-item [routerLink]="['radio']">Radios</a>
-  <a mat-list-item [routerLink]="['sidenav']">Sidenav</a>
-  <a mat-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
-  <a mat-list-item [routerLink]="['stepper']">Stepper</a>
-  <a mat-list-item [routerLink]="['tabs']">Tabs</a>
-  <a mat-list-item [routerLink]="['cards']">Cards</a>
-  <a mat-list-item [routerLink]="['toolbar']">Toolbar</a>
-  <a mat-list-item [routerLink]="['virtual-scroll']">Virtual Scroll</a>
-  <a mat-list-item [routerLink]="['mdc-button']">MDC Button</a>
-  <a mat-list-item [routerLink]="['mdc-card']">MDC Card</a>
-  <a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
-  <a mat-list-item [routerLink]="['mdc-chips']">MDC Chips</a>
-  <a mat-list-item [routerLink]="['mdc-dialog']">MDC Dialog</a>
-  <a mat-list-item [routerLink]="['mdc-input']">MDC Input</a>
-  <a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
-  <a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
-  <a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
-  <a mat-list-item [routerLink]="['mdc-table']">MDC Table</a>
-  <a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
-  <a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
-  <a mat-list-item [routerLink]="['mdc-progress-spinner']">MDC Progress spinner</a>
-</mat-nav-list>
-
 <main>
+  <mat-nav-list *ngIf="showLinks">
+    <a mat-list-item *ngFor="let link of navLinks" [routerLink]="[link.path]">{{link.title}}</a>
+  </mat-nav-list>
+
   <ng-content></ng-content>
 </main>

src/e2e-app/e2e-app/e2e-app-layout.ts

@@ -11,5 +11,43 @@ export class Home {
   encapsulation: ViewEncapsulation.None,
 })
 export class E2eAppLayout {
-  showLinks: boolean = false;
+  showLinks = false;
+
+  navLinks = [
+    {path: 'block-scroll-strategy', title: 'Block scroll strategy'},
+    {path: 'button', title: 'Button'},
+    {path: 'button-toggle', title: 'Button Toggle'},
+    {path: 'checkbox', title: 'Checkbox'},
+    {path: 'component-harness', title: 'Component Harness'},
+    {path: 'dialog', title: 'Dialog'},
+    {path: 'expansion', title: 'Expansion'},
+    {path: 'grid-list', title: 'Grid list'},
+    {path: 'icon', title: 'Icon'},
+    {path: 'input', title: 'Input'},
+    {path: 'list', title: 'List'},
+    {path: 'menu', title: 'Menu'},
+    {path: 'progress-bar', title: 'Progress bar'},
+    {path: 'progress-spinner', title: 'Progress Spinner'},
+    {path: 'radio', title: 'Radios'},
+    {path: 'sidenav', title: 'Sidenav'},
+    {path: 'slide-toggle', title: 'Slide Toggle'},
+    {path: 'stepper', title: 'Stepper'},
+    {path: 'tabs', title: 'Tabs'},
+    {path: 'cards', title: 'Cards'},
+    {path: 'toolbar', title: 'Toolbar'},
+    {path: 'virtual-scroll', title: 'Virtual Scroll'},
+    {path: 'mdc-button', title: 'MDC Button'},
+    {path: 'mdc-card', title: 'MDC Card'},
+    {path: 'mdc-checkbox', title: 'MDC Checkbox'},
+    {path: 'mdc-chips', title: 'MDC Chips'},
+    {path: 'mdc-dialog', title: 'MDC Dialog'},
+    {path: 'mdc-input', title: 'MDC Input'},
+    {path: 'mdc-menu', title: 'MDC Menu'},
+    {path: 'mdc-radio', title: 'MDC Radio'},
+    {path: 'mdc-slide-toggle', title: 'MDC Slide Toggle'},
+    {path: 'mdc-table', title: 'MDC Table'},
+    {path: 'mdc-tabs', title: 'MDC Tabs'},
+    {path: 'mdc-progress-bar', title: 'MDC Progress bar'},
+    {path: 'mdc-progress-spinner', title: 'MDC Progress spinner'}
+  ];
 }

src/e2e-app/mdc-progress-bar/mdc-progress-bar-e2e.html

@@ -1,4 +1,17 @@
-<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
-<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
-<mat-progress-bar mode="query"></mat-progress-bar>
-<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<mat-progress-bar
+  aria-label="Determinate progress bar"
+  mode="determinate"
+  [value]="determinateValue"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Buffer progress bar"
+  mode="buffer"
+  [value]="bufferValue"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Query progress bar"
+  mode="query"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Determinate progress bar"
+  mode="indeterminate"></mat-progress-bar>

src/e2e-app/mdc-progress-spinner/mdc-progress-spinner-e2e.html

@@ -1,3 +1,11 @@
-<mat-progress-spinner [value]="value" [strokeWidth]="strokeWidth"></mat-progress-spinner>
-<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
-<mat-spinner></mat-spinner>
+<mat-progress-spinner
+  aria-label="Determinate progress spinner"
+  [value]="value"
+  [strokeWidth]="strokeWidth"></mat-progress-spinner>
+
+<mat-progress-spinner
+  aria-label="Indeterminate progress spinner"
+  mode="indeterminate"
+  [diameter]="diameter"></mat-progress-spinner>
+
+<mat-spinner aria-label="Shorthand indeterminate progress spinner"></mat-spinner>

src/e2e-app/progress-bar/progress-bar-e2e.html

@@ -1,4 +1,17 @@
-<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
-<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
-<mat-progress-bar mode="query"></mat-progress-bar>
-<mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<mat-progress-bar
+  aria-label="Determinate progress bar"
+  mode="determinate"
+  [value]="determinateValue"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Buffer progress bar"
+  mode="buffer"
+  [value]="bufferValue"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Query progress bar"
+  mode="query"></mat-progress-bar>
+
+<mat-progress-bar
+  aria-label="Determinate progress bar"
+  mode="indeterminate"></mat-progress-bar>

src/e2e-app/progress-spinner/progress-spinner-e2e.html

@@ -1,3 +1,9 @@
-<mat-progress-spinner [value]="57"></mat-progress-spinner>
-<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
-<mat-spinner></mat-spinner>
+<mat-progress-spinner
+  aria-label="Determinate progress spinner"
+  [value]="57"></mat-progress-spinner>
+
+<mat-progress-spinner
+  aria-label="Indeterminate progress spinner"
+  mode="indeterminate"></mat-progress-spinner>
+
+<mat-spinner aria-label="Shorthand indeterminate progress spinner"></mat-spinner>

src/e2e-app/protractor.conf.js

@@ -18,6 +18,13 @@ exports.config = {
 
         // Disable color contrast checks since the final colors will vary based on the theme.
         {id: 'color-contrast', enabled: false},
+
+        // Don't require all content to be inside landmarks since some tests depend on the
+        // page layout and moving this around can break them.
+        {id: 'region', enabled: false},
+
+        // Don't require at least one `<h1>` since we don't have any content.
+        {id: 'page-has-heading-one', enabled: false}
       ]
     }
   ],

src/e2e-app/test_suite.bzl

@@ -6,7 +6,7 @@ def e2e_test_suite(name, data = [], tags = ["e2e"], deps = []):
         configuration = "//src/e2e-app:protractor.conf.js",
         data = [
             "//tools/axe-protractor",
-            "@npm//axe-webdriverjs",
+            "@npm//@axe-core/webdriverjs",
         ] + data,
         on_prepare = "//src/e2e-app:start-devserver.js",
         server = "//src/e2e-app:devserver",

src/e2e-app/virtual-scroll/virtual-scroll-e2e.html

@@ -1,6 +1,6 @@
 <section class="demo-virtual-scroll-uniform-size">
   <h3>Uniform size</h3>
-  <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <cdk-virtual-scroll-viewport class="demo-viewport" autosize tabindex="0">
     <div *cdkVirtualFor="let size of uniformItems; let i = index; let odd = odd" class="demo-item"
          [style.height.px]="size" [class.demo-odd]="odd" [attr.data-index]="i">
       Uniform Item #{{i}} - ({{size}}px)
@@ -10,7 +10,7 @@ <h3>Uniform size</h3>
 
 <section class="demo-virtual-scroll-variable-size">
   <h3>Random size</h3>
-  <cdk-virtual-scroll-viewport class="demo-viewport" autosize>
+  <cdk-virtual-scroll-viewport class="demo-viewport" autosize tabindex="0">
     <div *cdkVirtualFor="let size of variableItems; let i = index; let odd = odd" class="demo-item"
          [style.height.px]="size" [class.demo-odd]="odd" [attr.data-index]="i">
       Variable Item #{{i}} - ({{size}}px)

tools/axe-protractor/index.js

@@ -4,7 +4,7 @@
  * Protractor Plugin to run axe-core accessibility audits after Angular bootstrapped.
  */
 
-const AxeBuilder = require('axe-webdriverjs');
+const AxeBuilder = require('@axe-core/webdriverjs');
 const {buildMessage} = require('./build-message');
 
 /* List of pages which were already checked by axe-core and shouldn't run again */
@@ -13,10 +13,19 @@ const checkedPages = [];
 /**
  * Protractor plugin hook which always runs when Angular successfully bootstrapped.
  */
-async function onPageStable() {
-  await AxeBuilder(browser.driver)
-    .configure(this.config || {})
-    .analyze(results => handleResults(this, results));
+function onPageStable() {
+  return new Promise((resolve, reject) => {
+    new AxeBuilder(browser.driver)
+      .configure(this.config || {})
+      .analyze((err, results) => {
+        if (err) {
+          reject(err);
+        } else {
+          handleResults(this, results);
+          resolve(results);
+        }
+      });
+  });
 }
 
 /**
@@ -26,22 +35,15 @@ async function onPageStable() {
  * @param {!axe.AxeResults} results
  */
 function handleResults(context, results) {
-
   if (checkedPages.indexOf(results.url) === -1) {
-
     checkedPages.push(results.url);
 
     results.violations.forEach(violation => {
-
       let specName = `${violation.help} (${results.url})`;
       let message = '\n' + buildMessage(violation);
-
       context.addFailure(message, {specName});
-
     });
-
   }
-
 }
 
 exports.name = 'protractor-axe';

yarn.lock

@@ -201,6 +201,14 @@
     call-me-maybe "^1.0.1"
     js-yaml "^3.13.1"
 
+"@axe-core/webdriverjs@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@axe-core/webdriverjs/-/webdriverjs-4.1.0.tgz#ce22d795e33d02a4e2b3ad59d698f0b111e4e72a"
+  integrity sha512-I6YFiR3XzdCd+Id3LdsliEw04l9M2lFl0EIiPAweoW2E5AlQ5Jk+a4q4GLYWpdQE6RWSs0DvmS8JfF+u0R823w==
+  dependencies:
+    axe-core "^4.1.1"
+    babel-runtime "^6.26.0"
+
 "@babel/code-frame@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -2756,18 +2764,10 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
   integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
 
-axe-core@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-2.6.1.tgz#28772c4f76966d373acda35b9a409299dc00d1b5"
-  integrity sha512-QFfI3d+x/v92HJWGBaNfgrxdfon9/xXzd04YYfm5w5NJQOLex8qkJCctOt7+ky6e1l9zcQ5E7jsvbnTgQzyfTw==
-
-axe-webdriverjs@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/axe-webdriverjs/-/axe-webdriverjs-1.3.0.tgz#3fbef17de7fe19972dc2deb3419a574d712c3912"
-  integrity sha512-DGjz5DqQ+btGCj49cFSF+ZK9UWcYCwXiYqIlfBDBbPAen2u/plEUsHBiQODpkhTpbFdnUgCwxf6cwaP8Ku6hCw==
-  dependencies:
-    axe-core "^2.6.1"
-    selenium-webdriver ">= 2.53.1"
+axe-core@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
+  integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
 
 [email protected]:
   version "0.19.0"
@@ -2784,6 +2784,14 @@ [email protected]:
   dependencies:
     ast-types-flow "0.0.7"
 
+babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 bach@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/bach/-/bach-1.2.0.tgz#4b3ce96bf27134f79a1b414a51c14e34c3bd9880"
@@ -4211,6 +4219,11 @@ copy-props@^2.0.1:
     each-props "^1.3.0"
     is-plain-object "^2.0.1"
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^2.6.9:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
@@ -8812,23 +8825,6 @@ meow@^8.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
-meow@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/meow/-/meow-8.0.0.tgz#1aa10ee61046719e334ffdc038bb5069250ec99a"
-  integrity sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg==
-  dependencies:
-    "@types/minimist" "^1.2.0"
-    camelcase-keys "^6.2.2"
-    decamelize-keys "^1.1.0"
-    hard-rejection "^2.1.0"
-    minimist-options "4.1.0"
-    normalize-package-data "^3.0.0"
-    read-pkg-up "^7.0.1"
-    redent "^3.0.0"
-    trim-newlines "^3.0.0"
-    type-fest "^0.18.0"
-    yargs-parser "^20.2.3"
-
 [email protected]:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -10761,6 +10757,11 @@ regenerate@^1.2.1:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -11347,7 +11348,7 @@ [email protected]:
     tmp "0.0.30"
     xml2js "^0.4.17"
 
-[email protected], "selenium-webdriver@>= 2.53.1", selenium-webdriver@^3.0.1, selenium-webdriver@^3.6.0:
+[email protected], selenium-webdriver@^3.0.1, selenium-webdriver@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
   integrity sha512-WH7Aldse+2P5bbFBO4Gle/nuQOdVwpHMTL6raL3uuBj/vPG07k6uzt3aiahu352ONBr5xXh0hDlM3LhtXPOC4Q==
@@ -12804,11 +12805,6 @@ type-fest@^0.18.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
   integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
 
-type-fest@^0.18.0:
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f"
-  integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==
-
 type-fest@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"