From ecc40ab62e7fb987483cb6793cb9f3c2e75974fe Mon Sep 17 00:00:00 2001
From: Ans <git@anselmbradford.com>
Date: Wed, 13 Nov 2024 12:48:51 -0500
Subject: [PATCH] Handle a11y in video iframe

---
 cfgov/unprocessed/js/organisms/VideoPlayer.js           | 4 ++++
 cfgov/v1/jinja2/v1/includes/organisms/video-player.html | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/cfgov/unprocessed/js/organisms/VideoPlayer.js b/cfgov/unprocessed/js/organisms/VideoPlayer.js
index a47c34a871..1deeca6234 100644
--- a/cfgov/unprocessed/js/organisms/VideoPlayer.js
+++ b/cfgov/unprocessed/js/organisms/VideoPlayer.js
@@ -78,6 +78,10 @@ function VideoPlayer(element) {
    *   to video player instance.
    */
   function _videoPlayerReadyHandler(event) {
+    // Video has loaded into the iframe, so we can show it to assistive devices.
+    _iframeDom.removeAttribute('aria-hidden');
+    _iframeDom.removeAttribute('tabindex');
+
     // Add duration timestamp to video.
     const player = event.target;
     const duration = player.getDuration();
diff --git a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
index 9351ada8d7..c446f84a97 100644
--- a/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
+++ b/cfgov/v1/jinja2/v1/includes/organisms/video-player.html
@@ -79,7 +79,8 @@
                     src="{{ video_url }}"
                     allow="fullscreen; autoplay"
                     aria-hidden="true"
-                    tabindex="-1">
+                    tabindex="-1"
+                    title="This is a placeholder for a video that will load.">
                 </iframe>
             </div>
         </div>