[@mantine/core] fix useCollapse remove collapsedStyles display: 'none'

[Han5991]

Question: Is it safe to remove display: none from Collapse hidden styles?

Context

I am considering removing display: none from the hidden styles in the Collapse component, and relying only on height: 0 and overflow: hidden to hide content when collapsed.

Why consider this change?

• Using display: none causes issues with nested Collapses and prevents child animations from triggering correctly when the parent is reopened.
• Removing display: none allows for smoother transitions, better support for nested Collapses, and more consistent state updates for children.

Accessibility Considerations

• With display: none, content is removed from the accessibility tree, which is sometimes desirable, but it also prevents focus management and dynamic content updates.
• Using height: 0 and overflow: hidden keeps the content in the DOM and accessibility tree. To address focus issues, we can blur any focused element inside a collapsed Collapse and use aria-hidden or tabIndex for additional control.

My Question

Are there any strong reasons or edge cases where we should keep display: none in Collapse, rather than just using height: 0 and overflow: hidden?

• Are there known accessibility or performance issues with this approach?
• Do you see any downsides to removing display: none for the sake of animation and nested Collapse support?

I would appreciate any feedback or concerns before proceeding with this change.

fix: #6447
@rtivital
If there are any concerns about accessibility or specific use-cases that require display: none, please let me know!

[rtivital]

display: none prevents elements inside the Collapse with hidden state from being focused. If display: none is removed, focused must be handled by other means, for example, by setting inert attribute on the root element of the hidden Collapse.

[rtivital]

Please remove last commit, this PR must point to v7 branch, it should not merge master changes in

[rtivital]

Thanks!