dequelabs / dequelabs/axe-core
Shadow DOM list false positive
- Dominant language
- JavaScript
- Stars
- 7.5k
- Forks
- 933
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 29
Description
### Product
axe-core
### Product Version
4.11.1
### Latest Version
- [x] I have tested the issue with the latest version of the product
### Issue Description
#### Expectation
When a `
- ` or `
- `, the list rule should pass. The structure is semantically valid — each custom element is a web component wrapper around an `
- `.
#### Actual
The list rule fails with a violation on the `- `, reporting that it contains non-`
- ` children. This is a false positive caused by axe-core evaluating the slotted custom elements (``) as the direct children of `
- ` in the flat tree, without looking through their shadow DOM to see that they render as `
- `.
#### How to Reproduce
https://codepen.io/lupecamacho/pen/pvEgQPjOr the following minimal example:
```html
One
Two
Three
``````js
import { LitElement, html } from "https://cdn.skypack.dev/lit";class MyList extends LitElement {
render() {
return html`
}
}class MyListItem extends LitElement {
render() {
return html` `;
- ` element or has an explicit listitem role — it does not account for the case where the child is a shadow host whose shadow DOM root element is an `
- `.
The same pattern applies to any web component that encapsulates list item semantics in a shadow DOM (e.g. design system components).
}
}customElements.define("my-list", MyList);
customElements.define("my-list-item", MyListItem);
```
Running `axe.run()` reports a list violation on the `- ` element inside ``'s shadow DOM.
#### Additional context
The issue is in the only-listitems check (lib/checks/lists/only-listitems-evaluate.js). axe-core's flat tree algorithm correctly resolves the `` in `
- `, making the `` elements the virtual children of `
- `. However, the check only tests whether each child is literally an `
- `.
- ` children. This is a false positive caused by axe-core evaluating the slotted custom elements (``) as the direct children of `
- ` element uses a `` to distribute custom elements whose shadow DOM renders as `
Contributor guide
Research direction
Start by reading lib/checks/lists/only-listitems-evaluate.js and reproduce the report with the linked CodePen or the minimal LitElement example using axe.run(). The fix is done when a ul or ol containing slotted custom elements whose shadow DOM renders li no longer reports a list violation, while ordinary invalid children remain detected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100