Skip to content
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

SwirlSwitch: <input type="radio"> should not use aria-checked property #621

Open
Jona-Flip opened this issue Mar 11, 2024 · 0 comments
Open

Comments

@Jona-Flip
Copy link

Issue summary

The SwirlSwitch component uses an <input> element with type="role". Additionally, it sets the aria-checked property on the element.
This should be unnecessary, as the <input>-element has native semantics for the checked-state. Thus setting the aria-checked property is against the first rule of ARIA which recommends to not add any aria-properties unless strictly necessary.

This gets flagged as an error by the W3 HTML validator:
https://validator.w3.org/nu/#l26c32939
Screenshot 2024-03-11 at 11 04 13

Impact

We didn't encounter any usability issues due to this error. The application could be operated correctly using VoiceOver+Edge on MacOS.
The only impact we observed validation error, which is a failure of the WCAG Success Criterion 4.1.1 Parsing: https://www.w3.org/WAI/WCAG21/Understanding/parsing

Expected behavior

Using the <input type="radio"> should convey the semantics to screenreaders without the aria-checked property.

Actual behavior

Steps to reproduce the problem

Sample snippet:
<swirl-radio _ngcontent-ng-c2234221409="" input-id="first_half_day" input-name="radio" value="1" class="sc-swirl-radio-h sc-swirl-radio-s hydrated"><label class="radio radio--variant-default sc-swirl-radio radio--unchecked" for="first_half_day"><span class="radio__control sc-swirl-radio"><swirl-visually-hidden class="sc-swirl-radio sc-swirl-visually-hidden-h sc-swirl-visually-hidden-s hydrated"><!----><input aria-checked="false" class="radio__input sc-swirl-radio" id="first_half_day" name="radio" type="radio" value="1"></swirl-visually-hidden><span aria-hidden="true" class="radio__box sc-swirl-radio"></span></span><span class="radio__label-container sc-swirl-radio"><span class="radio__label sc-swirl-radio">First half of the day</span></span></label></swirl-radio>

Specifications

  • Swirl version number: 0.165.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant