fix(FEC-12918): handle focus change (#310)

kaltura · Feb 20, 2023 · cf6105e · cf6105e
1 parent 604d603
commit cf6105e
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.0.16",
+    "@playkit-js/common": "^1.1.0",
     "@playkit-js/playkit-js-ui": "^0.73.0",
     "@playkit-js/ui-managers": "^1.3.2",
     "classnames": "^2.2.6"

diff --git a/src/components/kitchen-sink/kitchenSink.tsx b/src/components/kitchen-sink/kitchenSink.tsx
@@ -1,5 +1,5 @@
 import {Component, h} from 'preact';
-import {A11yWrapper} from '@playkit-js/common';
+import {A11yWrapper, OnClick} from '@playkit-js/common';
 import * as styles from './kitchenSink.scss';
 import {QnaMessage, QnaMessageType} from '../../qnaMessageFactory';
 import {Thread} from '../thread';
@@ -14,8 +14,10 @@ import {WhoopseErrorIcon} from '../icons/whoopse-error';
 import {NoAnnouncementsYetImage} from '../icons/no-announcements';
 import {NoQuestionsYetImage} from '../icons/no-questions';
 
+const {KeyMap} = KalturaPlayer.ui.utils;
+
 export interface KitchenSinkProps {
-  onClose: () => void;
+  onClose: OnClick;
   threads: QnaMessage[];
   dateFormat: string;
   hasError: boolean;
@@ -157,12 +159,18 @@ export class KitchenSink extends Component<KitchenSinkProps, KitchenSinkState> {
     }
   }
 
+  private _handleClose = (event: KeyboardEvent) => {
+    if (event.keyCode === KeyMap.ESC) {
+      this.props.onClose(event, true);
+    }
+  };
+
   render(props: KitchenSinkProps, state: any) {
     const {onClose} = props;
     let renderedContent = this._generateContent(props);
 
     return (
-      <div className={styles.root} aria-live="polite">
+      <div className={styles.root} aria-live="polite" onKeyUp={this._handleClose}>
         {/* header */}
         <div className={styles.headerContainer}>
           <div className={styles.header}>

diff --git a/src/components/plugin-button/pluginButton.tsx b/src/components/plugin-button/pluginButton.tsx
@@ -22,13 +22,19 @@ interface QnaPluginButtonProps {
   onClick: OnClick;
   showIndication?: boolean;
   label?: string;
+  setRef: (ref: HTMLButtonElement | null) => void;
 }
 
-export const QnaPluginButton = withText(translates)(({isActive, onClick, showIndication, ...otherProps}: QnaPluginButtonProps) => {
+export const QnaPluginButton = withText(translates)(({isActive, onClick, showIndication, setRef, ...otherProps}: QnaPluginButtonProps) => {
   return (
     <Tooltip label={otherProps.label} type="bottom">
       <A11yWrapper onClick={onClick}>
-        <button aria-label={otherProps.label} className={[ui.style.upperBarIcon, styles.qnaPluginButton, isActive ? styles.active : ''].join(' ')}>
+        <button
+          aria-label={otherProps.label}
+          className={[ui.style.upperBarIcon, styles.qnaPluginButton, isActive ? styles.active : ''].join(' ')}
+          ref={node => {
+            setRef(node);
+          }}>
           <Icon
             id="qna-plugin-button"
             height={icons.BigSize}

diff --git a/src/qna-plugin.tsx b/src/qna-plugin.tsx
@@ -50,6 +50,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
   private _pluginState: PluginStates | null = null;
   private _contribServices: ContribServices;
   private _triggeredByKeyboard = false;
+  private _pluginButtonRef: HTMLButtonElement | null = null;
 
   static defaultConfig: QnaPluginConfig = {
     toastDuration: DefaultToastDuration,
@@ -170,6 +171,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
       this.upperBarManager!.remove(this._pluginIcon);
       this._pluginPanel = -1;
       this._pluginIcon = -1;
+      this._pluginButtonRef = null;
     }
   };
 
@@ -187,7 +189,7 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
         const theme = this._getTheme();
         return (
           <KitchenSink
-            onClose={this._deactivatePlugin}
+            onClose={this._handleClose}
             dateFormat={this.config.dateFormat}
             threads={this._threads}
             hasError={this._hasError}
@@ -214,7 +216,12 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
       onClick: this._handleClickOnPluginIcon as () => void,
       component: () => {
         return (
-          <QnaPluginButton showIndication={this._showMenuIconIndication} isActive={this._isPluginActive()} onClick={this._handleClickOnPluginIcon} />
+          <QnaPluginButton
+            showIndication={this._showMenuIconIndication}
+            isActive={this._isPluginActive()}
+            onClick={this._handleClickOnPluginIcon}
+            setRef={this._setPluginButtonRef}
+          />
         );
       }
     }) as number;
@@ -257,6 +264,17 @@ export class QnaPlugin extends KalturaPlayer.core.BasePlugin {
     }
   };
 
+  private _setPluginButtonRef = (ref: HTMLButtonElement) => {
+    this._pluginButtonRef = ref;
+  };
+
+  private _handleClose = (e: OnClickEvent, byKeyboard: boolean) => {
+    if (byKeyboard) {
+      this._pluginButtonRef?.focus();
+    }
+    this._deactivatePlugin();
+  };
+
   reset(): void {
     this._triggeredByKeyboard = false;
     this._hasError = false;

diff --git a/yarn.lock b/yarn.lock
@@ -628,11 +628,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@playkit-js/common@^1.0.16":
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.0.16.tgz#cee57df0909bcbc1ab85e97b222ce93d05c1104a"
-  integrity sha512-40QWemEF8QQd23kpFsU20WycVt9A8oRN1wQPq66ORaKMtgXANkTk6V83UNlifa9eNw6K9ovugRnHd9mxCE6Y2w==
+"@playkit-js/common@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.1.0.tgz#2baa34c16317e8355326537c8d0348e953f555de"
+  integrity sha512-cMNZy9bmBFaICpUKyJrd8diYEcTdk2Lgm2PgkC8rnyZYnn3p5nIXgCjauVrcOxeRkxNErf8und6Gv3hNsPTi/g==
   dependencies:
+    "@playkit-js/playkit-js-ui" "^0.74.0"
     linkify-it "^4.0.1"
 
 "@playkit-js/[email protected]":
@@ -665,6 +666,16 @@
     react-redux "^7.2.0"
     redux "^4.0.5"
 
+"@playkit-js/playkit-js-ui@^0.74.0":
+  version "0.74.0"
+  resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js-ui/-/playkit-js-ui-0.74.0.tgz#22d0b0f8443cb77352f3ba877b3efc2188bde4ae"
+  integrity sha512-my/6/HIGGRmP3vJC3vBs0jYwJA2bKyIQlAxH/ZAZccW+xW7iztVskxvkCoAdyFKn1rlddNaq9V962oYKxKtc3Q==
+  dependencies:
+    preact "^10.3.4"
+    preact-i18n "^2.0.0-preactx.2"
+    react-redux "^7.2.0"
+    redux "^4.0.5"
+
 "@playkit-js/playkit-js@^0.80.3":
   version "0.80.3"
   resolved "https://registry.yarnpkg.com/@playkit-js/playkit-js/-/playkit-js-0.80.3.tgz#07e47e560aeadc6ca3b20afde87dfdf4ab8f7ac0"