ListItemButton will not set DOM disabled attribute

[tlthiem]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-list-item-button-not-disabled-yzqz67

Steps:

1. inspect both buttons
2. the normal mui Button has disabled DOM attribute
   3.the ListItemButton only has aria-disabled attribute. Styles are correct.

Current behavior 😯

The ListItemButton does not apply the disabled attribute to the DOM element when disabled via prop.

Expected behavior 🤔

Just like the mui Button component the disabled attribute is set in DOM.
If this is expected behaviour I would expect this to be documented.

Context 🔦

This came up during component testing.

expect(component).toBeDisabled(); will throw.

Your environment 🌎

System:
OS: Windows 10 10.0.22000
Binaries:
Node: 16.19.0
Yarn: 3.2.0
npm: 8.19.3
Browsers:
Chrome: Not Found
Edge: Spartan (44.22000.120.0), Chromium (108.0.1462.54)

[ZeeshanTamboli]

The ListItemButton is rendered as a div, and <div> elements do not have a disabled attribute according to the HTML docs. Hence, it is not forwarded to the DOM.

In your test you can assert with the aria-disabled attribute:

expect(component).toHaveAttribute('aria-disabled', 'true')

as mentioned in testing-library/jest-dom#144 (comment).

[siriwatknp]

This makes me think why ListItemButton does not use button by default 🤔.