fix(ADA-190): focus to player controls from outside (FEC-13712) (#861)

### Description of the Changes

- make the player's controls part of a page's tabbing flow.

#### Resolves ADA-190
#### Resolves FEC-13712

---------

Co-authored-by: Serhii Marchenko <[email protected]>

src/components/bottom-bar/_bottom-bar.scss

@@ -1,21 +1,20 @@
 .player .bottom-bar {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
   color: #fff;
-  visibility: hidden;
   height: auto;
-  max-height: 0;
-  transition:
-    #{$hover-animation-time}ms max-height ease-in-out,
-    #{$hover-animation-time}ms visibility ease-in-out,
-    0ms padding linear #{$hover-animation-time}ms;
   width: 100%;
   margin-top: auto;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
-  position: relative;
+  position: absolute;
   padding: 0;
+  opacity: 0;
+  max-height: #{$bottom-bar-max-height}px;
+  transition:
+    #{$hover-animation-time}ms opacity ease-in-out,
+    0ms padding linear #{$hover-animation-time}ms;
 
   &.hide {
     display: none;
@@ -90,12 +89,10 @@
 .player.menu-active {
   &:not(.overlay-active) {
     .bottom-bar {
-      visibility: visible;
+      position: relative;
+      opacity: 1;
       padding: 0 #{$gui-gutter}px #{$bottom-bar-bottom-gutter}px;
-      max-height: #{$bottom-bar-max-height}px;
-      transition:
-        #{$hover-animation-time}ms max-height ease-in-out,
-        #{$hover-animation-time}ms visibility ease-in-out;
+      transition: #{$hover-animation-time}ms opacity ease-in-out;
     }
   }
 }

src/components/shell/shell.tsx

@@ -213,13 +213,30 @@ class Shell extends Component<any, any> {
     const {player, eventManager} = this.props;
     eventManager.listen(window, 'resize', debounce(this._onWindowResize, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     eventManager.listen(document, 'scroll', debounce(this._updatePlayerClientRect, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
+    eventManager.listen(document, 'click', debounce(this._handleClickOutside, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     this._playerResizeWatcher = new ResizeWatcher();
     this._playerResizeWatcher.init(document.getElementById(this.props.targetId)!);
     eventManager.listen(this._playerResizeWatcher, EventType.RESIZE, debounce(this._onWindowResize, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     eventManager.listen(player, player.Event.FIRST_PLAY, () => this._onWindowResize());
     this._onWindowResize();
   }
 
+  /**
+   * handler to click outside the component event listener.
+   * if not mobile device and clicked outside the component, update nav state
+   *
+   * @param {*} e click event
+   * @returns {void}
+   * @memberof Menu
+   */
+  _handleClickOutside = ({target}: MouseEvent) => {
+    const {isMobile, isSmallSize, updatePlayerNavState} = this.props;
+    if (!isMobile && !isSmallSize && !this._playerRef?.contains(target as Node) && this.state.nav) {
+      this.setState({nav: false});
+      updatePlayerNavState(false);
+    }
+  };
+
   /**
    * window resize handler
    *
@@ -419,8 +436,7 @@ class Shell extends Component<any, any> {
         onMouseUp={this.onMouseUp}
         onMouseMove={this.onMouseMove}
         onMouseLeave={this.onMouseLeave}
-        onKeyDown={this.onKeyDown}
-      >
+        onKeyDown={this.onKeyDown}>
         {props.children}
       </div>
     );