aria icon indicating copy to clipboard operation
aria copied to clipboard

ARIA spec is not clear on use of the role attribute and global ARIA attributes on non-HTML elements

Open Wildebrew opened this issue 1 year ago • 3 comments

The ARIA Spec needs to explicitly state whether global ARIA attributes are valid when used directly on custom elements

I am increasingly seeing design systems apply ARIA attributes directly to custom elements, e.g. Examples: An interactive button: <foo-button role="button" tabindex="0" aria-label="Delete"> </foo-button>

instead of: <foo-button a11yLabel="delete"> producing <button aria-label="delete"> </button>

A tablist container:

<foo-tabs role="tablist"> <button role="tab" aria-selected="true"></button> ...</foo-tabs">

A grouping element <foo-group role="group" aria-labelledby="gTitle"> <div id="gTitle"> .. group of form controls </foo-group>

My assumption has always been that you can only use ARIA attributes on valid markup language elements, but in my reading of the ARIA spec I do not explicitly speaking to this. Also I notice that the Axe Core rules do not flag this use as an ARIA validation fail.

A question and a change request:

The Question: Can ARIA only be used with valid markup language elements?

The change Request: Whether the anser is yay or nay, to add a section to the ARIA spec that speaks to this explicitly, to eliminate confusion. This could e.g. be added as a subsection of the global attributes section.

Wildebrew avatar Jun 16 '24 22:06 Wildebrew

I think html-aria covers this at https://w3c.github.io/html-aria/#el-autonomous-custom-element

If role defined by ElementInternals, no role Otherwise, any role, though generic SHOULD NOT be used.

pkra avatar Jun 17 '24 07:06 pkra

Autonomous custom elements are considered valid html elements.

aria, as well as native html features and scripting work with invalid custom elements as well (those without a dash in the name)

As mentioned, the aria in html spec already clarifies the question asked. On first thought, I do not think the aria spec needs to be updated further, especially since if there were to be a limitation in what the host language respected, it’d be in that spec / bridge spec (like aria in html) where that limitation would be called out. But what sort of clarification did you have in mind?

scottaohara avatar Jun 17 '24 16:06 scottaohara

@Wildebrew As Peter and Scott note, the ARIA in HTML spec (in the REC, not just the draft they linked) appears to cover this. Do you have enough information to close this issue?

aardrian avatar Jun 25 '24 11:06 aardrian