Modal: dynamically change aria-hidden based on modal state

[tinymachine]

Closed modals don't have aria-hidden set to false, so screen readers (like VoiceOver on macOS and iOS) will still read the contents of closed modals. This should probably be defaulted to true, and changed to false in the openModal() method, and reset to true in closeModal().

[markteekman]

Good find @tinymachine, thank you! I'll add it to the list 🙂

[tinymachine]

My pleasure, @markteekman!

[markteekman]

@tinymachine tested it myself and read into it a little more but it should work fine as it is! The modal has it's visibility at hidden and that should be enough: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden.

[tinymachine]

Thanks for explaining, @markteekman! That behavior makes perfect sense, and works correctly for me on your Modal demo page. Weirdly, I'm experiencing an issue where embedded Vimeo videos in modals are being read by VoiceOver on iOS 15.4.1 even when the modals are closed (i.e. visibility: hidden), but adding aria-hidden="true" to the modal element fixes it. Not sure if a bug in my code or maybe in Safari/VoiceOver? I'll troubleshoot and let you know if I sort it out. Thanks again!

[markteekman]

@tinymachine it got me thinking, could it have anything to do with the embedded Vimeo video being an iframe? And thus it being handled differently as a child of a parent with visibility: hidden?

[tinymachine]

I think you're exactly right — this is not at all an issue with your code, or with Vimeo. It looks like there's a Safari bug whereby VoiceOver reads the contents of iframes even when the parent has visibility: hidden. Here's a screen capture of VoiceOver on iOS 15.4.1 reading a test page I worked up (source). It correctly does not read the content of the iframe when parent has display: none, but it incorrectly reads the content for visibility: hidden. I'll need to check if this is a known bug...

RPReplay_Final1653252262.mov

[tinymachine]

This bug of iframes being accessible via VoiceOver in Safari on iOS and macOS even with visibility: hidden has indeed been reported on the WebKit bug tracker (back in 2019!), with no apparent traction so far. (I updated it with a new screen capture.)

[markteekman]

Nice find @tinymachine and great reproductions! Damn, I know Safari is still behind on a lot of stuff, but 2019? I don't know what hope there is that it will be fixed soon..

[tinymachine]

Thanks! Yeah, agreed - not holding my breath. At least display: none is an easy workaround!

[tinymachine]

One suggestion might be for your Modal component to toggle display: none instead of visibility: hidden since that does work correctly on iOS. Any downsides to that?

[markteekman]

Well, I had this in the first place, but the problem with display: none it that transitions/animations don't work when you toggle to display: block (or flex or grid). That's why I went with visibility: hidden 🤔 Did you try to manually override the styles with a display:none to see if that works?