Need to render the parent of nested modals `inert` for better a11y
andria-dev opened this issue · 3 comments
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.
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.
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).
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