Element Reflection

Category: DOM
Type: New or changed feature
Status: In developer trial (Behind a flag) (Chrome 135)
Intent stage: Dev trials

Summary

This feature allows for ARIA relationship attributes to be reflected in IDL as element references rather than DOMStrings. This implements the IDL attributes in the ARIAMixin (https://w3c.github.io/aria/#ARIAMixin) interface with a type of Element or FrozenArray<Element>, with the exception of ariaOwnsElements. This allows authors to use element references directly, rather than ID strings, when setting values for ARIA relationship attributes. These can be used on Elements directly, or on ElementInternals for custom elements (https://html.spec.whatwg.org/multipage/custom-elements.html#accessibility-semantics).

Motivation

This would allow specifying semantic relationships between elements without the need to assign globally unique ID attributes to each element which participates in a relationship. Moreover, this would enable authors using open ShadowRoots to specify relationships which cross over Shadow DOM boundaries.

Standards & signals

Specification: https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes:element
Firefox: Shipped/Shipping — Intending to ship in Firefox 136
Safari: Shipped/Shipping — Mentioned in STP release notes: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-151 Was shipped in Safari 16.4 but wasn't mentioned in release notes there. Can be verified by using Inspector to set an ARIA element reference property on an element and observing that it is reflected to a content attribute, e.g. ``` $0.getAttribute("aria-activedescendant") // null $0.ariaActiveDescendantElement = document.body $0.getAttribute("aria-activedescendant") // "" ```
Web developers: No signals
Tracking bug: https://crbug.com/981423

Docs: https://github.com/WICG/aom/blob/gh-pages/explainer.md#reflecting-element-references https://github.com/whatwg/html/pull/3917

Explainers: https://github.com/WICG/aom/blob/gh-pages/aria-reflection-explainer.md#reflecting-element-references

View on chromestatus.com