d80d6ea3f6
Previously, styling of `<code>` elements utilized the `:not()` CSS pseudo-class with multiple selectors (`:not(h1, h2, ...)`). It turns out that older browsers (such as IE11) do not support multiple selectors in a single `:not()` instance. (See [MDN][1] and [CanIUse][2] for more info.) This commit fixes `<code>` styling to use multiple separate `:not()` instances instead (`:not(h1):not(h2)...`), so that they are styled correctly on older browsers as well. NOTE: This change seems to trigger some kind of bug in LightHouse that causes the a11y score of `/start` to be calculated as 0 (which is clearly wrong). This happens on Linux (tested on CI and locally using the Windows Subsystem for Linux (WSL)) - on Windows the score is computed correctly as 98/100. ([Example failure][3]) The bug seems to be related to the layout of the content and goes away if we change the viewport size (for example, switching to LightHouse's `desktop` config) or make another change that affects the content's layout (for example, reducing the padding of `<code>` elements). To work around the issue, this commit updates the `test-aio-a11y.js` script to test `/start-routing` instead of `/start`. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=Using%20two%20selectors [2]: https://caniuse.com/css-not-sel-list [3]: https://circleci.com/gh/angular/angular/931038 PR Close #41051
40 lines
1008 B
JavaScript
40 lines
1008 B
JavaScript
#!/bin/env node
|
|
'use strict';
|
|
|
|
/**
|
|
* Usage:
|
|
* ```sh
|
|
* node scripts/test-aio-a11y <origin>
|
|
* ```
|
|
*
|
|
* Runs accessibility audits on several (pre-defined) pages on the specified origin. It fails, if
|
|
* the score for any page is below the minimum (see `MIN_SCORES_PER_PAGE` below).
|
|
*
|
|
* `<origin>` is the origin (scheme + hostname + port) of an angular.io deployment. It can be remote
|
|
* (e.g. `https://next.angular.io`) or local (e.g. `http://localhost:4200`).
|
|
*/
|
|
|
|
// Imports
|
|
const sh = require('shelljs');
|
|
sh.set('-e');
|
|
|
|
// Constants
|
|
const MIN_SCORES_PER_PAGE = {
|
|
'': 100,
|
|
'api': 100,
|
|
'api/core/Directive': 98,
|
|
'cli': 98,
|
|
'cli/add': 98,
|
|
'docs': 100,
|
|
'guide/docs-style-guide': 96,
|
|
'start-routing': 93,
|
|
'tutorial': 98,
|
|
};
|
|
|
|
// Run
|
|
const auditWebAppCmd = `"${process.execPath}" "${__dirname}/audit-web-app"`;
|
|
const origin = process.argv[2];
|
|
for (const [page, minScore] of Object.entries(MIN_SCORES_PER_PAGE)) {
|
|
sh.exec(`${auditWebAppCmd} ${origin}/${page} accessibility:${minScore}`);
|
|
}
|