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.
openedx · Aug 27, 2024 · f0d8d52 · f0d8d52
1 parent 275d4d9
commit f0d8d52
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git 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
@@ -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;