[A11Y] Add HTML tag "aria-hidden"

Question

[A11Y] Add HTML tag "aria-hidden"

Closed this issue 4 years ago · 5 comments

Mitchnsun commented 5 years ago

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

Answer 1 · 2019-11-20T21:01:12.000Z

Can it be set on a parent element?

Answer 2 · 2019-11-21T10:36:21.000Z

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

Answer 3 · 2019-11-21T10:53:44.000Z

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.

Answer 4 · 2019-11-22T16:56:14.000Z

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

Answer 5 · 2019-11-22T21:02:16.000Z

Glad it worked out. Thanks for your input!