aria-controls with late-mounted elements

[romgrk]

Describe your concern

I've been investigating the output reports of tools such as lighthouse that present ARIA issues. One common issue we have is with buttons that have aria-haspopup="menu" and aria-controls={elementId}, where we don't actually mount the corresponding menu DOM element until the point where the button is clicked. This is done for performance reasons for cases where there are a lot of elements, which is particularly important for lower-end devices.

My question is, is there a way to mark late-mounted elements with ARIA? If so, how?

Link to the version of the specification or documentation you were looking at at.

Link to documentation: https://w3c.github.io/aria/#aria-controls

Does the issue exists in the editors draft? Unsure/NA

[jnurthen]

IMO this is a false positive from the tools as the behaviour is defined.

aria-controls is not required on a button (even for a combobox aria-controls is only required when the combobox is expanded.
https://w3c.github.io/aria/#document-handling_author-errors_states-properties states that

User agents MUST NOT expose WAI-ARIA attributes that reference unresolved IDs. For example:

When the state or property has only one ID reference that cannot be resolved, treat as if the state or property is not present.
When the state or property has a list of ID references, ignore any that can't be resolved. If none in the list can be resolved, treat as if the state or property is not present.

Maybe we should move this from the Handling Author Errors section (9.2) to the States and Property Attribute Processing Section (8.6) to indicate better than this is supported behaviour not an error to be flagged by validators.

[romgrk]

aria-controls is not required on a button (even for a combobox aria-controls is only required when the combobox is expanded.)

Sounds good, that answers my question.

...to indicate better than this is supported behaviour not an error to be flagged by validators.

It could be nice to attach a note about that in the spec.

Unless you want to keep this open to track moving it in a new section, this issue can be closed.

[mpaiva]

@mcking65 - I'm looking forward to pairing with you on this issue

[mpaiva]

@mcking65 - based on @jnurthen suggestion to move the statement from the Handling Author Errors section (9.2) to the States and Property Attribute Processing Section (8.6) here's my revision proposal:

• Placement: move the info about how user agents should handle unresolved IDs at the beginning of the 8.6.1 section, making it clearer and more prominent.
• Rationale: This way, the guidance on handling unresolved IDs is placed in the broader context of how user agents should process state and property attributes, rather than being treated as an error scenario.

Proposal:

8.6.1 ID Reference Error Processing

User agents MUST NOT expose WAI-ARIA attributes that reference unresolved IDs. For example:

• When the state or property has only one ID reference that cannot be resolved, treat as if the state or property is not present.

• When the state or property has a list of ID references, ignore any that can't be resolved. If none in the list can be resolved, treat as if the state or property is not present.

In addition, user agents SHOULD ignore ID references that do not match the ID of another element in the same document.

It is the web author's responsibility to ensure that IDs are unique. If more than one element has the same ID, the user agent SHOULD use the first element found with the given ID. The behavior will be the same as getElementById.

If the same element is specified multiple times in a single WAI-ARIA relation, user agents SHOULD return multiple pointers to the same element.

aria-activedescendant is defined as referencing only a single ID reference. Any aria-activedescendant value that does not match an existing ID reference exactly is an author error and will not match any element in the DOM.

[scottaohara]

related #1970

[romgrk]

This is purely imho, but I feel like having a way to express that elements are late-mounted would be neat. It would allow a11y validators to provide useful feedback if there is indeed an aria-controls with a wrong ID. Even something like a convention (empty string aria-controls attribute until mounted?) would be useful.

The spec is hard to consume for most devs, so good validator feedback is an important aspect to improve web a11y.

[spectranaut]

@mpaiva what you suggested above looks good, can you open a PR?

I just looked up the meeting discussion of this item: https://www.w3.org/2023/06/22-aria-minutes#t04

We also talked about recommending validators supply a warning when aria-controls has an invalid ID or no ID... which I believe means adding an "Authors SHOULD" statement somewhere... maybe in the aria-controls section? That could be done in a separate PR.

[mpaiva]

Thanks @spectranaut - I'll add the authors SHOULD and will create a separate version of the example specifically for aria-controls

The PR should come in the next week or so.

[MelSumner]

Question: is there a serious perf issue with having an empty div and then adding the late mounted content inside of that div? This is how I have addressed this issue as a developer and I don't think I noted any serious issues with it.