fix(FEC-12918): When users close a menu by clicking the close button, focus should go back to the button that opened the plugin (#297)

* fix(FEC-12918): handle focus change on plugin close

* fix(FEC-12918): upd dependencies

Author: semarche-kaltura

cypress/e2e/navigation.cy.ts

@@ -87,12 +87,20 @@ describe('Navigation plugin', () => {
       cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'hidden');
     });
 
-    it('should open the navigation side panel if expandOnFirstPlay configuration is true ', () => {
+    it('should open the navigation side panel if expandOnFirstPlay configuration is true', () => {
       mockKalturaBe();
       preparePage({expandOnFirstPlay: true}, {muted: true, autoplay: true});
       cy.get('[data-testid="navigation_pluginButton"]').should('exist');
       cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'visible');
     });
+
+    it('should close plugin if ESC button pressed', () => {
+      mockKalturaBe();
+      preparePage({expandOnFirstPlay: true}, {muted: true, autoplay: true});
+      cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'visible');
+      cy.get("[aria-label='Search in video']").type('{esc}');
+      cy.get('[data-testid="navigation_root"]').should('have.css', 'visibility', 'hidden');
+    });
   });
 
   describe('navigation data', () => {
@@ -161,6 +169,15 @@ describe('Navigation plugin', () => {
   });
 
   describe('search and filter', () => {
+    it('should set focus to search input if plugin opened by keyboard', () => {
+      mockKalturaBe();
+      preparePage();
+      cy.get('[data-testid="navigation_pluginButton"]').should('exist').trigger('keydown', {
+        keyCode: 32, // Space
+        force: true
+      });
+      cy.get("[aria-label='Search in video']").should('have.focus');
+    });
     it('should test search bar', () => {
       mockKalturaBe();
       preparePage({expandOnFirstPlay: true}, {muted: true, autoplay: true});

package.json

@@ -12,7 +12,7 @@
     "url": "git+https://github.com/kaltura/playkit-js-navigation.git"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.0.18",
+    "@playkit-js/common": "^1.1.0",
     "@playkit-js/playkit-js-ui": "^0.73.0",
     "@playkit-js/ui-managers": "^1.3.2"
   },

src/components/navigation/index.tsx

@@ -1,5 +1,6 @@
 import {h, Component} from 'preact';
 import * as styles from './navigaton.scss';
+import {OnClick} from '@playkit-js/common';
 import {NavigationList} from './navigation-list/NavigationList';
 import {NavigationSearch} from '../navigation-search/navigation-search';
 import {NavigationFilter} from '../navigation-filter';
@@ -31,7 +32,7 @@ export interface SearchFilter {
 export interface NavigationProps {
   data: Array<ItemData>;
   onItemClicked(time: number): void;
-  onClose: () => void;
+  onClose: OnClick;
   retry?: () => void;
   isLoading: boolean;
   hasError: boolean;
@@ -237,7 +238,7 @@ export class Navigation extends Component<NavigationProps, NavigationState> {
 
   private _handleClose = (event: KeyboardEvent) => {
     if (event.keyCode === KeyMap.ESC) {
-      this.props.onClose();
+      this.props.onClose(event, true);
     }
   };
 

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

@@ -16,14 +16,18 @@ const translates = ({isActive}: PluginButtonProps) => {
 interface PluginButtonProps {
   isActive: boolean;
   onClick: OnClick;
+  setRef: (ref: HTMLButtonElement | null) => void;
   label?: string;
 }
 
-export const PluginButton = withText(translates)(({isActive, onClick, ...otherProps}: PluginButtonProps) => {
+export const PluginButton = withText(translates)(({isActive, onClick, setRef, ...otherProps}: PluginButtonProps) => {
   return (
     <Tooltip label={otherProps.label} type="bottom">
       <A11yWrapper onClick={onClick}>
         <button
+          ref={node => {
+            setRef(node);
+          }}
           aria-label={otherProps.label}
           className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
           data-testid={'navigation_pluginButton'}>

src/navigation-plugin.tsx

@@ -31,7 +31,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
   private _activeCuePointsMap: HighlightedMap;
   private _captionMap: Map<string, Array<ItemData>> = new Map();
   private _activeCaptionMapId: string = '';
-  private _navigationComponentRef: Navigation | null = null;
+  private _pluginButtonRef: HTMLButtonElement | null = null;
 
   private _player: KalturaPlayerTypes.Player;
   private _navigationPanel = -1;
@@ -259,6 +259,13 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     }
   };
 
+  private _handleClose = (e: OnClickEvent, byKeyboard: boolean) => {
+    if (byKeyboard) {
+      this._pluginButtonRef?.focus();
+    }
+    this._deactivatePlugin();
+  };
+
   private _createNavigationPlugin = () => {
     if (Math.max(this._navigationPanel, this._navigationIcon) > 0) {
       this.logger.warn('navigation plugin already initialized');
@@ -270,10 +277,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       panelComponent: () => {
         return (
           <Navigation
-            ref={node => {
-              this._navigationComponentRef = node;
-            }}
-            onClose={this._deactivatePlugin}
+            onClose={this._handleClose}
             data={this._data}
             onItemClicked={this._seekTo}
             isLoading={this._isLoading}
@@ -296,7 +300,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handleClickOnPluginIcon as () => void,
       component: () => {
-        return <PluginButton isActive={this._isPluginActive()} onClick={this._handleClickOnPluginIcon} />;
+        return <PluginButton isActive={this._isPluginActive()} onClick={this._handleClickOnPluginIcon} setRef={this._setPluginButtonRef} />;
       }
     }) as number;
 
@@ -370,13 +374,17 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
     return this.sidePanelsManager!.isItemActive(this._navigationPanel);
   };
 
+  private _setPluginButtonRef = (ref: HTMLButtonElement) => {
+    this._pluginButtonRef = ref;
+  };
+
   reset(): void {
     if (Math.max(this._navigationPanel, this._navigationIcon) > 0) {
       this.sidePanelsManager!.remove(this._navigationPanel);
       this.upperBarManager!.remove(this._navigationIcon);
       this._navigationPanel = -1;
       this._navigationIcon = -1;
-      this._navigationComponentRef = null;
+      this._pluginButtonRef = null;
     }
     this._activeCuePointsMap = this._getDefaultActiveCuePointsMap();
     this._activeCaptionMapId = '';

yarn.lock

@@ -130,11 +130,12 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
-"@playkit-js/common@^1.0.18":
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/@playkit-js/common/-/common-1.0.18.tgz#16b93e58d7f9119f6da0192f6c9788cd6d94098d"
-  integrity sha512-+7wRoZ4cx4icNiOUiHliailsLbPCD4H8ADjdWXDJLXMSDmooUU8yaDCjiahvla64a7ddIwkiNHsVbw2+XW8ujw==
+"@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]":
@@ -167,6 +168,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"