Update allowance of aria-checked on HTML checkbox and radios

[scottaohara]

ARIA in HTML (w3c/html-aria#372) is tightening the allowance of aria-checked on native checkboxes and radios, particularly due to w3c/aria#1622 and the fact that aria-checked=mixed should never be able to be exposed by browsers that correctly follow the ARIA spec.

we would request that this at the very least this be called out as an author error if using aria-checked=mixed on a checkbox, and either an author error or a warning to indicate that authors should not use this attribute on native checkboxes and radios.

For instance, there is a presently bug in chromium where aria-checked incorrectly takes precedent over the native checked / dirty checked state of an radio or checkbox element, which can cause inaccurate information to be exposed if the actual checked state and the aria-checked attribute are out of alignment: https://bugs.chromium.org/p/chromium/issues/detail?id=1260371

[WilcoFiers]

Interesting, yeah that makes sense. We'll see what we can do with that.

[dylanb]

Can we expand the rule to check that the aria semantics match the checkbox semantics and only complain when they don't match until the Chromium bug is fixed and then we switch it to always complain?

[WilcoFiers]

So, what I think I'm going to do here is to prohibit when aria-checked contradicts the true state, which because mixed isn't possible on checkboxes prohibits mixed on checkboxes. Failing then when they are consistent seems a little too strict.

[scottaohara]

Agree with not failing when the aria-checked attribute and whatever checked state the input is actually set to don't contradict.

Not sure I understand why you'd just prohibit the true state though? Or that mixed isn't possible on checkboxes? No attribute for the latter, but it's definitely possible per the indeterminate idl attribute and check for the indeterminate state/pseudo selector.

One could very well have aria-checked=false on an actually checked checkbox. or aria-checked=mixed on an unchecked checkbox. maybe i misunderstood what you were saying though?

[WilcoFiers]

Well, looks like I have a gap in my HTML knowledge! I had never heard of indeterminate checkboxes. Alright, I can handle that. But then, you say

One could very well have aria-checked=false on an actually checked checkbox.

It would seem to me that because of that Chrome issue, having aria-checked=false on a checked checkbox creates an inconsistency between browsers. Seems to me that could cause very significant accessibility issues. That seems like something to should definitely fail.

[scottaohara]

a [checked] or a :checked checkbox, mind you. since the attribute is static and only for the initial state of the checkbox.

e.g., <input type=checked checked aria-checked=true> would only be a pass if a user didn't interact with the element and uncheck it, returning the IDL checked attribute as false. but that change is not reflected in the DOM, as the checked attribute remains.

Again, completely agree with the idea of not failing something if the native states vs the ARIA states actually align. but, regardless of what the value is, a misaligned aria-checked attribute will always have the potential to fail, regardless of it's value.

[WilcoFiers]

Thanks for clarifying. That's what I thought too. It's about aria-checked matching the checked state, not necessarily the checked attribute.

[padmavemulapati]

Validated with the latest axe-core develop branch code base,

Now seeing aria-required-attr failing when aria-checked=true attribute is not there, for list, menuitems, select, radiobuttons etc.,

Sample code snippets to pass

<div id="target" role="checkbox" aria-checked="true"></div>
<li role="menuitemcheckbox" aria-checked="true">
    <img src="checked.gif" role="presentation" alt="">
    <!-- note: additional scripts required to toggle image source -->
    Sort by Last Modified
  </li>

Fail for aria-required-attr

<div id="target" role="checkbox" ></div>
<li role="menuitemcheckbox" >
    <img src="checked.gif" role="presentation" alt="">
    <!-- note: additional scripts required to toggle image source -->
    Sort by Last Modified
  </li>

[scottaohara]

the validation test doesn't confirm what this issue was calling out though?

would have expected a validation test for something like these:

<input type=checked checked aria-checked=false>

<input type=checked aria-checked=mixed>