IDREF attributes reflection get out of sync

[mrego]

If we modify the id of the referenced element, we're going to get out of sync between the attribute and the element reference.

Let's use an example:

<div id="target">target</div>
<div id="desc1">First description</div>
<div id="desc2">Second description</div>

<script>
  let myDesc1 = document.getElementById("desc1");
  let myDesc2 = document.getElementById("desc2");
  
  target.ariaDescribedByElements = [myDesc1];
  
  myDesc1.id = "desc2";
  myDesc2.id = "desc1";
  
  console.log("aria-describedby attribute: " + target.getAttribute("aria-describedby"));
  console.log("ariaDescribedByElements: " + target.ariaDescribedByElements[0].id);
</script>

We get in the console:

aria-describedby attribute: desc1
ariaDescribedByElements: desc2

The final HTML is:

<div id="target" aria-describedby="desc1">target</div>
<div id="desc2">First description</div>
<div id="desc1">Second description</div>

The attribute hasn't been modified, so it's still desc1 which has the text Second description. But the element reference is pointing to desc2 with the text First description.

Is it expected to have this kind of situation? Should we find a way to sync the attribute and the element somehow? Or is this an issue that should be discussed on ARIA and how they want to interpret this situation?

CC @rniwa @smaug---- @domenic @annevk

[bathos]

This is the explicitly-set attr-elements case (for others looking for where it’s defined).

When explicitly set, the list takes precedence when calculating the attr-associated elements. These concepts seem to be acknowledging this possibility and it’s a given that the content attribute won’t match cross-shadow. Re-running the setter steps (3 & 4) could seemingly sync it when not cross-shadow, but would the extra state & reactions be worth it given the content attribute is no longer the source of truth in this scenario?

(I would be wary of “reversing the flow” on what-reflects-what.)

[annevk]

I think this is fine. And as we don't want to keep a reverse map I also don't really see any other option. We might want to add a word of warning around which set of APIs to use and that if you mix-and-match you might see funny results.

[annevk]

cc @whatwg/a11y

[mrego]

In #8306 is being proposed to only use the empty string as an indicator that there are element associations.

If that's the final agreement, this case here won't be an issue as the final HTML would be:

<div id="target" aria-describedby="">target</div>
<div id="desc2">First description</div>
<div id="desc1">Second description</div>

And we'll only be able to check the association via ariaDescribedByElements as the content attribute is not going to be useful.

[mrego]

Let's close this as a duplicated of https://github.com/whatwg/html/issues/8306.