Add note to invalid IdRef value error that it may be due to a Shadow DOM boundary

[joppekroon]

Product: axe-core

Expectation: Indicate that the referenced id is located beyond a Shadow DOM boundary. Even a message that states that this may be potentially the reason of the error would be very helpful.

Actual: Indicates that the value of the IdRef attribute is invalid

    "ARIA attributes must conform to valid values (aria-valid-attr-value)"

    Fix all of the following:
      Invalid ARIA attribute value: aria-controls="id-in-shadow"

Motivation: It is currently quite a confusing error message if you're not acutely aware that referencing an id that is located on the other side of a Shadow DOM boundary is problematic.

axe-core version: 4.2.0

[straker]

Interesting. I can understand what you mean, but this may be extremely difficult to figure out. We currently only check if the id is found using document.getElementById, and will flag it as invalid if that doesn't return anything. I'm not sure we could tell if that was because it was in a shadow tree or because it wasn't found on the page at all.

[joppekroon]

I wouldn't be surprised if it is unfeasible to figure out for sure that the IdRef and Id are on opposite sides of a Shadow DOM boundary, although it would be excellent service if you could.

However, a simple note in the error for an invalid IdRef that it may be caused by a Shadow DOM boundary would already prevent someone from giving up and disabling the test altogether. Or in my case, prevent someone from digging through the axe-core code to figure out the bug before finally having a facepalm moment after way too long spent on this 😉.

[straker]

Adding a note in the message sounds doable

[padmavemulapati]

Validated with the latest develop branch axe-core code base,
test snippet is:

<div></div>
  <button id="target1" aria-describedby="test1">Button1</button>
  <div></div>
  <button id="target2" aria-labelledby="test2">Button2</button>

so that the failure message now is: