Skip to content

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

Description

@Jona-Flip

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions