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

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
Issue summary
The SwirlSwitch component uses an
<input>element withtype="role". Additionally, it sets thearia-checkedproperty on the element.This should be unnecessary, as the
<input>-element has native semantics for the checked-state. Thus setting thearia-checkedproperty 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
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 thearia-checkedproperty.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