fix(ADA-1451): Close Video Info modal dialog focus management (#67)

create function to select the more plugin button from right controls elements.

part of:
kaltura/playkit-js-ui#958
kaltura/playkit-js-info#106

solves ADA-1451

src/services/upper-bar-manager/ui/displayed-bar/displayed-bar.component.tsx

@@ -1,4 +1,4 @@
-import { h, Component, ComponentChild, RefObject } from 'preact';
+import { h, Component, ComponentChild, RefObject, createRef } from 'preact';
 import { IconModel } from '../../models/icon-model';
 import { IconWrapper } from '../icon-wrapper/icon-wrapper.component';
 import * as styles from './displayed-bar.component.scss';
@@ -32,6 +32,7 @@ type PropsFromRedux = {
 // @ts-ignore
 @connect(mapStateToProps, null, null, { forwardRef: true })
 export class DisplayedBar extends Component<DisplayedBarProps & PropsFromRedux, DisplayedBarState> {
+  public moreIconRef = createRef<MoreIcon>();
   constructor() {
     super();
     this.state = { showDropdown: false };
@@ -109,6 +110,9 @@ export class DisplayedBar extends Component<DisplayedBarProps & PropsFromRedux,
             onClick={this.handleOnClick}
             icons={dropdownControls}
             player={this.props.player}
+            ref={(node) => {
+              this.moreIconRef.current = node;
+            }}
           />
         )}
       </div>

src/services/upper-bar-manager/upper-bar-manager.tsx

@@ -76,16 +76,19 @@ export class UpperBarManager {
     return icons.sort((a, b) => iconsOrder[a.displayName] - iconsOrder[b.displayName]);
   }
 
+  public getMorePluginButton() {
+    const moreElement = this.displayedBarComponentRefs.Playback.current?.moreIconRef?.current?.base as HTMLElement;
+    return moreElement?.querySelector('[tabindex="0"]') as HTMLButtonElement;
+  }
+
   public focusPluginButton(pluginId: number) {
     let pluginButton;
     const controls = this.getControls(this.iconsOrder);
     const pluginElement = controls.find((control) => control.id === pluginId)?.componentRef?.current?.base as HTMLElement;
     if (pluginElement) {
       pluginButton = pluginElement.querySelector('[tabindex="0"]') as HTMLElement;
     } else {
-      const rightControls = this.displayedBarComponentRefs.Playback.current?.base as HTMLElement;
-      const buttons = rightControls.querySelectorAll('[tabindex="0"]');
-      pluginButton = buttons[buttons.length - 1] as HTMLElement;
+      pluginButton = this.getMorePluginButton();
     }
     pluginButton?.focus();
   }