dequelabs / dequelabs/axe-core

False positive on custom elements using formAssociated

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

Description

This should not fail `aria-input-field-name`.

```html

class FormInput extends HTMLElement {
static formAssociated = true
#input
constructor() {
super()
const root = this.attachShadow({ mode: 'open' })
root.innerHTML = ` <input type="text" aria-hidden="true"> `
}
}
customElements.define('form-input', FormInput)

Hello

World

```

On the surface this doesn't look too difficult to figure out. Check the custom element's `.constructor.formAssociated` prop. The difficulty is that this property is only available when axe runs in the same javascript world as the page. Playwright, Puppeteer, Chromium extensions all run inside a different javascript world. There are ways to work around that by appending a script to the page. That could trigger a custom event that can pass information back. I'm not sure that's desirable.

An alternative to consider is to raise this as a Chromium bug. I haven't checked what other browsers do with this. It's kind of for a DOM property not to be available in all worlds. Then again, this really doesn't function like normal properties do. The browser reads this property once when `customElement.define` is called. Changing it afterwards does nothing. I.e. you cannot turn off formAssociation.

Contributor guide

Open the contributing guide

Research direction

No source files or tests are named; start with the aria-input-field-name rule and reproduce the supplied formAssociated custom-element example in the relevant JavaScript-world contexts. Compare access to constructor.formAssociated in axe, Playwright, Puppeteer, and Chromium-extension execution, then establish whether the false positive can be resolved or should be tracked as a browser limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend, testing-qa
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.