Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

axe-core

Package Overview
Dependencies
Maintainers
4
Versions
1374
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

axe-core - npm Package Compare versions

Comparing version 3.2.2-canary.577a1f9 to 3.2.2-canary.6cf8b2f

8

axe.d.ts

@@ -1,2 +0,2 @@

// Type definitions for axe-core 3.0.2
// Type definitions for axe-core
// Project: https://github.com/dequelabs/axe-core

@@ -158,3 +158,3 @@ // Definitions by: Marcy Sutton <https://github.com/marcysutton>

/**
* Object for aXe Results
* Object for axe Results
*/

@@ -169,3 +169,3 @@ var AxeResults: AxeResults;

* @param {RunCallback} callback Optional The function to invoke when analysis is complete.
* @returns {Promise<AxeResults>|void} If the callback was not defined, aXe will return a Promise.
* @returns {Promise<AxeResults>|void} If the callback was not defined, axe will return a Promise.
*/

@@ -188,3 +188,3 @@ function run(context?: ElementContext): Promise<AxeResults>;

/**
* Method for configuring the data format used by aXe. Helpful for adding new
* Method for configuring the data format used by axe. Helpful for adding new
* rules, which must be registered with the library to execute.

@@ -191,0 +191,0 @@ * @param {Spec} Spec Object with valid `branding`, `reporter`, `checks` and `rules` data

{
"name": "axe-core",
"version": "3.2.2-canary.577a1f9",
"version": "3.2.2-canary.6cf8b2f",
"contributors": [

@@ -5,0 +5,0 @@ {

@@ -5,3 +5,3 @@ # Change Log

## [3.2.2-canary.577a1f9](https://github.com/dequelabs/axe-core/compare/v3.2.2...v3.2.2-canary.577a1f9) (2019-04-10)
## [3.2.2-canary.6cf8b2f](https://github.com/dequelabs/axe-core/compare/v3.2.2...v3.2.2-canary.6cf8b2f) (2019-04-17)

@@ -13,2 +13,3 @@

* Add treegrid as allowed parent to rowgroup ([#1435](https://github.com/dequelabs/axe-core/issues/1435)) ([94e9893](https://github.com/dequelabs/axe-core/commit/94e9893)), closes [#1386](https://github.com/dequelabs/axe-core/issues/1386)
* Exclude iframe for html-has-lang rule (Issue 1424) ([#1430](https://github.com/dequelabs/axe-core/issues/1430)) ([98b5ed2](https://github.com/dequelabs/axe-core/commit/98b5ed2))
* make nullable impact properties have nullable types to match API docs ([#1477](https://github.com/dequelabs/axe-core/issues/1477)) ([efaed91](https://github.com/dequelabs/axe-core/commit/efaed91))

@@ -22,3 +23,9 @@ * Only load Promise polyfill if window.Promise is missing [[#1468](https://github.com/dequelabs/axe-core/issues/1468)] ([#1470](https://github.com/dequelabs/axe-core/issues/1470)) ([1d70306](https://github.com/dequelabs/axe-core/commit/1d70306))

### Features
* **rule:** add more perf timing metrics to rules ([#1472](https://github.com/dequelabs/axe-core/issues/1472)) ([98646e5](https://github.com/dequelabs/axe-core/commit/98646e5))
* **utils:** add support for complex CSS selectors ([#1494](https://github.com/dequelabs/axe-core/issues/1494)) ([a9f9ee5](https://github.com/dequelabs/axe-core/commit/a9f9ee5)), closes [#1493](https://github.com/dequelabs/axe-core/issues/1493)
## [3.2.2](https://github.com/dequelabs/axe-core/compare/v3.2.0...v3.2.2) (2019-03-07)

@@ -729,3 +736,3 @@

- Improvements to table rules
- aXe can be loaded in Node
- axe can be loaded in Node

@@ -732,0 +739,0 @@ <a name="2.0.0"></a>

@@ -113,9 +113,9 @@ # Contributing

## Using aXe with TypeScript
## Using axe with TypeScript
### aXe Development
### Axe Development
The TypeScript definition file for axe-core is distributed with this module and can be found in [axe.d.ts](./axe.d.ts). It currently supports TypeScript 2.0+.
To maintain aXe support for TypeScript you must first install it (globally recommended):
To maintain axe support for TypeScript you must first install it (globally recommended):

@@ -132,5 +132,5 @@ ```console

## Including aXe's type definition in tests
## Including axe's type definition in tests
Installing aXe to run accessibility tests in your TypeScript project should be as simple as importing the module:
Installing axe to run accessibility tests in your TypeScript project should be as simple as importing the module:

@@ -137,0 +137,0 @@ ```js

@@ -1,2 +0,2 @@

# aXe Javascript Accessibility API
# Axe Javascript Accessibility API

@@ -31,3 +31,3 @@ ## Table of Contents

The aXe API is designed to be an improvement over the previous generation of accessibility APIs. It provides the following benefits:
The axe API is designed to be an improvement over the previous generation of accessibility APIs. It provides the following benefits:

@@ -43,5 +43,5 @@ - Runs in any modern browser

This section gives a quick description of how to use the aXe APIs to analyze web page content and return a JSON object that lists any accessibility violations found.
This section gives a quick description of how to use the axe APIs to analyze web page content and return a JSON object that lists any accessibility violations found.
The aXe API can be used as part of a broader process that is performed on many, if not all, pages of a website. The API is used to analyze web page content and return a JSON object that lists any accessibility violations found. Here is how to get started:
The axe API can be used as part of a broader process that is performed on many, if not all, pages of a website. The API is used to analyze web page content and return a JSON object that lists any accessibility violations found. Here is how to get started:

@@ -58,7 +58,7 @@ 1. Load page in testing system

The aXe APIs are provided in the javascript file axe.js. It must be included in the web page under test. Parameters are sent as javascript function parameters. Results are returned in JSON format.
The axe APIs are provided in the javascript file axe.js. It must be included in the web page under test. Parameters are sent as javascript function parameters. Results are returned in JSON format.
### Full API Reference for Developers
For a full listing of API offered by aXe, clone the repository and run `npm run api-docs`. This generates `jsdoc` documentation under `doc/api` which can be viewed using the browser.
For a full listing of API offered by axe, clone the repository and run `npm run api-docs`. This generates `jsdoc` documentation under `doc/api` which can be viewed using the browser.

@@ -69,3 +69,3 @@ ### API Notes

- The `"helpUrl"` in the results object is a link to a broader description of the accessibility issue and suggested remediation. These links point to Deque University help pages, which do not require a login.
- aXe does not test hidden regions, such as inactive menus or modal windows. To test those for accessibility, write tests that activate or render the regions visible and run the analysis again.
- Axe does not test hidden regions, such as inactive menus or modal windows. To test those for accessibility, write tests that activate or render the regions visible and run the analysis again.

@@ -141,3 +141,3 @@ ### API Name: axe.getRules

To configure the format of the data used by aXe. This can be used to add new rules, which must be registered with the library to execute.
To configure the format of the data used by axe. This can be used to add new rules, which must be registered with the library to execute.

@@ -184,3 +184,3 @@ #### Description

- `id` - string(required). This uniquely identifies the rule. If the rule already exists, it will be overridden with any of the attributes supplied. The attributes below that are marked required, are only required for new rules.
- `selector` - string(optional, default `*`). A CSS selector used to identify the elements that are passed into the rule for evaluation.
- `selector` - string(optional, default `*`). A [CSS selector](./developer-guide.md#supported-css-selectors) used to identify the elements that are passed into the rule for evaluation.
- `excludeHidden` - boolean(optional, default `true`). This indicates whether elements that are hidden from all users are to be passed into the rule for evaluation.

@@ -193,3 +193,3 @@ - `enabled` - boolean(optional, default `true`). Whether the rule is turned on. This is a common attribute for overriding.

- `tags` - array(optional, default `[]`). A list if the tags that "classify" the rule. In practice, you must supply some valid tags or the default evaluation will not invoke the rule. The convention is to include the standard (WCAG 2 and/or section 508), the WCAG 2 level, Section 508 paragraph, and the WCAG 2 success criteria. Tags are constructed by converting all letters to lower case, removing spaces and periods and concatinating the result. E.g. WCAG 2 A success criteria 1.1.1 would become ["wcag2a", "wcag111"]
- `matches` - string(optional, default `*`). A filtering CSS selector that will exclude elements that do not match the CSS selector.
- `matches` - string(optional, default `*`). A filtering [CSS selector](./developer-guide.md#supported-css-selectors) that will exclude elements that do not match the CSS selector.
- `disableOtherRules` - Disables all rules not included in the `rules` property.

@@ -261,8 +261,4 @@ - `locale` - A locale object to apply (at runtime) to all rules and checks, in the same shape as `/locales/*.json`.

2. A NodeList such as returned by `document.querySelectorAll`.
3. A CSS selector that selects the portion(s) of the document that must be analyzed. This includes:
3. A [CSS selector](./developer-guide.md#supported-css-selectors) that selects the portion(s) of the document that must be analyzed.
- A CSS selector as a class name (e.g. `.classname`)
- A CSS selector as a node name (e.g. `div`)
- A CSS selector of an element id (e.g. `#tag`)
4. An include-exclude object (see below)

@@ -275,3 +271,3 @@

- A node, or
- An array of arrays of CSS selectors
- An array of arrays of [CSS selectors](./developer-guide.md#supported-css-selectors)
- If the nested array contains a single string, that string is the CSS selector

@@ -350,15 +346,16 @@ - If the nested array contains multiple strings

| Property | Default | Description |
| --------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
| `runOnly` | n/a | Limit which rules are executed, based on names or tags |
| `rules` | n/a | Allow customizing a rule's properties (including { enable: false }) |
| `reporter` | `v1` | Which reporter to use (see [Configuration](#api-name-axeconfigure)) |
| `resultTypes` | n/a | Limit which result types are processed and aggregated |
| `xpath` | `false` | Return xpath selectors for elements |
| `absolutePaths` | `false` | Use absolute paths when creating element selectors |
| `iframes` | `true` | Tell axe to run inside iframes |
| `elementRef` | `false` | Return element references in addition to the target |
| `restoreScroll` | `false` | Scrolls elements back to before axe started |
| `frameWaitTime` | `60000` | How long (in milliseconds) axe waits for a response from embedded frames before timing out |
| `preload` | `false` | Any additional assets (eg: cssom) to preload before running rules. [See here for configuration details](#preload-configuration-details) |
| Property | Default | Description |
| ------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------- |
| `runOnly` | n/a | Limit which rules are executed, based on names or tags |
| `rules` | n/a | Allow customizing a rule's properties (including { enable: false }) |
| `reporter` | `v1` | Which reporter to use (see [Configuration](#api-name-axeconfigure)) |
| `resultTypes` | n/a | Limit which result types are processed and aggregated |
| `xpath` | `false` | Return xpath selectors for elements |
| `absolutePaths` | `false` | Use absolute paths when creating element selectors |
| `iframes` | `true` | Tell axe to run inside iframes |
| `elementRef` | `false` | Return element references in addition to the target |
| `restoreScroll` | `false` | Scrolls elements back to before axe started |
| `frameWaitTime` | `60000` | How long (in milliseconds) axe waits for a response from embedded frames before timing out |
| `preload` | `false` | Any additional assets (eg: cssom) to preload before running rules. [See here for configuration details](#preload-configuration-details) |
| `performanceTimer` | `false` | Log rule performance metrics to the console |

@@ -477,3 +474,3 @@ ###### Options Parameter Examples

The `resultTypes` option can be used to limit the result types that aXe will process, aggregate, and send to the reporter. This can be useful for improving performance on very large or complicated pages when you are only interested in certain types of results.
The `resultTypes` option can be used to limit the result types that axe will process, aggregate, and send to the reporter. This can be useful for improving performance on very large or complicated pages when you are only interested in certain types of results.

@@ -516,7 +513,7 @@ Types listed in this option are processed normally and report all of their results. Types _not_ listed process a maximum of one result. The caller can use this information to inform the user of the existence of that type of result if appropriate.

The callback parameter is a function that will be called when the asynchronous `axe.run` function completes. The callback function is passed two parameters. The first parameter will be an error thrown inside of aXe if axe.run could not complete. If axe completed correctly the first parameter will be null, and the second parameter will be the results object.
The callback parameter is a function that will be called when the asynchronous `axe.run` function completes. The callback function is passed two parameters. The first parameter will be an error thrown inside of axe if axe.run could not complete. If axe completed correctly the first parameter will be null, and the second parameter will be the results object.
#### Return Promise
If the callback was not defined, aXe will return a Promise instead. Axe does not polyfill a Promise library however. So on systems without support for Promises this feature is not available. If you are unsure if the systems you will need aXe on has Promise support we suggest you use the callback provided by axe.run instead.
If the callback was not defined, axe will return a Promise instead. Axe does not polyfill a Promise library however. So on systems without support for Promises this feature is not available. If you are unsure if the systems you will need axe on has Promise support we suggest you use the callback provided by axe.run instead.

@@ -678,3 +675,3 @@ #### Error Result

Register a plugin with the aXe plugin system. See [implementing a plugin](plugins.md) for more information on the plugin system
Register a plugin with the axe plugin system. See [implementing a plugin](plugins.md) for more information on the plugin system

@@ -718,3 +715,3 @@ ### API Name: axe.cleanup

- `virtualNode` – object, the flattened DOM tree to query against. `axe._tree` is available for this purpose during an audit; see below.
- `selector` – string, the CSS selector to use as a filter. For the most part, this should work seamlessly with `document.querySelectorAll`.
- `selector` – string, the [CSS selector](./developer-guide.md#supported-css-selectors) to use as a filter. For the most part, this should work seamlessly with `document.querySelectorAll`.

@@ -721,0 +718,0 @@ ##### Returns

@@ -16,3 +16,3 @@ # Code Submission Guidelines

This leads to more readable messages that are easy to follow when looking through the project
history. We will also use commit messages to generate the aXe Changelog document.
history. We will also use commit messages to generate the axe Changelog document.

@@ -19,0 +19,0 @@ A detailed explanation of Angular's guidelines and conventions can be found [on Google Docs](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#).

@@ -1,8 +0,13 @@

# aXe Developer Guide
# Axe Developer Guide
aXe runs a series of tests to check for accessibility of content and functionality on a website. A test is made up of a series of Rules which are, themselves, made up of Checks. aXe executes these Rules asynchronously and, when the Rules are finished running, runs a callback function which is passed a Result structure. Since some Rules run on the page level while others do not, tests will also run in one of two ways. If a document is specified, the page level rules will run, otherwise they will not.
Axe runs a series of tests to check for accessibility of content and functionality on a website. A test is made up of a series of Rules which are, themselves, made up of Checks. Axe executes these Rules asynchronously and, when the Rules are finished running, runs a callback function which is passed a Result structure. Since some Rules run on the page level while others do not, tests will also run in one of two ways. If a document is specified, the page level rules will run, otherwise they will not.
aXe 3.0 supports open Shadow DOM: see our virtual DOM APIs and test utilities for developing axe-core moving forward. Note: we do not and cannot support closed Shadow DOM.
Axe 3.0 supports open Shadow DOM: see our virtual DOM APIs and test utilities for developing axe-core moving forward. Note: we do not and cannot support closed Shadow DOM.
1. [Getting Started](#getting-started)
1. [Environment Pre-requisites](#environment-pre-requisites)
1. [Building axe.js](#building-axejs)
1. [Running Tests](#running-tests)
1. [API Reference](#api-reference)
1. [Supported CSS Selectors](#supported-css-selectors)
1. [Architecture Overview](#architecture-overview)

@@ -50,7 +55,16 @@ 1. [Rules](#rules)

[See API exposed on aXe](./API.md#section-2-api-reference)
[See API exposed on axe](./API.md#section-2-api-reference)
### Supported CSS Selectors
Axe supports the following CSS selectors:
- Type, Class, ID, and Universal selectors. E.g `div.main, #main`
- Pseudo selector `not`. E.g `th:not([scope])`
- Descendant and Child combinators. E.g. `table td`, `ul > li`
- Attribute selectors `=`, `^=`, `$=`, `*=`. E.g `a[href^="#"]`
## Architecture Overview
aXe tests for accessibility using objects called Rules. Each Rule tests for a high-level aspect of accessibility, such as color contrast, button labels, and alternate text for images. Each rule is made up of a series of Checks. Depending on the rule; all, some, or none of these checks must pass in order for the rule to pass.
Axe tests for accessibility using objects called Rules. Each Rule tests for a high-level aspect of accessibility, such as color contrast, button labels, and alternate text for images. Each rule is made up of a series of Checks. Depending on the rule; all, some, or none of these checks must pass in order for the rule to pass.

@@ -66,3 +80,3 @@ Upon execution, a Rule runs each of its Checks against all relevant nodes. Which nodes are relevant is determined by the Rule's `selector` property and `matches` function. If a Rule has no Checks that apply to a given node, the Rule will result in an inapplicable result.

- `id` - `String` A unique name of the Rule.
- `selector` - **optional** `String` which is a CSS selector that specifies the elements of the page on which the Rule runs. aXe-core will look inside of the light DOM and _open_ [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM) trees for elements matching the provided selector. If omitted, the rule will run against every node.
- `selector` - **optional** `String` which is a [CSS selector](#supported-css-selectors) that specifies the elements of the page on which the Rule runs. axe-core will look inside of the light DOM and _open_ [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM) trees for elements matching the provided selector. If omitted, the rule will run against every node.
- `excludeHidden` - **optional** `Boolean` Whether the rule should exclude hidden elements. Defaults to `true`.

@@ -167,3 +181,3 @@ - `enabled` - **optional** `Boolean` Whether the rule is enabled by default. Defaults to `true`.

When a Check is executed, its result is then added to a [CheckResult object](../lib/core/base/check-result.js). Much like the RuleResult object, the CheckResult object only contains information that is required to determine whether a Check, and its parent Rule passed or failed. `metadata` from the originating Check is combined later and will not be available until aXe reaches the reporting stage.
When a Check is executed, its result is then added to a [CheckResult object](../lib/core/base/check-result.js). Much like the RuleResult object, the CheckResult object only contains information that is required to determine whether a Check, and its parent Rule passed or failed. `metadata` from the originating Check is combined later and will not be available until axe reaches the reporting stage.

@@ -184,3 +198,3 @@ A CheckResult has the following properties:

To support open Shadow DOM while maintaining backwards compatibility, commons functions that
query DOM nodes must operate on an in-memory representation of the DOM using aXe-core’s
query DOM nodes must operate on an in-memory representation of the DOM using axe-core’s
built-in [API methods and utility functions](./API.md#virtual-dom-utilities).

@@ -218,3 +232,3 @@

To support open Shadow DOM, aXe-core has the ability to handle virtual nodes in [rule matches](#matches-function)
To support open Shadow DOM, axe-core has the ability to handle virtual nodes in [rule matches](#matches-function)
and [check evaluate](#check-evaluate) functions. The full set of API methods for Shadow DOM can be

@@ -238,3 +252,3 @@ found in the [API documentation](./API.md#virtual-dom-utilities), but the general

Core Utilities are an internal library that provides aXe with functionality used throughout its core processes. Most notably among these are the queue function and the DqElement constructor.
Core Utilities are an internal library that provides axe with functionality used throughout its core processes. Most notably among these are the queue function and the DqElement constructor.

@@ -241,0 +255,0 @@ #### ARIA Lookup Tables

{
"name": "axe-jasmine-example",
"description": "aXe Jasmine Example",
"description": "Axe Jasmine Example",
"version": "0.0.1",

@@ -5,0 +5,0 @@ "private": true,

# Jasmine README
This example demonstrates how to use aXe with the Jasmine unit testing framework.
This example demonstrates how to use axe with the Jasmine unit testing framework.

@@ -35,4 +35,4 @@ The unit test is in `spec/a11y.js`, and has two test cases: One that shows the

the results. The example is simply looking at the count of violations, but much
more detailed information is available if desired. The aXe documentation
more detailed information is available if desired. The axe documentation
should be consulted for more details on customizing and analyzing calls to
`axe.run`.

@@ -7,5 +7,5 @@ import React from 'react';

test('Link has no aXe violations', done => {
test('Link has no axe violations', done => {
const linkComponent = mountToDoc(
<Link page="http://www.axe-core.org">aXe website</Link>
<Link page="http://www.axe-core.org">axe website</Link>
);

@@ -12,0 +12,0 @@ const linkNode = linkComponent.getDOMNode();

{
"name": "axe-jest-react-example",
"description": "aXe Jest + React Example",
"description": "Axe Jest + React Example",
"version": "0.0.1",

@@ -20,4 +20,4 @@ "private": true,

"babel-preset-react": "^6.24.1",
"enzyme": "^3.5.0",
"enzyme-adapter-react-16": "^1.3.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"jest": "^22.4.0",

@@ -24,0 +24,0 @@ "jest-cli": "^23.0.1",

# Jest + React README
This example demonstrates how to use aXe to test React components using the
This example demonstrates how to use axe to test React components using the
Jest unit testing framework.

@@ -5,0 +5,0 @@

{
"name": "axe-mocha-example",
"description": "aXe Mocha Example",
"description": "Axe Mocha Example",
"version": "0.0.1",

@@ -5,0 +5,0 @@ "private": true,

# Mocha README
This example demonstrates how to use aXe with the Mocha unit testing framework.
This example demonstrates how to use axe with the Mocha unit testing framework.

@@ -35,4 +35,4 @@ The unit test is in `test/a11y.js`, and has two test cases: One that shows the

the results. The example is simply looking at the count of violations, but much
more detailed information is available if desired. The aXe documentation
more detailed information is available if desired. The axe documentation
should be consulted for more details on customizing and
analyzing calls to `axe.run`.
{
"name": "axe-phantomjs-example",
"description": "aXe PhantomJS Example",
"description": "Axe PhantomJS Example",
"version": "0.0.1",

@@ -5,0 +5,0 @@ "private": true,

# PhantomJS README
This example demonstrates how to use aXe with PhantomJS.
This example demonstrates how to use axe with PhantomJS.

@@ -14,5 +14,5 @@ ## To configure the example

- Move to the `doc/examples/phantomjs` directory
- `phantomjs axe-phantom.js http://www.deque.com` to run aXe in PhantomJS
- `phantomjs axe-phantom.js http://www.deque.com` to run axe in PhantomJS
against http://www.deque.com and output results to the terminal
- `phantomjs axe-phantom.js http://www.deque.com results.json` to run aXe in PhantomJS
- `phantomjs axe-phantom.js http://www.deque.com results.json` to run axe in PhantomJS
against http://www.deque.com and save results to `results.json`
{
"name": "axe-qunit-example",
"description": "aXe QUnit Example",
"description": "Axe QUnit Example",
"version": "0.0.1",

@@ -5,0 +5,0 @@ "private": true,

# QUnit README
This example demonstrates how to use aXe with the QUnit unit testing framework.
This example demonstrates how to use axe with the QUnit unit testing framework.

@@ -35,4 +35,4 @@ The unit test is in `test/a11y.js`, and has two test cases: One that shows the

the results. The example is simply looking at the count of violations, but much
more detailed information is available if desired. The aXe documentation
more detailed information is available if desired. The axe documentation
should be consulted for more details on customizing and
analyzing calls to `axe.run`.
# Plugins
aXe implements a general purpose plugin system that takes advantage of the cross-domain iframe capabilities of aXe and allows for adding functionality that extends the aXe library outside of its core automated accessibility auditing realm.
Axe implements a general purpose plugin system that takes advantage of the cross-domain iframe capabilities of axe and allows for adding functionality that extends the axe library outside of its core automated accessibility auditing realm.

@@ -9,3 +9,3 @@ The plugin system was initially designed to support functionality like highlighting of elements but has also been utilized for a variety of tasks including implementing functionality that aids with manual accessibility auditing.

Plugins can be viewed as a registry of tools. The plugins themselves are registered with aXe and then allow themselves for the registration of plugin instances.
Plugins can be viewed as a registry of tools. The plugins themselves are registered with axe and then allow themselves for the registration of plugin instances.

@@ -18,5 +18,5 @@ Lets walk through a plugin implementation as an example to illustrate how plugins and plugin instances work.

Plugins currently support two functions, a "run" function and a "collect" function. Together these functions can be combined to implement complex behaviors on top of the aXe system.
Plugins currently support two functions, a "run" function and a "collect" function. Together these functions can be combined to implement complex behaviors on top of the axe system.
In order to create such a plugin, we need to implement the "run" function for the plugin, and the command that registers and executes the "run" function within each iframe on the page that contains aXe. Lets look at what a noop implementation of this run function would look like:
In order to create such a plugin, we need to implement the "run" function for the plugin, and the command that registers and executes the "run" function within each iframe on the page that contains axe. Lets look at what a noop implementation of this run function would look like:

@@ -82,12 +82,12 @@ #### Basic plugin

1. The plugin contains an id. This id is then used to access the plugin and its implementations.
2. The plugin is registered with aXe (in each iframe) using the `axe.registerPlugin()` function.
3. The plugin registers the "run" function and the "commands" with the aXe system. This allows plugin implementations to be registered with the plugin, and to be executed. It also registers handlers for each of the commands within each of the iframes, so that the plugin can coordinate with itself across the iframe boundaries.
2. The plugin is registered with axe (in each iframe) using the `axe.registerPlugin()` function.
3. The plugin registers the "run" function and the "commands" with the axe system. This allows plugin implementations to be registered with the plugin, and to be executed. It also registers handlers for each of the commands within each of the iframes, so that the plugin can coordinate with itself across the iframe boundaries.
When the caller wants to call a plugin instance, it does so by calling the plugin's "run" function in the top level document and passing the id of the plugin instance it would like to call, which plugin instance action it would like to call, the options and a callback function.
The plugin takes this information and sends the same instructions to its implementation in each iframe by communicating to its own command(s) using the aXe utility function `axe.utils.sendCommandToFrame()`.
The plugin takes this information and sends the same instructions to its implementation in each iframe by communicating to its own command(s) using the axe utility function `axe.utils.sendCommandToFrame()`.
The plugin waits for the commands in the iframes to complete and then executes its instances' action function within the current document.
In the above implementation, the aXe promise utility `axe.utils.queue()` is used to coordinate the asynchronous handling of communication accross iframes.
In the above implementation, the axe promise utility `axe.utils.queue()` is used to coordinate the asynchronous handling of communication accross iframes.

@@ -124,4 +124,4 @@ The command handler callback runs the plugin's run function within each iframe. This essentially operates like a recursive call to the run function for the plugin within each iframe.

Above you can see the implementation of a `doStuff` "highlight" instance (the actual highlighting code is not included so as to simplify the example and is left as an exercise for the reader). Plugin instances have an id (which is used to address them), a cleanup function and any number of private or action members. The doStuff `add()` function is called to register this instance with the plugin (notice that we did not have to implement this add function, aXe did that for us). In this case, the action is called "run", so after registration, this instance can be called by calling `axe.plugins.doStuff.run('highlight', 'run', options, callback);` in the top-level iframe on the page.
Above you can see the implementation of a `doStuff` "highlight" instance (the actual highlighting code is not included so as to simplify the example and is left as an exercise for the reader). Plugin instances have an id (which is used to address them), a cleanup function and any number of private or action members. The doStuff `add()` function is called to register this instance with the plugin (notice that we did not have to implement this add function, axe did that for us). In this case, the action is called "run", so after registration, this instance can be called by calling `axe.plugins.doStuff.run('highlight', 'run', options, callback);` in the top-level iframe on the page.
The cleanup functions for all plugin instances are called when the `axe.cleanup()` function is called. Note that this cleanup function will automatically call all the cleanup functions for all the plugin instances in all iframes on the page.

@@ -10,4 +10,4 @@ # Projects that use axe-core

1. [WorldSpace Comply](https://www.deque.com/products/worldspace-comply/)
1. [aXe Chrome Extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
1. [aXe Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)
1. [Axe Chrome Extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd)
1. [Axe Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)
1. [axe-cli](https://www.npmjs.com/package/axe-cli)

@@ -27,3 +27,3 @@ 1. [axe-webdriverjs](https://www.npmjs.com/package/axe-webdriverjs)

1. [Ace, by DAISY](https://daisy.github.io/ace)
1. [axe Selenium Python](https://github.com/mozilla-services/axe-selenium-python)
1. [Axe Selenium Python](https://github.com/mozilla-services/axe-selenium-python)
1. [gulp-axe-webdriver](https://github.com/felixzapata/gulp-axe-webdriver)

@@ -38,11 +38,11 @@ 1. [Ghost-Axe](https://www.npmjs.com/package/ghost-axe)

1. [Jest-axe](https://github.com/nickcolley/jest-axe)
1. [aXe audit runner for CrawlKit](https://github.com/crawlkit/runner-axe)
1. [Selenium IDE aXe Extension](https://github.com/bkardell/selenium-ide-axe)
1. [axe audit runner for CrawlKit](https://github.com/crawlkit/runner-axe)
1. [Selenium IDE axe Extension](https://github.com/bkardell/selenium-ide-axe)
1. [Axegrinder](https://github.com/claflamme/axegrinder)
1. [Rocket Validator](https://rocketvalidator.com)
1. [aXe Reports](https://github.com/louis-reed/axe-reports)
1. [aXe WebdriverIO](https://github.com/snagi/axe-webdriverio)
1. [aXe-TestCafe](https://github.com/helen-dikareva/axe-testcafe)
1. [axe Reports](https://github.com/louis-reed/axe-reports)
1. [axe WebdriverIO](https://github.com/snagi/axe-webdriverio)
1. [axe-TestCafe](https://github.com/helen-dikareva/axe-testcafe)
1. [Web Audit University of Nebraska-Lincoln](https://webaudit.unl.edu/)
1. [Vorlon.js Remote Debugger](https://github.com/MicrosoftDX/Vorlonjs)
1. [Terra's Webdriver.io Accessibility Service](https://github.com/cerner/terra-toolkit/blob/master/docs/AxeService.md)

@@ -5,3 +5,3 @@ # Developing Axe-core Rules

A rule is a JSON Object that defines a test for aXe-core to run. At a high level, think of a rule as doing two things. First it finds all elements that it should test, and after that it runs a number of checks to see if those selected elements pass or fail the rule.
A rule is a JSON Object that defines a test for axe-core to run. At a high level, think of a rule as doing two things. First it finds all elements that it should test, and after that it runs a number of checks to see if those selected elements pass or fail the rule.

@@ -37,3 +37,3 @@ ## Rule Select and Matches

| metadata.description | Description of what a rule does |
| metadata.help | Short description of a violation, used in the aXe extension sidebar |
| metadata.help | Short description of a violation, used in the axe extension sidebar |

@@ -40,0 +40,0 @@ ## Check Properties

@@ -529,5 +529,5 @@ /*global Rule, Check, RuleResult, commons: true */

if (!rule) {
// If you see this, you're probably running the Mocha tests with the aXe extension installed
// If you see this, you're probably running the Mocha tests with the axe extension installed
throw new Error(
'Result for unknown rule. You may be running mismatch aXe-core versions'
'Result for unknown rule. You may be running mismatch axe-core versions'
);

@@ -534,0 +534,0 @@ }

@@ -92,12 +92,44 @@ /*global RuleResult, createExecutionContext, SupportError */

* @param {Context} context The resolved Context object
* @param {Mixed} options Options specific to this rule
* @return {Array} All matching `HTMLElement`s
*/
Rule.prototype.gather = function(context) {
'use strict';
Rule.prototype.gather = function(context, options = {}) {
const markStart = 'mark_gather_start_' + this.id;
const markEnd = 'mark_gather_end_' + this.id;
const markHiddenStart = 'mark_isHidden_start_' + this.id;
const markHiddenEnd = 'mark_isHidden_end_' + this.id;
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markStart);
}
var elements = axe.utils.select(this.selector, context);
if (this.excludeHidden) {
return elements.filter(function(element) {
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markHiddenStart);
}
elements = elements.filter(function(element) {
return !axe.utils.isHidden(element.actualNode);
});
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markHiddenEnd);
axe.utils.performanceTimer.measure(
'rule_' + this.id + '#gather_axe.utils.isHidden',
markHiddenStart,
markHiddenEnd
);
}
}
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markEnd);
axe.utils.performanceTimer.measure(
'rule_' + this.id + '#gather',
markStart,
markEnd
);
}
return elements;

@@ -156,5 +188,3 @@ };

// Matches throws an error when it lacks support for document methods
nodes = this.gather(context).filter(node =>
this.matches(node.actualNode, node, context)
);
nodes = this.gatherAndMatchNodes(context, options);
} catch (error) {

@@ -168,2 +198,3 @@ // Exit the rule execution if matches fails

axe.log(
this.id,
'gather (',

@@ -220,3 +251,3 @@ nodes.length,

axe.utils.performanceTimer.measure(
'runchecks_' + this.id,
'rule_' + this.id + '#runchecks',
markChecksStart,

@@ -233,2 +264,34 @@ markChecksEnd

/**
* Selects `HTMLElement`s based on configured selector and filters them based on
* the rules matches function
* @param {Rule} rule The rule to check for after checks
* @param {Context} context The resolved Context object
* @param {Mixed} options Options specific to this rule
* @return {Array} All matching `HTMLElement`s
*/
Rule.prototype.gatherAndMatchNodes = function(context, options) {
const markMatchesStart = 'mark_matches_start_' + this.id;
const markMatchesEnd = 'mark_matches_end_' + this.id;
let nodes = this.gather(context, options);
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markMatchesStart);
}
nodes = nodes.filter(node => this.matches(node.actualNode, node, context));
if (options.performanceTimer) {
axe.utils.performanceTimer.mark(markMatchesEnd);
axe.utils.performanceTimer.measure(
'rule_' + this.id + '#matches',
markMatchesStart,
markMatchesEnd
);
}
return nodes;
};
/**
* Iterates the rule's Checks looking for ones that have an after function

@@ -235,0 +298,0 @@ * @private

/*exported axe, commons */
/*global axeFunction, module, define */
// exported namespace for aXe
// exported namespace for axe
/*eslint no-use-before-define: 0, no-unused-vars: 0*/

@@ -5,0 +5,0 @@ var axe = axe || {};

@@ -43,3 +43,3 @@ /*global helpers */

/**
* Aggregrate and process the aXe results,
* Aggregrate and process the axe results,
* adding desired data to nodes and relatedNodes in each rule result.

@@ -46,0 +46,0 @@ *

@@ -43,3 +43,3 @@ function err(message, node) {

// Give aXe 60s (or user-supplied value) to respond to 'axe.start'
// Give axe 60s (or user-supplied value) to respond to 'axe.start'
var frameWaitTime =

@@ -46,0 +46,0 @@ (parameters.options && parameters.options.frameWaitTime) || 60000;

(function(axe) {
var parser = new axe.imports.CssSelectorParser();
parser.registerSelectorPseudos('not');
parser.registerNestingOperators('>');
parser.registerAttrEqualityMods('^', '$', '*');
axe.utils.cssParser = parser;
})(axe);

@@ -309,4 +309,4 @@ const escapeSelector = axe.utils.escapeSelector;

: a.species === b.species
? 0
: 1;
? 0
: 1;
});

@@ -313,0 +313,0 @@ }

@@ -30,3 +30,3 @@ /*global utils, axe */

/**
* @member {Function} start Kicks off performance timing for overall aXe audit
* @member {Function} start Kicks off performance timing for overall axe audit
*/

@@ -94,3 +94,8 @@ start: function() {

) {
var measures = window.performance.getEntriesByType('measure');
// only output measures that were started after axe started, otherwise
// we get measures made by the page before axe ran (which is confusing)
var axeStart = window.performance.getEntriesByName('mark_axe_start')[0];
var measures = window.performance
.getEntriesByType('measure')
.filter(measure => measure.startTime >= axeStart.startTime);
for (var i = 0; i < measures.length; ++i) {

@@ -97,0 +102,0 @@ var req = measures[i];

@@ -155,3 +155,3 @@ // The lines below is because the latedef option does not work

if (p.name === 'not') {
expressions = axe.utils.cssParser.parse(p.value);
expressions = p.value;
expressions = expressions.selectors

@@ -158,0 +158,0 @@ ? expressions.selectors

@@ -16,3 +16,3 @@ /*global uuid, utils, axe */

/**
* get the unique string to be used to identify our instance of aXe
* get the unique string to be used to identify our instance of axe
* @private

@@ -19,0 +19,0 @@ */

{
"incompleteFallbackMessage": "aXe couldn't tell the reason. Time to break out the element inspector!"
"incompleteFallbackMessage": "axe couldn't tell the reason. Time to break out the element inspector!"
}
{
"id": "html-has-lang",
"selector": "html",
"matches": "window-is-top.js",
"tags": ["cat.language", "wcag2a", "wcag311"],

@@ -5,0 +6,0 @@ "metadata": {

{
"lang": "nl",
"checks": {
"abstractrole": {
"pass": "Er zijn geen abstracte rollen (role) gebruikt",
"fail": "Gebruik geen abstracte rollen (role)"
},
"color-contrast": {
"pass": "Element heeft voldoende contrast, namelijk {{=it.data.contrastRatio}}",
"fail": "Element heeft onvoldoende contrast, {{=it.data.contrastRatio}} (Voorgrondkleur: {{=it.data.fgColor}}, achtergrondkleur: {{=it.data.bgColor}}, tekstgrootte: {{=it.data.fontSize}}, tekstdikte: {{=it.data.fontWeight}})",
"incomplete": {
"bgImage": "Element's achtergrondkleur kon niet worden bepaald vanwegen een achtergrondafbeelding",
"bgGradient": "Element's achtergrondkleur kon niet worden bepaald vanwegen een gradient kleur",
"imgNode": "Element's achtergrondkleur kon niet worden bepaald vanwegen een image node",
"bgOverlap": "Element's achtergrondkleur kon niet worden bepaald vanwegen een overlappend element",
"fgAlpha" : "Element's achtergrondkleur kon niet worden bepaald vanwegen alpha transparency",
"default": "Contrastkleur kon niet bepaald worden"
}
}
},
"rules": {
"aria-required-attr": {
"description": "Zorg dat elementen met ARIA rollen (role) de vereiste ARIA attributen hebben",
"help": "Voorzien de vereiste ARIA attributen"
}
},
"failureSummaries": {
"none": {
"failureMessage": "Los al het volgende op:{{~it:value}}\n {{=value.split('\\n').join('\\n ')}}{{~}}"
},
"any": {
"failureMessage": "Gebruik een van de volgende oplossingen:{{~it:value}}\n {{=value.split('\\n').join('\\n ')}}{{~}}"
}
},
"incompleteFallbackMessage": "aXe kon de reden niet vertellen. Tijd om de element inspecteur uit te breken!"
}
"lang": "nl",
"checks": {
"abstractrole": {
"pass": "Er zijn geen abstracte rollen (role) gebruikt",
"fail": "Gebruik geen abstracte rollen (role)"
},
"color-contrast": {
"pass": "Element heeft voldoende contrast, namelijk {{=it.data.contrastRatio}}",
"fail": "Element heeft onvoldoende contrast, {{=it.data.contrastRatio}} (Voorgrondkleur: {{=it.data.fgColor}}, achtergrondkleur: {{=it.data.bgColor}}, tekstgrootte: {{=it.data.fontSize}}, tekstdikte: {{=it.data.fontWeight}})",
"incomplete": {
"bgImage": "Element's achtergrondkleur kon niet worden bepaald vanwegen een achtergrondafbeelding",
"bgGradient": "Element's achtergrondkleur kon niet worden bepaald vanwegen een gradient kleur",
"imgNode": "Element's achtergrondkleur kon niet worden bepaald vanwegen een image node",
"bgOverlap": "Element's achtergrondkleur kon niet worden bepaald vanwegen een overlappend element",
"fgAlpha": "Element's achtergrondkleur kon niet worden bepaald vanwegen alpha transparency",
"default": "Contrastkleur kon niet bepaald worden"
}
}
},
"rules": {
"aria-required-attr": {
"description": "Zorg dat elementen met ARIA rollen (role) de vereiste ARIA attributen hebben",
"help": "Voorzien de vereiste ARIA attributen"
}
},
"failureSummaries": {
"none": {
"failureMessage": "Los al het volgende op:{{~it:value}}\n {{=value.split('\\n').join('\\n ')}}{{~}}"
},
"any": {
"failureMessage": "Gebruik een van de volgende oplossingen:{{~it:value}}\n {{=value.split('\\n').join('\\n ')}}{{~}}"
}
},
"incompleteFallbackMessage": "axe kon de reden niet vertellen. Tijd om de element inspecteur uit te breken!"
}
{
"name": "axe-core",
"description": "Accessibility engine for automated Web UI testing",
"version": "3.2.2-canary.577a1f9",
"version": "3.2.2-canary.6cf8b2f",
"license": "MPL-2.0",

@@ -48,3 +48,3 @@ "engines": {

"bdd",
"aXe"
"axe"
],

@@ -97,3 +97,3 @@ "main": "axe.js",

"fs-extra": "^7.0.0",
"globby": "^8.0.1",
"globby": "^9.1.0",
"grunt": "^1.0.3",

@@ -115,3 +115,3 @@ "grunt-babel": "^8.0.0",

"lint-staged": "^8.0.0",
"make-dir": "^2.1.0",
"make-dir": "^3.0.0",
"markdown-table": "^1.1.2",

@@ -118,0 +118,0 @@ "minami": "^1.2.3",

@@ -77,2 +77,4 @@ # axe-core

We can only support environments where features are either natively supported or polyfilled correctly.
## The Accessibility Rules

@@ -79,0 +81,0 @@

@@ -138,6 +138,6 @@ {

},
"3.2.2-canary.577a1f9": {
"axe.js": "sha256-DIuipJMGeH59/oQisM6/5PWYZXBiTuPxZjcHMYGV6D0=",
"axe.min.js": "sha256-PonWx/UofjRtlueaE52FWC12V17ADRS3qL9Pv8sWgoo="
"3.2.2-canary.6cf8b2f": {
"axe.js": "sha256-WBWKoInnnjwqAQLZCjbe95iQbtKbFeDjVOj1tbM0L9A=",
"axe.min.js": "sha256-ZtdSHnnsAAc2EpZLnv6qNKVxlHj7L5Hb8K+IQoYF0VQ="
}
}

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc