Conditional rendering of modals causes accessibility problems

[tschinski]

Hey Guys,

we are using a lot of Scale Modals in our React application. As designed we open and close them by boolean values.

In lots of places we render them, in addition, conditionally to the DOM. Especially in scenarios where we don't want to teach the modal how to handle undefined values like for example

{isFetchingSomeRemoteValue && <ScaleModal ...>{RemoteValue}</ScaleModal>}

But then we recognized that conditionally rendering causes some accessibility problems. Tab index gets lost and the screen readers aren't able to read the content of the modals.

Any ideas on that?

Cheers Tobi

[acstll]

Hey, thanks for asking @tschinski

Why do you need to render it based on a condition? I would render it always, and open/close it when needed. Would that solve your issue?

[tschinski]

For us, it make sense to render it based on a condition in some cases. But it works like designed when always rendering it. You can close this issue.