dequelabs / dequelabs/axe-core

ElementInternals ARIA role conflict resolution

Open
#5,162 1 comment 0 reactions 0 assignees View on GitHub
elementInternals
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 13h
Merged PRs (30d)
29

Description

When resolving the role of an element with an attached internals role, and the element defines an explicit none role and is either focusable or has a global ARIA attribute, axe-core currently resolves the internal role as the implicit role.

```html
btn none focusable

customElements.define(
'my-button',
class MyButton extends HTMLElement {
constructor() {
super();
this._internals = this.attachInternals();
this._internals.role = 'button';
}
}
)

```

According to the spec this should be correct, however no browser currently supports this. Tracking here so we can watch it. Filed bugs with:

- [ ] [Chrome](https://issues.chromium.org/issues/522529333)
- [ ] [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=2046886)
- [ ] [Safari](https://bugs.webkit.org/show_bug.cgi?id=316919)
- [ ] [WPT](https://github.com/web-platform-tests/wpt/issues/60563)

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the ElementInternals and ARIA role conflict described in this issue, then check the linked Chrome, Firefox, Safari, and WPT bugs for current implementation status. No axe-core file or test is identified; done would require a clearly defined project change after browser or specification support advances.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.