fix(ADA-1777): University of Illinois Urbana-Champaign (ADA) V7 playe…

…r issues Priority 2(#8) transcript panel does not immediately follow the toggle button (#222)

Issue:
When user press shift+tab inside transcript plugin after first element - search input, focus move to last element in bottom bar and not to transcript button.

Fix:
Add listener to search input so we user focus on it and press shift tab focus will move to transcript button or to more button (if transcript inside more dropdown)

Solves ADA-1777

src/components/plugin-button/plugin-button.tsx

@@ -24,6 +24,7 @@ export const PluginButton = ({isActive, label, id, icon, dataTestId, setRef}: Pl
               setRef(node);
             }
           }}
+          tabIndex={0}
           type="button"
           aria-label={label}
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}

src/components/search/search.tsx

@@ -1,7 +1,12 @@
 import {h, Component} from 'preact';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
+import {core} from '@playkit-js/kaltura-player-js';
 
+const {Utils} = core;
+const {withEventManager} = KalturaPlayer.ui.Event;
+const {TAB} = KalturaPlayer.ui.utils.KeyMap;
 const {withText, Text} = KalturaPlayer.ui.preacti18n;
+
 const translates = ({activeSearchIndex, totalSearchResults}: SearchProps) => ({
   searchLabel: <Text id="transcript.search">Search in Transcript</Text>,
   clearSearchLabel: <Text id="transcript.clear_search">Clear search</Text>,
@@ -34,11 +39,26 @@ export interface SearchProps {
   nextMatchLabel?: string;
   prevMatchLabel?: string;
   searchResultsLabel?: string;
+  eventManager?: any
+  focusPluginButton: () => void;
 }
 
+@withEventManager
 class SearchComponent extends Component<SearchProps> {
   private _inputField: InputField | null = null;
 
+  constructor(props: SearchProps) {
+    super(props);
+    this.props.eventManager?.listen(document, 'keydown', this.handleKeydownEvent);
+  }
+
+  private handleKeydownEvent = (event: KeyboardEvent) => {
+    if (event.keyCode === TAB && event.shiftKey && this._inputField?.base?.contains(document.activeElement)){
+      event.preventDefault();
+      this.props.focusPluginButton();
+    }
+  };
+
   shouldComponentUpdate(nextProps: Readonly<SearchProps>) {
     const {value, activeSearchIndex, totalSearchResults, kitchenSinkActive} = this.props;
     if (

src/components/transcript/transcript.tsx

@@ -70,6 +70,7 @@ export interface TranscriptProps {
   isMobile?: boolean;
   playerWidth?: number;
   onJumpToSearchMatch: () => void;
+  focusPluginButton: () => void;
 }
 
 interface TranscriptState {
@@ -325,6 +326,7 @@ export class Transcript extends Component<TranscriptProps, TranscriptState> {
           totalSearchResults={totalSearchResults}
           toggledWithEnter={toggledWithEnter}
           kitchenSinkActive={kitchenSinkActive}
+          focusPluginButton={this.props.focusPluginButton}
         />
         {this._renderJumpToSearchButton()}
         <TranscriptMenu {...{downloadDisabled, onDownload, printDisabled, onPrint, isLoading, detachMenuItem, kitchenSinkDetached}} />

src/transcript-plugin.tsx

@@ -335,6 +335,8 @@ export class TranscriptPlugin extends KalturaPlayer.core.BasePlugin {
               this._handleAttach(CloseDetachTypes.arrow);
             }}
             onJumpToSearchMatch={this._toSearchMatch}
+            //@ts-ignore
+            focusPluginButton={() => this.upperBarManager!.focusPluginButton(this._transcriptIcon)}
           />
         ) as any;
       },