From f0d8d5262c03ff5d8ee891fed59bb06678d7a002 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 27 Aug 2024 09:06:28 -0400
Subject: [PATCH] fix: add aria-current attributes to video captions (#35371)

This PR fixes the accessibility issues associated with only visually treating the current transcript line. The current implementation for the transcript panel bolds the text that is actively being spoken or skipped to. However, there is no aria attribute present to convey this change to assistive technology. This change impacts learners and course authors.
---
 xmodule/js/src/tabs/tabs-aggregator.js   | 4 ++--
 xmodule/js/src/video/09_video_caption.js | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/xmodule/js/src/tabs/tabs-aggregator.js b/xmodule/js/src/tabs/tabs-aggregator.js
index 83baca4cf6..da982b6afc 100644
--- a/xmodule/js/src/tabs/tabs-aggregator.js
+++ b/xmodule/js/src/tabs/tabs-aggregator.js
@@ -63,8 +63,8 @@
         if ($.isFunction(onSwitchFunction)) {
           onSwitchFunction();
         }
-        this.$tabs.removeClass('current');
-        $currentTarget.addClass('current');
+        this.$tabs.attr('aria-current', 'false').removeClass('current');
+        $currentTarget.attr('aria-current', 'true').addClass('current');
 
         /*
         Tabs are implemeted like anchors. Therefore we can use hash to find
diff --git a/xmodule/js/src/video/09_video_caption.js b/xmodule/js/src/video/09_video_caption.js
index 37e3923067..f5db26514b 100644
--- a/xmodule/js/src/video/09_video_caption.js
+++ b/xmodule/js/src/video/09_video_caption.js
@@ -1096,12 +1096,13 @@
                         if (typeof this.currentIndex !== 'undefined') {
                             this.subtitlesEl
                                 .find('li.current')
+                                .attr('aria-current', 'false')
                                 .removeClass('current');
-                        }
-
+                        }                 
                         this.subtitlesEl
                             .find("span[data-index='" + newIndex + "']")
                             .parent()
+                            .attr('aria-current', 'true')
                             .addClass('current');
 
                         this.currentIndex = newIndex;