A new set of Nightwatch tests have been added to core that take advantage of the recently added Nightwatch Axe integration .
These tests use the nightwatch_a11y_testing install profile, created specifically for these tests. This profile can be expanded in future issues to broaden the scope of core's accessibility testing coverage.
The Nightwatch Axe tests visit common Drupal pages and run the default Axe Core accessibility scans. There are separate tests for the admin themes and the default theme. which scan are commonly visited for those specific theme types. The themes used for these tests mirror Drupal's defaults: Claro for admin theme tests and Olivero for default theme tests. Command line args make it possible to run these tests with different core/contrib/custom themes.
Running tests with custom settings
From the testing readme:
* To run a11y tests for both the admin and default themes.
`yarn test:nightwatch --tag a11y`
* To run a11y tests for the admin theme only.
`yarn test:nightwatch --tag a11y:admin`
* To run a11y tests for the default theme only.
`yarn test:nightwatch --tag a11y:default`
* To run an a11y test for a custom theme used as the default theme.
`yarn test:nightwatch --tag a11y:default --defaultTheme bartik`
* To run an a11y test for a custom admin theme.
`yarn test:nightwatch --tag a11y:admin --adminTheme seven`Skipping Rules
The not Drupal specific, but part of the Nightwatch axeRun method. It is mentioned here due to its significance in implementing theses tests
Nightwatch Axe tests default to checking all of Axe core's accessibility rules. In some cases, some rules will not pass on a page and it will be necessary to skip certain rules so tests will pass without fully removing the page from the accessibility testing scope. This is done by disabling specific rules in the options argument sent to axeRun(). The example below disables the color-contrast, duplicate-id-active, region rules.
.axeRun('body', {
rules: {
'color-contrast': { enabled: false },
'duplicate-id-active': { enabled: false },
region: { enabled: false },
},
);