aria-valid-attr-value failing to list all invalid values

[lilzesh]

Product

axe-core

Product Version

4.10.3

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

When axe-core checks for valid ARIA values, when it detects invalid values, I expect all of the invalid values to be displayed in the "How to fix" section.

Actual

It appears that under certain circumstances, when invalid values for aria-controls and aria-haspopup are detected simultaneously, the invalid value for aria-controls is not displayed in the "How to fix" section.

How to Reproduce

<button aria-controls="#" aria-haspopup="”false”">
  button 1
</button>

<button aria-controls="#">
  button 2
</button>

<button aria-controls="#" aria-expanded="maybe">
  button 3
</button>

<button aria-controls="#" aria-expanded="maybe" aria-haspopup="”false”">
  button 4
</button>

1. Copy and paste this code into your favorite online editor or a local HTML document.
2. Run axe DevTools (for me v4.115.1)
3. I selected partial page scan, picking an element that contains these buttons, but a full page scan would work
4. Depending on the complexity of your test page you should notice four reported issues

These four reported issues are all aria-valid-attr-value rule violations, one for each of the elements listed above. In order here are the 'How to fix' section instructions:

1. Invalid ARIA attribute value: aria-haspopup="”false”"
2. Invalid ARIA attribute value: aria-controls="#"
3. Invalid ARIA attribute values: aria-controls="#", aria-expanded="maybe"
4. Invalid ARIA attribute values: aria-expanded="maybe", aria-haspopup="”false”"

Additional context

Could tangentially be related in someway to #4861? Either way it's curious that issue also involves some aria-controls and aria-haspopup curiosities.

[straker]

Thanks for the issue. The reason why aria-controls is not showing as an invalid value is due to the presence of aria-haspopup. Specifically if the element has the aria-haspopup attribute we don't check the value of the aria-controls attribute since the element it refers to may not exist on the page yet and can be loaded in later.

See #4363 and #1463.

[lilzesh]

That makes sense but is checking aria-controls worth it? I'm thinking in cases where aria-controls wouldn't ever refer to a valid element in the DOM, ever, like # or some other invalid value that is guaranteed to not reference another element?

[straker]

Unfortunately while # may be an invalid value according to spec, browsers can still respect it and will allow it. So window.getElementById('#') will return the element with a matching id.

[straker]

I should say, invalid to HTML4, HTML5 allows almost any value for ID so long as it's not a space character.

[lilzesh]

Interesting, TIL. Thanks @straker I will close this out.