dequelabs / dequelabs/axe-core

Shadow DOM list false positive

Open
#5,028 1 comment 0 reactions 0 assignees View on GitHub
info needed
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 `
      ` element uses a `` to distribute custom elements whose shadow DOM renders as `
    1. `, the list rule should pass. The structure is semantically valid — each custom element is a web component wrapper around an `
    2. `.

      #### 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/pvEgQPj

          Or 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`

          • `;
            }
            }

            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 `
                • ` 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).

    Contributor guide

    Open the contributing 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

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.