Skip to content

Commit 2e72df1

Browse files
crisbetocrisbeto
committed
build: replace deprecated axe dependency
The `axe-webdriverjs` package was deprecated in favor of `@axe-core/webdriverjs`. These changes switch to the new package, fix the new failures that were picked up and clean up some repetitive code.
1 parent ddc2e23 commit 2e72df1

File tree

12 files changed

+158
-108
lines changed

12 files changed

+158
-108
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"@angular/platform-browser-dynamic": "^11.1.0-next.2",
8181
"@angular/platform-server": "^11.1.0-next.2",
8282
"@angular/router": "^11.1.0-next.2",
83+
"@axe-core/webdriverjs": "^4.1.0",
8384
"@bazel/bazelisk": "^1.4.0",
8485
"@bazel/buildifier": "^3.5.0",
8586
"@bazel/ibazel": "^0.14.0",
@@ -111,7 +112,6 @@
111112
"@types/stylelint": "^9.10.1",
112113
"@types/yaml": "^1.9.7",
113114
"autoprefixer": "^6.7.6",
114-
"axe-webdriverjs": "^1.1.1",
115115
"browser-sync": "^2.26.7",
116116
"chalk": "^4.1.0",
117117
"codelyzer": "^6.0.0-next.2",

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

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,11 @@
1-
<button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
1+
<main>
2+
<h1>Angular Components end-to-end test app</h1>
23

3-
<mat-nav-list *ngIf="showLinks">
4-
<a mat-list-item [routerLink]="['block-scroll-strategy']">Block scroll strategy</a>
5-
<a mat-list-item [routerLink]="['button']">Button</a>
6-
<a mat-list-item [routerLink]="['button-toggle']">Button Toggle</a>
7-
<a mat-list-item [routerLink]="['checkbox']">Checkbox</a>
8-
<a mat-list-item [routerLink]="['component-harness']">Component Harness</a>
9-
<a mat-list-item [routerLink]="['dialog']">Dialog</a>
10-
<a mat-list-item [routerLink]="['expansion']">Expansion</a>
11-
<a mat-list-item [routerLink]="['grid-list']">Grid list</a>
12-
<a mat-list-item [routerLink]="['icon']">Icon</a>
13-
<a mat-list-item [routerLink]="['input']">Input</a>
14-
<a mat-list-item [routerLink]="['list']">List</a>
15-
<a mat-list-item [routerLink]="['menu']">Menu</a>
16-
<a mat-list-item [routerLink]="['progress-bar']">Progress bar</a>
17-
<a mat-list-item [routerLink]="['progress-spinner']">Progress Spinner</a>
18-
<a mat-list-item [routerLink]="['radio']">Radios</a>
19-
<a mat-list-item [routerLink]="['sidenav']">Sidenav</a>
20-
<a mat-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
21-
<a mat-list-item [routerLink]="['stepper']">Stepper</a>
22-
<a mat-list-item [routerLink]="['tabs']">Tabs</a>
23-
<a mat-list-item [routerLink]="['cards']">Cards</a>
24-
<a mat-list-item [routerLink]="['toolbar']">Toolbar</a>
25-
<a mat-list-item [routerLink]="['virtual-scroll']">Virtual Scroll</a>
26-
<a mat-list-item [routerLink]="['mdc-button']">MDC Button</a>
27-
<a mat-list-item [routerLink]="['mdc-card']">MDC Card</a>
28-
<a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
29-
<a mat-list-item [routerLink]="['mdc-chips']">MDC Chips</a>
30-
<a mat-list-item [routerLink]="['mdc-dialog']">MDC Dialog</a>
31-
<a mat-list-item [routerLink]="['mdc-input']">MDC Input</a>
32-
<a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
33-
<a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
34-
<a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
35-
<a mat-list-item [routerLink]="['mdc-table']">MDC Table</a>
36-
<a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
37-
<a mat-list-item [routerLink]="['mdc-progress-bar']">MDC Progress bar</a>
38-
<a mat-list-item [routerLink]="['mdc-progress-spinner']">MDC Progress spinner</a>
39-
</mat-nav-list>
4+
<button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
5+
6+
<mat-nav-list *ngIf="showLinks">
7+
<a mat-list-item *ngFor="let link of navLinks" [routerLink]="[link.path]">{{link.title}}</a>
8+
</mat-nav-list>
409

41-
<main>
4210
<ng-content></ng-content>
4311
</main>

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,43 @@ export class Home {
1111
encapsulation: ViewEncapsulation.None,
1212
})
1313
export class E2eAppLayout {
14-
showLinks: boolean = false;
14+
showLinks = false;
15+
16+
navLinks = [
17+
{path: 'block-scroll-strategy', title: 'Block scroll strategy'},
18+
{path: 'button', title: 'Button'},
19+
{path: 'button-toggle', title: 'Button Toggle'},
20+
{path: 'checkbox', title: 'Checkbox'},
21+
{path: 'component-harness', title: 'Component Harness'},
22+
{path: 'dialog', title: 'Dialog'},
23+
{path: 'expansion', title: 'Expansion'},
24+
{path: 'grid-list', title: 'Grid list'},
25+
{path: 'icon', title: 'Icon'},
26+
{path: 'input', title: 'Input'},
27+
{path: 'list', title: 'List'},
28+
{path: 'menu', title: 'Menu'},
29+
{path: 'progress-bar', title: 'Progress bar'},
30+
{path: 'progress-spinner', title: 'Progress Spinner'},
31+
{path: 'radio', title: 'Radios'},
32+
{path: 'sidenav', title: 'Sidenav'},
33+
{path: 'slide-toggle', title: 'Slide Toggle'},
34+
{path: 'stepper', title: 'Stepper'},
35+
{path: 'tabs', title: 'Tabs'},
36+
{path: 'cards', title: 'Cards'},
37+
{path: 'toolbar', title: 'Toolbar'},
38+
{path: 'virtual-scroll', title: 'Virtual Scroll'},
39+
{path: 'mdc-button', title: 'MDC Button'},
40+
{path: 'mdc-card', title: 'MDC Card'},
41+
{path: 'mdc-checkbox', title: 'MDC Checkbox'},
42+
{path: 'mdc-chips', title: 'MDC Chips'},
43+
{path: 'mdc-dialog', title: 'MDC Dialog'},
44+
{path: 'mdc-input', title: 'MDC Input'},
45+
{path: 'mdc-menu', title: 'MDC Menu'},
46+
{path: 'mdc-radio', title: 'MDC Radio'},
47+
{path: 'mdc-slide-toggle', title: 'MDC Slide Toggle'},
48+
{path: 'mdc-table', title: 'MDC Table'},
49+
{path: 'mdc-tabs', title: 'MDC Tabs'},
50+
{path: 'mdc-progress-bar', title: 'MDC Progress bar'},
51+
{path: 'mdc-progress-spinner', title: 'MDC Progress spinner'}
52+
];
1553
}

‎src/e2e-app/index.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,13 @@
2525
</head>
2626
<body>
2727
<e2e-app>Loading...</e2e-app>
28-
<span class="sibling">I am a sibling!</span>
28+
29+
<!--
30+
This element is used to test extracting text outside the app host so we have to
31+
keep it here. It needs to be aria-hidden so the automated a11y check doesn't
32+
complain that it's outside of a landmark.
33+
-->
34+
<span aria-hidden="true" class="sibling">I am a sibling!</span>
2935

3036
<!-- Static scripts which are not imported through AMD nor part of the ConcatJS bundle. -->
3137
<script src="core-js/client/core.min.js"></script>

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
2-
<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
3-
<mat-progress-bar mode="query"></mat-progress-bar>
4-
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
1+
<mat-progress-bar
2+
aria-label="Determinate progress bar"
3+
mode="determinate"
4+
[value]="determinateValue"></mat-progress-bar>
5+
6+
<mat-progress-bar
7+
aria-label="Buffer progress bar"
8+
mode="buffer"
9+
[value]="bufferValue"></mat-progress-bar>
10+
11+
<mat-progress-bar
12+
aria-label="Query progress bar"
13+
mode="query"></mat-progress-bar>
14+
15+
<mat-progress-bar
16+
aria-label="Determinate progress bar"
17+
mode="indeterminate"></mat-progress-bar>

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
<mat-progress-spinner [value]="value" [strokeWidth]="strokeWidth"></mat-progress-spinner>
2-
<mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
3-
<mat-spinner></mat-spinner>
1+
<mat-progress-spinner
2+
aria-label="Determinate progress spinner"
3+
[value]="value"
4+
[strokeWidth]="strokeWidth"></mat-progress-spinner>
5+
6+
<mat-progress-spinner
7+
aria-label="Indeterminate progress spinner"
8+
mode="indeterminate"
9+
[diameter]="diameter"></mat-progress-spinner>
10+
11+
<mat-spinner aria-label="Shorthand indeterminate progress spinner"></mat-spinner>

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,17 @@
1-
<mat-progress-bar mode="determinate" [value]="determinateValue"></mat-progress-bar>
2-
<mat-progress-bar mode="buffer" [value]="bufferValue"></mat-progress-bar>
3-
<mat-progress-bar mode="query"></mat-progress-bar>
4-
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
1+
<mat-progress-bar
2+
aria-label="Determinate progress bar"
3+
mode="determinate"
4+
[value]="determinateValue"></mat-progress-bar>
5+
6+
<mat-progress-bar
7+
aria-label="Buffer progress bar"
8+
mode="buffer"
9+
[value]="bufferValue"></mat-progress-bar>
10+
11+
<mat-progress-bar
12+
aria-label="Query progress bar"
13+
mode="query"></mat-progress-bar>
14+
15+
<mat-progress-bar
16+
aria-label="Determinate progress bar"
17+
mode="indeterminate"></mat-progress-bar>

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
<mat-progress-spinner [value]="57"></mat-progress-spinner>
2-
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
3-
<mat-spinner></mat-spinner>
1+
<mat-progress-spinner
2+
aria-label="Determinate progress spinner"
3+
[value]="57"></mat-progress-spinner>
4+
5+
<mat-progress-spinner
6+
aria-label="Indeterminate progress spinner"
7+
mode="indeterminate"></mat-progress-spinner>
8+
9+
<mat-spinner aria-label="Shorthand indeterminate progress spinner"></mat-spinner>

‎src/e2e-app/test_suite.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ def e2e_test_suite(name, data = [], tags = ["e2e"], deps = []):
66
configuration = "//src/e2e-app:protractor.conf.js",
77
data = [
88
"//tools/axe-protractor",
9-
"@npm//axe-webdriverjs",
9+
"@npm//@axe-core/webdriverjs",
1010
] + data,
1111
on_prepare = "//src/e2e-app:start-devserver.js",
1212
server = "//src/e2e-app:devserver",

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<section class="demo-virtual-scroll-uniform-size">
2-
<h3>Uniform size</h3>
3-
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
2+
<h2>Uniform size</h2>
3+
<cdk-virtual-scroll-viewport class="demo-viewport" autosize tabindex="0">
44
<div *cdkVirtualFor="let size of uniformItems; let i = index; let odd = odd" class="demo-item"
55
[style.height.px]="size" [class.demo-odd]="odd" [attr.data-index]="i">
66
Uniform Item #{{i}} - ({{size}}px)
@@ -9,8 +9,8 @@ <h3>Uniform size</h3>
99
</section>
1010

1111
<section class="demo-virtual-scroll-variable-size">
12-
<h3>Random size</h3>
13-
<cdk-virtual-scroll-viewport class="demo-viewport" autosize>
12+
<h2>Random size</h2>
13+
<cdk-virtual-scroll-viewport class="demo-viewport" autosize tabindex="0">
1414
<div *cdkVirtualFor="let size of variableItems; let i = index; let odd = odd" class="demo-item"
1515
[style.height.px]="size" [class.demo-odd]="odd" [attr.data-index]="i">
1616
Variable Item #{{i}} - ({{size}}px)

‎tools/axe-protractor/index.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Protractor Plugin to run axe-core accessibility audits after Angular bootstrapped.
55
*/
66

7-
const AxeBuilder = require('axe-webdriverjs');
7+
const AxeBuilder = require('@axe-core/webdriverjs');
88
const {buildMessage} = require('./build-message');
99

1010
/* List of pages which were already checked by axe-core and shouldn't run again */
@@ -13,10 +13,19 @@ const checkedPages = [];
1313
/**
1414
* Protractor plugin hook which always runs when Angular successfully bootstrapped.
1515
*/
16-
async function onPageStable() {
17-
await AxeBuilder(browser.driver)
18-
.configure(this.config || {})
19-
.analyze(results => handleResults(this, results));
16+
function onPageStable() {
17+
return new Promise((resolve, reject) => {
18+
new AxeBuilder(browser.driver)
19+
.configure(this.config || {})
20+
.analyze((err, results) => {
21+
if (err) {
22+
reject(err);
23+
} else {
24+
handleResults(this, results);
25+
resolve(results);
26+
}
27+
});
28+
});
2029
}
2130

2231
/**
@@ -26,22 +35,15 @@ async function onPageStable() {
2635
* @param {!axe.AxeResults} results
2736
*/
2837
function handleResults(context, results) {
29-
3038
if (checkedPages.indexOf(results.url) === -1) {
31-
3239
checkedPages.push(results.url);
3340

3441
results.violations.forEach(violation => {
35-
3642
let specName = `${violation.help} (${results.url})`;
3743
let message = '\n' + buildMessage(violation);
38-
3944
context.addFailure(message, {specName});
40-
4145
});
42-
4346
}
44-
4547
}
4648

4749
exports.name = 'protractor-axe';

0 commit comments

Comments
 (0)