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;
},