mui / mui/material-ui

[Radio] Radio's `ButtonBase` has `role="button"` when using styled-components

Open
#44,185 3 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

component: ButtonBase external dependency package: styled-engine-sc scope: radio
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

Link to live example: https://codesandbox.io/p/devbox/nervous-oskar-xx7s2l

Steps:

  1. Use mui together with styled-components (i.e. aliasing @mui/styled-engine with @mui/styled-engine-sc)
  2. Use a <Radio /> component
Current behavior

The radio's ButtonBase has a role="button". This leads to an accessibility violation since there is a radio inside of a button.
The HTML basically looks like this:

<span 
  class="MuiButtonBase-root MuiRadio-root [...]" 
  role="button">
    <input class="sc-egkSDF jccrsl PrivateSwitchBase-input" type="radio">
    <span class="sc-fAUdSK cyWAma">
      <svg>[...]</svg>
    </span>
    <span class="MuiTouchRipple-root-hfoSaC iZusHU MuiTouchRipple-root"></span>
</span>

Note that there is a role="button" on the outermost <span>. This should not be there and is in fact not there if you use the "regular" emotion adapter for @mui/styled-engine.

Expected behavior

There is no role="button" on the ButtonBase for a <Radio />.

Context

I think the problem is that <SwitchBase /> passes role={undefined} to the <SwitchBaseRoot /> (which is a styled <ButtonBase />) here: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/internal/SwitchBase.js#L177
And I guess that styled-components just swallows properties with undefined values (since version 6?).
It used to work with mui v5 and styled-components v5.

This bug also affects other components that use <SwitchBase /> (like <Checkbox /> or <Switch />).

Your environment
npx @mui/envinfo
  System:
    OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.1 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/core-downloads-tracker:  6.1.5 
    @mui/envinfo: 2.0.28 => 2.0.28 
    @mui/material: ^6.1.5 => 6.1.5 
    @mui/private-theming:  6.1.5 
    @mui/styled-engine:  6.1.5 
    @mui/styled-engine-sc: ^6.1.5 => 6.1.5 
    @mui/system:  6.1.5 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.5 
    @types/react: 18.3.11 => 18.3.11 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    styled-components: ^6.1.13 => 6.1.13 

Search keywords: radio styled-components button

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.