Modal: dynamically change `aria-hidden` based on modal state

Question

Modal: dynamically change `aria-hidden` based on modal state

tinymachine opened this issue 2 years ago · comments

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().

Mark Teekman · Answer 1 · Fri May 20 2022 15:35:37 GMT+0800 (China Standard Time)

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

Mihira Jayasekera · Answer 2 · Fri May 20 2022 15:48:37 GMT+0800 (China Standard Time)

My pleasure, @markteekman!

Mark Teekman · Answer 3 · Fri May 20 2022 22:07:22 GMT+0800 (China Standard Time)

@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.

Mihira Jayasekera · Answer 4 · Sat May 21 2022 00:16:53 GMT+0800 (China Standard Time)

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!

Mark Teekman · Answer 5 · Sun May 22 2022 14:37:49 GMT+0800 (China Standard Time)

@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?