Use case: Replace IDREF DOM content attribute associations with a JavaScript element reference

[cookiecrook]

Use case: Replace IDREF content attr associations with a JavaScript element reference

Some HTML and ARIA features require reference to another element by IDREF, but it's problematic in some contexts to require the accessibility code to generate IDs. For example, some JS frameworks generated IDs automatically and make maintaining the value of those IDs purposefully obtuse. Likewise, in some extremes cases, the expectation of IDREFs requires generating thousands of DOM modifications which can lead to serious performance problems in the application.

It's be useful to associate related elements using a JavaScript object reference.

[cookiecrook]

One of the requests that always came into the ARIA group was to allow CSS-syntax in reference pointers. For example, this dialog is labeled by the first heading inside it. aria-labelledby="self > h1"... Of course that syntax didn't fly for a number of reasons.

The JavaScript object reference would solve most of the use cases for the CSS requests, since a web author could always use querySelector to get the element ref.

[minorninth]

I believe that the arrow syntax to break through web component boundaries was removed from the spec, so that made that idea really not work. It basically only would have helped with avoiding an id on every element within the same tree scope.

[minorninth]

Here's the other text I wrote up, to be merged.

Some ARIA attributes express relationships between DOM elements via an IDREF, where one element specifies the ID of the other. Two examples are aria-labelledby, and aria-activedescendant.

There are two drawbacks to this:

It can be cumbersome to add an ID to every element that needs to be referenced, for example adding an ID to every item in a dynamic list box so that the active descendant can be updated as the selected item in the list changes.

There are times when it's desirable to express a relationship between two elements that are within the same origin, but not the same ID namespace. For example, it's not possible in ARIA to express a relationship between two elements in different frames (even from the same origin), or between an element in the main page and an element inside a web component's shadow DOM.

Making it possible to implement accessibility support on the web via scripting would address this problem. Instead of setting an element's aria-activedescendant attribute to the ID of another element, it would be possible to directly establish the descendant relationship between one Element object and another Element object.