Improve accessibility of video modal #36
Description
Description
On both the legacy home page and the new React-based home page, there’s an accessibility issue related to the modal window containing an embedded iframe.
When the modal is open, it can be closed either by pressing the Esc key or by clicking outside the video player.
However, if a user opens the modal with a platform introduction video (or a course video) and starts navigating through the YouTube player controls using the Tab key, it becomes impossible to close the modal with the Esc key. In fact, I wasn’t able to find any way to close the modal using only the keyboard once focus is trapped inside the YouTube player elements.
Another accessibility concern is the lack of any visible element for closing the modal window.
Currently, users can only close the modal by clicking outside the video player or by pressing the Esc key (with the issues described above).
It might be worth considering adding a visible Close control - for example, a button below the video player, a close icon (X) in the top-right corner of the modal, or possibly both.