search

andria-dev / react-spring-modal

Animatable and accessible modals built with react-spring
34 stars 8 forks source link

Need to render the parent of nested modals `inert` for better a11y #2

Closed andria-dev closed 4 years ago

andria-dev commented 4 years ago

Render parent of nested modals inert

The parents of nested modals are still accessible by keyboard and screen reader while nested modals are open which should not be the case.

One solution might be to keep an array/list of which modals have been opened in what order (it's likely that the order will be their DOM order in <div id="modal-root">) and when a new one opens, the last one open is rendered inert. And vice-versa, when the new one closes, the last one will no longer be rendered inert.

andria-dev commented 4 years ago

react-spring-modal-a11y-fix-plan

The idea is to use an array (or stack) outside of the BaseModal component to keep track of the most recent modal to render and only have that modal not have the "inert" attribute set on it.

andria-dev commented 4 years ago

Tried to implement this but ran into an issue where the useEffect with dependencies of [isOpen, modalRef.current] would fire off twice in a row when opened causing it to render the opened modal inert. A quick solution I thought of would be to have a Set alongside the "stack" that is used to say, if it's already been added to the stack, don't fire again (using a Set is faster than searching through the array).

andria-dev commented 4 years ago

This was fixed in release 1.0.8 using the above-mentioned ideas https://github.com/ChrisBrownie55/react-spring-modal/releases/tag/1.0.8