fix(FEC-8286): make unmute button focusable (#256)

* adding tabindex=0 to the unmute indication

adding tabindex=0 to the unmute indication so it will be focusable using the keyboard.

* add unmute indication focus with tab

* moving the class to the shell

* fix flow

* fix jsdoc

src/components/unmute-indication/unmute-indication.js

@@ -4,6 +4,7 @@ import {h} from 'preact';
 import {connect} from 'preact-redux';
 import BaseComponent from '../base';
 import {default as Icon, IconType} from '../icon';
+import {KeyMap} from "../../utils/key-map";
 
 /**
  * The icon only default timeout
@@ -91,6 +92,18 @@ class UnmuteIndication extends BaseComponent {
     }, MUTED_AUTOPLAY_ICON_ONLY_DEFAULT_TIMEOUT);
   }
 
+  /**
+   * @param {KeyboardEvent} e - the keyDown Event
+   * @private
+   * @memberof UnmuteIndication
+   * @returns {void}
+   */
+  _keyDownHandler(e: KeyboardEvent): void {
+    if (e.keyCode === KeyMap.ENTER) {
+      this.player.muted = !this.player.muted;
+    }
+  }
+
   /**
    * render component
    *
@@ -106,11 +119,12 @@ class UnmuteIndication extends BaseComponent {
     if (this.state.iconOnly) styleClass.push(style.showIconOnly);
 
     return (
-      <div
-        className={styleClass.join(' ')}
-        onMouseOver={() => this.setState({iconOnly: false})}
-        onMouseOut={() => this.setState({iconOnly: true})}
-        onClick={() => this.player.muted = !this.player.muted}>
+      <div tabIndex="0" aria-label="Unmute"
+           className={styleClass.join(' ')}
+           onMouseOver={() => this.setState({iconOnly: false})}
+           onMouseOut={() => this.setState({iconOnly: true})}
+           onClick={() => this.player.muted = !this.player.muted}
+           onKeyDown={(e) => this._keyDownHandler(e)}>
         <a className={[style.btn, style.btnDarkTransparent, style.unmuteButton].join(' ')}>
           <div className={style.unmuteIconContainer}>
             <Icon type={IconType.VolumeBase}/>

src/styles/_shell.scss

@@ -72,9 +72,10 @@
   .form-group-row > a,
   .button-save-cvaa,
   .slider,
+  .unmute-button-container,
   .live-tag {
     &:focus {
-      outline: 1px solid #00cbff;
+      outline: 1px solid $tab-focus-color;
     }
   }
 }

src/styles/_variables.scss

@@ -1,4 +1,5 @@
 $brand-color: #01ACCD;
+$tab-focus-color: #00cbff;
 $white: #FFFFFF;
 $grayscale1: #333;
 $grayscale2: #424242;