Closed dantman closed 2 years ago
When you try to use basic DOM props like id on <Collapse> in TypeScript you get a type error because they are not included in CollapseProps.
id
<Collapse>
It should be possible to use dom props, especially id, on Collapse without a TypeScript type error.
Steps:
id="something"
https://codesandbox.io/s/infallible-ptolemy-u6bye?file=/src/Demo.tsx
ARIA has an example on how to make stuff like Collapse accessible (Using a button to collapse and expand a region).
You can make this accessible this in JS using MUI using Collapse. However if you try it in TypeScript you cannot make your Collapse accessible because you get a type error on the necessary id.
Thank you for bringing this to our attention. I've added a fix in https://github.com/mui-org/material-ui/pull/29888
Duplicates
Latest version
Current behavior 😯
When you try to use basic DOM props like
id
on<Collapse>
in TypeScript you get a type error because they are not included in CollapseProps.Expected behavior 🤔
It should be possible to use dom props, especially
id
, on Collapse without a TypeScript type error.Steps to reproduce 🕹
Steps:
id="something"
to a<Collapse>
componenthttps://codesandbox.io/s/infallible-ptolemy-u6bye?file=/src/Demo.tsx
Context 🔦
ARIA has an example on how to make stuff like Collapse accessible (Using a button to collapse and expand a region).
You can make this accessible this in JS using MUI using Collapse. However if you try it in TypeScript you cannot make your Collapse accessible because you get a type error on the necessary
id
.Your environment 🌎
`npx @mui/envinfo`
``` System: OS: Linux 5.10 Ubuntu 20.10 (Groovy Gorilla) Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.22.11 - ~/.nvm/versions/node/v16.13.0/bin/yarn npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm Browsers: Chrome: Not Found Firefox: Not Found npmPackages: @emotion/react: ^11.4.0 => 11.6.0 @emotion/styled: ^11.3.0 => 11.6.0 @mui/base: 5.0.0-alpha.56 @mui/icons-material: ^5.0.0 => 5.2.0 @mui/lab: ^5.0.0-alpha.47 => 5.0.0-alpha.56 @mui/material: ^5.0.0 => 5.2.0 @mui/private-theming: 5.2.0 @mui/styled-engine: 5.2.0 @mui/styles: ^5.0.0 => 5.2.0 @mui/system: 5.2.0 @mui/types: 7.1.0 @mui/utils: ^5.0.0 => 5.2.0 @types/react: ^17.0.15 => 17.0.35 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: 5.3.3 typescript: 4.2.4 => 4.2.4 ```