Situation
I am currently embedding a YouTube iframe on my page and am loading it on top of a popup modal. When I press 'ESC', I can close out the popup modal but if the user has their tab-focus on something within the YouTube player, the browser is no longer able to detect if the user is hitting 'ESC' to try and close the popup modal. This is definitely an A11y issue.
Problem to Solve
Is there any way to detect if a user hits the 'ESC' key while the focus is trapped within the player? There are event emitters for playerStateChange, quality change, etc but I didn't see anything for keypresses.
Solutions Considered Already but Rejected:
- Blocking the user from focusing on the YouTube iframe and creating custom buttons/controls outside of the player to handle controls - this is too cumbersome of a solution that requires styling buttons and controls
- Bouncing focus back to window on player state change - moving focus unexpectedly is an a11y problem but also not every case of user focus trap can be covered with the current event emitters built into the YouTube API.
Any help/guidance is greatly appreciated!
"This is definitely an A11y issue"- not necessarily. From a strict WCAG perspective, it doesn't fail any success criteria directly. It might not be the best UX but it's not a a11y failure. The authoring practice for modal dialogs (w3.org/TR/wai-aria-practices/#dialog_modal) does recommend that ESC be allowed to close the dialog, but not following the authoring practice is not a a11y failure in and of itself. So it's great that you're trying to fix this but I wouldn't fret about it being an accessibility failure. – Remillard