diff --git a/src/components/plugin-button/plugin-button.tsx b/src/components/plugin-button/plugin-button.tsx index 2745e53..3499ef3 100644 --- a/src/components/plugin-button/plugin-button.tsx +++ b/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(' ')} diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx index 091addd..6f8ff53 100644 --- a/src/components/search/search.tsx +++ b/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: Search in Transcript, clearSearchLabel: Clear search, @@ -34,11 +39,26 @@ export interface SearchProps { nextMatchLabel?: string; prevMatchLabel?: string; searchResultsLabel?: string; + eventManager?: any + focusPluginButton: () => void; } +@withEventManager class SearchComponent extends Component { 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) { const {value, activeSearchIndex, totalSearchResults, kitchenSinkActive} = this.props; if ( diff --git a/src/components/transcript/transcript.tsx b/src/components/transcript/transcript.tsx index d4008b1..a3c30b9 100644 --- a/src/components/transcript/transcript.tsx +++ b/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 { totalSearchResults={totalSearchResults} toggledWithEnter={toggledWithEnter} kitchenSinkActive={kitchenSinkActive} + focusPluginButton={this.props.focusPluginButton} /> {this._renderJumpToSearchButton()} diff --git a/src/transcript-plugin.tsx b/src/transcript-plugin.tsx index 3498745..fdd2768 100644 --- a/src/transcript-plugin.tsx +++ b/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; },