bug(mat-slide-toggle): aria-checked attribute duplicates native functionality

[LucaBastelt]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using the https://validator.w3.org/nu/ validator the mat-slide-toggle gets reported as an aerror because it uses an arua-checked attribute on a input with the role of checkbox.

This has already been discussed here, but I have not found a report in this repository yet.

Reproduction

Steps to reproduce:

1. Add a simple mat-slide-toggle to a template
2. Observe the output html

Expected Behavior

The component should use native html features instead of aria attributes wherever possible

Actual Behavior

The component gets rendered as follows
<input type="checkbox" role="switch" class="mat-slide-toggle-input cdk-visually-hidden" id="test-input" tabindex="0" aria-checked="true">

Environment

• Angular: 13.3.11
• CDK/Material: 13.3.9
• Browser(s): Chrome 102.0

[crisbeto]

It's because while the element is an input, it has a role="switch" which requires the aria-checked.

[LucaBastelt]

As far as I understand the w3c a11y guide, the aria-checked attribute is only required on a switch if the control does not offer native checkbox functionality.

If the switch element is an HTML input[type="checkbox"], it uses the HTML checked attribute instead of the aria-checked property.

[jelbourn]

I vaguely recall something did not like omitting aria-checked when we changed slide-toggle to `role="switch" (either one of the screen-readers we support or axe). This may be a situation where this validator does not reflect the practical reality of supporting assistive technology.

For the record, this issue is a very low priority because it is the goal of the library to support the assistive technology used by real users rather than tools like the validator.

[zarend]

Hello folks, it's a bit of an edge case, but I believe this issue report is correct that we're not supposed to use aria-checked on input type="checkbox". It's in the HTML spec and one of the few situations where aria-checked cannot be used. You'd have to really dig into HTML spec for this one, and browsers tolerate this situation even though it's technically not on spec.

I don't believe this is causing a problem, so keeping it open as low priority

-Zach