[A11Y] Add HTML tag "aria-hidden"

[Mitchnsun]

For accessibility, collapse element should have an aria-hidden tag on the div.ReactCollapse--collapse

Cases: aria-hidden=

• true collapse is closed
• false collapse is opened

[nkbt]

Can it be set on a parent element?

[Mitchnsun]

It could be set on a parent element indeed, the fact that all the children is hidden when closed, it should work.

By the way, for accessibility, it will be better if div.ReactCollapse--collapse has visibility:hidden. It permits for accessibility tools to know that the element is out of view.

Thanks for your answer

[nkbt]

You can add any styles by updating collapse class dynamically. Or do the same as with aria attributes - apply to parent element based on isOpened. I get that these things are good to haves and would not mind a pr for aria things as they seem reasonable to have and have no visual side effects. Unfortunately I do not think it is as straightforward with visibility hidden though.

[Mitchnsun]

I agree, it's probably better to externalize it.

Finally, I used UnmountedClose. Better for accessibility that the component not appearing in DOM when is hidden.

Thanks

[nkbt]

Glad it worked out. Thanks for your input!