FastPass Does Not Associate Labels with Custom Elements

[break-stuff]

Describe the bug

When using the ElementInternals API, form-associated custom elements are showing a missing label error when a label is associated with it.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://cdpn.io/break-stuff/fullpage/qBQPGVb?nocache=true&view=fullpage'
2. Run Accessibility Insights FastPass

CodePen repro example

https://codepen.io/break-stuff/pen/qBQPGVb?editors=1011

Expected behavior

It should correctly associate the label with the component.

Screenshots

Context (please complete the following information)

• OS Name & Version: macOS Ventura 13.4.1
• AI-Web Version & Environment: 2.38.1
• Browser Version: 114.0.5735.198
• Target Page: https://cdpn.io/break-stuff/fullpage/qBQPGVb?nocache=true&view=fullpage

Are you willing to submit a PR?

No

Did you search for similar existing issues?

Yes

Additional context

[microsoft-github-policy-service]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[DaveTryon]

Looking at this, I suspect that the problem isn't the custom control, but that the custom control is a node inside a shadow DOM, while the label is outside the shadow DOM, even though the shadow DOM is open. Several posts online (including this one from WilcoFiers of the axe team) suggest that it's intentional behavior for an IDREF property to cross a shadow DOM boundary. That's how shadow DOM provides isolation between the contents of multiple (and potentially conflicting) elements within shadow DOMs on the same page.

Addendum: I confirmed in the HTML document spec that label for uses an IDREF.

[DaveTryon]

We believe this is by design for the reasons listed above. Please reopen it if you find formal documentation that suggests that the label tag is intended to be able to apply to items within a shadow root.

[break-stuff]

Creating form-associated custom elements using the ElementInternals API allows custom elements to behave as input elements and be associated with forms and labels.

https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals

[break-stuff]

For more information, this ticket was elevated to axe-core.

dequelabs/axe-core#4085