Programatically setting ARIA role does not set the attribute on the element
Categories
(Core :: Disability Access APIs, defect)
Tracking
()
People
(Reporter: burton, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Steps to reproduce:
When creating a custom element and setting the ARIA role of the element using this.role, the appropriate attribute is not reflected on the element.
customElements.define('my-greeting', class extends HTMLElement {
constructor() {
super();
this.innerHtml = '<h1>Hello World!</h1>'
this.role = 'alert'
}
})
Actual results:
The role attribute is not populated on the custom element.
<my-greeting></my-greeting>
Expected results:
When rendered I would expect the element to display with the role attribute populated (which is consistent with other browsers):
<my-greeting role="alert"></my-greeting>
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•2 years ago
|
||
It's not legal to add children or set attributes in a CustomElement's constructor:
The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.
Your test case doesn't work in Chrome either.
Instead, you can do this in connectedCallback, which works in both Firefox and Chrome:
data:text/html,
<script>
customElements.define('my-greeting', class extends HTMLElement {
connectedCallback() {
this.innerHTML = '<h1>Hello World!</h1>';
this.role = 'alert';
}
});
</script>
<my-greeting></my-greeting>
Note that the .role property is only supported as of Firefox 119.
Do you know when this is available in the enterprise versions?
|
|
||
Comment 5•2 years ago
|
||
It likely won't be available until the next major ESR version, as this doesn't qualify for an uplift into the current ESR 115. I'm not sure when the next major ESR will be, but I'd say a few months away at least.
Description
•