docs: Add role="switch" to switches

[coliff]

Fixes: #34818

[XhmikosR]

@coliff please check the new HTML errors. If there's something wrong, please file a bug report to update vnu-jar and or the specs.

[patrickhlauke]

probably slight tweak to my original wording (now that i'm reading it in context)

to convey the nature of the control in browser/assistive technology combinations that support it.

[ffoodd]

Seems good to me, according to @patrickhlauke's recommandation 👌

Thanks!

Tests don't pass...

[coliff]

The accessibility tests are failing with this error:

"file:/home/runner/work/bootstrap/bootstrap/_site/docs/5.1/forms/checks-radios/index.html":571.3-571.92: error: Element "input" is missing required attribute "aria-checked".
"file:/home/runner/work/bootstrap/bootstrap/_site/docs/5.1/forms/checks-radios/index.html":575.3-575.100: error: Element "input" is missing required attribute "aria-checked".
"file:/home/runner/work/bootstrap/bootstrap/_site/docs/5.1/forms/checks-radios/index.html":579.3-579.102: error: Element "input" is missing required attribute "aria-checked".
"file:/home/runner/work/bootstrap/bootstrap/_site/docs/5.1/forms/checks-radios/index.html":583.3-583.117: error: Element "input" is missing required attribute "aria-checked".

So it's suggesting we add aria-checked="false" to switches which are off and aria-checked="true" to switches are which are on. That would have to be done with JavaScript.

https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaChecked

However, it also states on that page in the Note at the top that that we should use type="checkbox" (which we do) as this element has built in semantics and does not require ARIA attributes. So maybe this is a bug in the validator. What do you think @patrickhlauke ?

UPDATE: I posted an issue on the validator GitHub project. validator/validator#1221

[patrickhlauke]

yes this seems to be a shortcoming of the validator, as you don't need aria-checked for native <input type="checkbox">

https://www.w3.org/TR/html-aria/#docconformance

Authors SHOULD NOT use the aria-checked attribute on input type=checkbox elements.

[...]

Note: The HTML checked attribute can be used instead of the aria-checked attribute for menuitemcheckbox, option or switch roles when used on type=checkbox.

[XhmikosR]

Patrick, could you please chime in the upstream issue? Maybe it's just an issue with the validator and not the specs

…

On Wed, Sep 1, 2021, 10:40 Patrick H. Lauke ***@***.***> wrote: yes this seems to be a shortcoming of the validator, as you don't need aria-checked for native <input type="checkbox"> https://www.w3.org/TR/html-aria/#docconformance Authors SHOULD NOT use the aria-checked attribute on input type=checkbox elements. [...] Note: The HTML checked attribute can be used instead of the aria-checked attribute for menuitemcheckbox, option or switch roles when used on type=checkbox. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#34824 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNLX4YYQSS3FM5F7WIDT7XKG3ANCNFSM5C3ACISA> .

[patrickhlauke]

yeah, i did after posting the comment here validator/validator#1221 (comment)

[XhmikosR]

This is weird, now we no longer get the errors but the issue wasn't fixed upstream :S

No idea what's happening...

[XhmikosR]

BTW I'll temporarily downgrade vnu in this branch to see if the errors show up again. Then I'll revert and merge.

…

On Thu, Sep 9, 2021, 11:59 Patrick H. Lauke ***@***.***> wrote: ***@***.**** approved this pull request. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#34824 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNL7UZALB3GBGJVKYV3UBBZNPANCNFSM5C3ACISA> .