dequelabs / dequelabs/axe-core

Provide support for StencilJS

Open
#5,037 0 comments 0 reactions 0 assignees View on GitHub
core feat support
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 13h
Merged PRs (30d)
29

Description

Trying to pass a StencilJS element to `axe.run` results in lots of errors, which we would have to either solve one by one or work with StencilJS itself to solve them on their side.

```js
const page = await newSpecPage({,
html: ''
});

const config = {
rules: {
'color-contrast': { enabled: false }
}
};

const result = await axe.run(page.doc.body, config);
```

The first problem is that their `document` [mock object does not define any NODE_TYPE](https://github.com/stenciljs/core/blob/main/src/mock-doc/document.ts) constants (`ELEMENT_NODE`, `TEXT_NODE`, etc.). So when we [try to flatten the tree, we return `undefined`](https://github.com/dequelabs/axe-core/blob/develop/lib/core/utils/get-flattened-tree.js#L166) instead of parsing the tree.

Second problem is that the `window` [mock object does not define many global properties](https://github.com/stenciljs/core/blob/main/src/mock-doc/window.ts), such as `NamedNodeMap` required by our [VirtualNode `.attrNames` function](https://github.com/dequelabs/axe-core/blob/develop/lib/core/base/virtual-node/virtual-node.js#L113).

I'm sure there are more, but this is all I dug into. Further information can be gleaned [from another pr](#5033)

Contributor guide

Open the contributing guide

Research direction

Start with lib/core/utils/get-flattened-tree.js and lib/core/base/virtual-node/virtual-node.js, then inspect the linked StencilJS mock document and window objects. Reproduce the axe.run example with a StencilJS newSpecPage and identify the additional missing mock globals. Done means the element can be passed to axe.run without the reported errors and the relevant tests cover the integration.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend, testing
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.