[Switch] disabled prop doesn't set aria-disabled on input element

[DavidIvanov]

Steps to reproduce

Add an MUI Switch to your document and give it the disabled prop.

Current behavior

Currently the aria-disabled is set on the span surrounding the input instead of on the input directly.
This causes accessibility issues with this rule
https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions

Expected behavior

The aria-disabled prop should be on the input directly.

Context

I want to be accessibility compliant with WCAG 2.1

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Switch, aria-disabled, Accessibility

[mj12albert]

@DavidIvanov Thanks for reporting this ~

For now you can manually set aria-disabled using inputProps as a workaround:

<Switch
  disabled
  inputProps={{
    "aria-label": "My Switch",
    "aria-disabled": true,
  }}
/>

https://codesandbox.io/p/sandbox/divine-feather-sp5lkq?file=%2Fsrc%2FApp.js%3A11%2C9-17%2C11

[mj12albert]

Added the ready to take label in case anyone wants to work on this before we get around to it.

Please reach out in this thread if you're interested ~

[dinesjo]

Hi! I would like to work on this issue.

[mj12albert]

@dinesjo Thanks ~ I've assigned you

[dinesjo]

@mj12albert Here's an update on this:
I found a solution, but the issue is not isolated to just the Switch-component. More or less all input-components (Autocomplete, Button, Checkbox, ...) apply disabled without simultaneously adding aria-disabled="true".

I'm currently working on this as part of a university course on software engineering along with 2 others. In the following days we can find a way to systematically add this attribute to all such inputs and open a PR including unit tests once we are ready.

[siriwatknp]

@DavidIvanov @mj12albert I believe that the solution to this issue is to reconsider the aria-disabled on the span element, not moving aria-disabled to input.

Based on MDN, the disabled is already used on input element. aria-disabled is not necessary.

I see two ways:

• add appropriate role to the span. The closest would be role="switch"
• remove the aria-disabled from the span.

After checked with Base UI Switch, using role="switch" looks like the proper solution.