fix(ADA-16): Transcript search results inaccessible to screen reader

cypress/e2e/transcript.cy.ts

@@ -197,6 +197,23 @@ describe('Transcript plugin', () => {
         });
       });
     });
+
+    it('should move focus to current caption in search results', () => {
+      mockKalturaBe();
+      loadPlayer().then((kalturaPlayer) => {
+        cy.get('[data-testid="transcript_header"] [aria-label="Search in Transcript"]').get('input').type('music').then(()=> {
+          kalturaPlayer.currentTime = 20;
+          kalturaPlayer.pause();
+          cy.get('[data-testid="transcript_skipButton"]').focus();
+          cy.wait(300);
+          cy.get('[data-testid="transcript_skipButton"]').trigger('keydown', {
+            keyCode: 9, // tab
+            force: true
+          });
+          cy.get('[aria-label="00:15 listening to music for the first time"]').should('have.focus');
+        });
+      });
+    });
   });
 
   describe('popover menu', () => {

src/components/caption-list/captionList.tsx

@@ -89,6 +89,7 @@ export class CaptionList extends Component<Props> {
       shouldScroll: this._getShouldScroll(id),
       shouldScrollToSearchMatch: this._getShouldScrollToSearchMatch(id),
       isAutoScrollEnabled,
+      searchCaption: this.props.searchMap[captionData.id],
       ...this._getSearchProps(id)
     };
     return newCaptionProps;
@@ -104,6 +105,7 @@ export class CaptionList extends Component<Props> {
 
   render() {
     const {data} = this.props;
+    let isSearchCaption = false;
     return (
       <div className={styles.transcriptWrapper} onKeyUp={this._handleKeyUp} aria-live="polite">
         {data.map((captionData, index) => {
@@ -116,7 +118,15 @@ export class CaptionList extends Component<Props> {
                 } else if (index === data.length - 1) {
                   this._lastCaptionRef = node;
                 }
-                if (captionProps.highlighted[captionData.id]) {
+                if (captionProps.searchCaption){
+                  Object.keys(captionProps.searchCaption).forEach(key => {
+                    if (parseInt(key) === this.props.activeSearchIndex) {
+                      this._currentCaptionRef = node
+                      isSearchCaption = true;
+                    }
+                  });
+                }
+                if (!isSearchCaption && captionProps.highlighted[captionData.id]) {
                   this._currentCaptionRef = node;
                 }
               }}

src/components/transcript/transcript.tsx

@@ -252,6 +252,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
         ref={node => {
           this._skipTranscriptButtonRef = node;
         }}
+        data-testid="transcript_skipButton"
         className={styles.skipTranscriptButton}
         onKeyDown={this._handleKeyDown}
         onClick={this._handleClick}