[Chip] When disabled it still receives focus

[TheWilks]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Add "disabled" to a deletable chip.
2. Tab to that chip.
3. You will notice that Mui-focusVisible. A user can tab to the disabled chip and styles are applied to it.

Current behavior 😯

You will notice that Mui-focusVisible. A user can tab to the disabled chip and styles are applied to it.

Expected behavior 🤔

A user should not be able to tab to a disabled chip.

Context 🔦

have the bug removed so users of assistive tech are not confused.

Your environment 🌎

npx @mui/envinfo

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

[sai6855]

hey @hbjORbj i see you are assigned to this issue, is it okay if i work on this issue?

[ZeeshanTamboli]

@sai6855 Please go ahead.

[sai6855]

Thank you

[sai6855]

@ZeeshanTamboli created PR, is there any way to test changed component/file? currently i'm running "yarn test" but it is testing all packages.

[ZeeshanTamboli]

@ZeeshanTamboli created PR, is there any way to test changed component/file? currently i'm running "yarn test" but it is testing all packages.

See the test:unit section in Contributing guide to narrow down the tests. You can also use yarn t <filename>. Example in this case: yarn t Chip.test.js

[sai6855]

Got it

[ZeeshanTamboli]

@TheWilks In order to avoid breaking changes, we introduced a new prop named skipFocusWhenDisabled in the Chip component in #35065 to disable focus when the chip is disabled. It will be focusable by default. You can use this new prop which will be available in the next release.