No aria-expanded attribute on Spoiler component

[gitjeff05]

What package has an issue

@mantine/core

Describe the bug

Spoiler component has no deterministic way of semantically describing the state of the component. Specifically, whether or not the spoiler is expanded. This makes it hard to apply custom styles for the two states. Other components, like the menu component, provide aria-expanded and data-expanded attributes that change based on whether the component is open or closed.

The only way I know to ensure the parent element holds the state is to attach my own classes to the parent -- which you can do by inspecting the button text (provided by showLabel and hideLabel props). However, since the buttons are always rendered sometime after the spoiler component, you must hack a way to check for the existence of the button first, then check the text, then apply my parent class.

What version of @mantine/hooks page do you have in package.json?

5.9.4

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[7iomka]

Also concerned about this issue
I have another goals - the use of a custom control, but, maybe this can be a partially workaround
Short: you need to create your own controlled control and sync it state with initialState of Spoiler, and trigger by controlRef click event when your custom control is clicked.

https://codesandbox.io/s/jolly-robinson-3sebvw

The one issue - is unable to set aria attributes to content
but it is required (Details)

@rtivital What do you think to add this internally?

[7iomka]

https://www.npmjs.com/package/@gaearon/react-collapsed
https://react-collapsed.netlify.app/?path=/story/basic-usage--uncontrolled
We need this aria behaviour control

[rtivital]

The issue is resolved in 7.0.1