-
Notifications
You must be signed in to change notification settings - Fork 784
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
aria-valid-attr-value rule too strict on aria-controls / aria-owns #4202
Comments
Looking at this in a little more detail. I think this is the way I'd like to have axe behave: <!-- Pass, as aria IDREFs is not required here. Required things will be tested by other rules -->
<div aria-controls="missing">hi</div>
<!-- Incomplete, aria IDREFs is not required here, but this can be a real problem -->
<div aria-owns="missing">hi</div>
<div aria-describedby="missing">hi</div>
<div aria-labelledby="missing">hi</div>
<div role="tablist">
<!-- Pass, no control expected -->
<button aria-controls="missing" role="tab" aria-selected="false">hi</button>
<!-- Pass, aria-selected default = false -->
<button aria-controls="missing" role="tab">hi</button>
<!-- Incomplete, because aria-controls is not required here -->
<button aria-controls="missing" role="tab" aria-selected="true">hi</button>
<!-- Invalid value defaults to "true" (weird that it doesn't default to the default) -->
<button aria-controls="missing" role="tab" aria-selected="selected">hi</button>
</div>
<!-- Pass, no control expected -->
<input aria-controls="missing" role="combobox" aria-expanded="false" />
<!-- Pass. Axe will raise that aria-expanded is required -->
<input aria-controls="missing" role="combobox" />
<!-- Fail, control required -->
<input aria-controls="missing" role="combobox" aria-expanded="true" />
<!-- Pass, no control expected -->
<input aria-owns="missing" role="combobox" aria-expanded="false" />
<!-- Pass. Axe will raise that aria-expanded is required -->
<input aria-owns="missing" role="combobox" />
<!-- Fail, control required -->
<input aria-owns="missing" role="combobox" aria-expanded="true" /> I'm leaving aria-errormessage out of this, as it has its own check. --- UPDATED --- |
I agree with all of the "pass" and "fail" results, and I agree with incomplete for the case of the selected tab with a missing I begrudgingly agree with "incomplete" for cases 2-4, but I'm not so sure about incomplete for the first case. I think there's a meaningful difference between That difference makes me lean towards replacing your first 4 examples with: <!--
Pass:
- aria-controls explicitly allows for elements that may not be present
- ...and unlike the "selected tab" case, there is no role-based guidance that suggests it should most likely be otherwise
-->
<div aria-controls="missing">hi</div>
<!--
Incomplete:
- arguably, "ID reference" is required to be an ID of another element in the same document, so this should fail
- ...but the history from issues #1524/#2621/#1151 convinces me that incomplete is ok.
- Maybe we should double check AT impact and consider making these fail a separate best-practice rule
-->
<div aria-owns="missing">hi</div>
<div aria-describedby="missing">hi</div>
<div aria-labelledby="missing">hi</div>
<!-- Pass (I'm pretty sure you intended these to be implied already, just clarifying) -->
<div aria-controls="present">hi</div>
<div aria-owns="present">hi</div>
<div aria-describedby="present">hi</div>
<div aria-labelledby="present">hi</div> |
The following shouldn't fail this rule:
This is an example from the new ARIA required ID references exist ACT rule that axe got wrong. It seems we put some logic around not requiring aria-controls not to fail when aria-expanded="false" is used. That came from combobox, but I think that when aria-controls (and aria-owns) isn't required axe-core should report it as needs review when the ref is missing, not as fail.
The text was updated successfully, but these errors were encountered: