dequelabs / dequelabs/axe-core
Provide support for StencilJS
- 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
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