fix(FEC-14177): a11y fixes (#956)

### Description of the Changes

**bugfix**

**Issue:**
when `AAD` and `PiP` buttons are in the top bar- hitting space or enter
keyboard does nothing.

**Fix:**
- add `onKeyDown` event listener to `AAD` and `PiP` components
- include `space` keyboard for `VR` component

#### Resolves FEC-14177, FEC-14204

src/components/advanced-audio-desc/advanced-audio-desc.tsx

@@ -7,7 +7,7 @@ import {Tooltip} from '../tooltip';
 import {Button} from '../button';
 import {connect} from 'react-redux';
 import {ButtonControl} from '../button-control';
-import {bindActions} from '../../utils';
+import {bindActions, KeyCode} from '../../utils';
 import {actions} from '../../reducers/settings';
 import {IconComponent, registerToBottomBar} from '../bottom-bar';
 import {redux} from '../../index';
@@ -88,6 +88,19 @@ class AdvancedAudioDesc extends Component<any, any> implements IconComponent {
     this.props.notifyClick({type: 'AdvancedAudioDescription', checked});
   };
 
+  /**
+   * on key down handler
+   *
+   * @param {KeyboardEvent} e - keyboard event
+   * @returns {void}
+   * @memberof AdvancedAudioDesc
+   */
+  onKeyDown = (e: KeyboardEvent): void => {
+    if ([KeyCode.Enter, KeyCode.Space].includes(e.code)) {
+      this.onClick();
+    }
+  };
+
   /**
    * render component
    *
@@ -99,7 +112,7 @@ class AdvancedAudioDesc extends Component<any, any> implements IconComponent {
     return !this._shouldRender() ? undefined : (
       <ButtonControl name={COMPONENT_NAME} className={[style.noIdleControl, this.props.classNames ? this.props.classNames.join(' ') : ''].join(' ')}>
         <Tooltip label={this.getComponentText()}>
-          <Button tabIndex="0" aria-label={this.getComponentText()} className={`${style.controlButton}`} ref={innerRef} onClick={this.onClick}>
+          <Button tabIndex="0" aria-label={this.getComponentText()} className={`${style.controlButton}`} ref={innerRef} onClick={this.onClick} onKeyDown={this.onKeyDown}>
             <Icon type={this.props.advancedAudioDescEnabled ? IconType.AdvancedAudioDescriptionActive : IconType.AdvancedAudioDescription} />
           </Button>
         </Tooltip>

src/components/picture-in-picture/picture-in-picture.tsx

@@ -5,7 +5,7 @@ import {default as Icon, IconType} from '../icon';
 import {connect} from 'react-redux';
 import {withPlayer} from '../player';
 import {withLogger} from '../logger';
-import {KeyMap} from '../../utils';
+import {KeyCode, KeyMap} from '../../utils';
 import {withKeyboardEvent} from '../keyboard';
 import {withEventDispatcher} from '../event-dispatcher';
 import {Tooltip} from '../../components/tooltip';
@@ -100,6 +100,20 @@ class PictureInPicture extends Component<any, any> implements IconComponent {
     this.props.registerKeyboardEvents(this._keyboardEventHandlers);
   }
 
+  /**
+   * on key down handler
+   *
+   * @param {KeyboardEvent} e - keyboard event
+   * @returns {void}
+   * @memberof PictureInPicture
+   */
+  onKeyDown = (e: KeyboardEvent): void => {
+    if ([KeyCode.Enter, KeyCode.Space].includes(e.code)) {
+      this.togglePip();
+      this.props.updatePlayerHoverState(true);
+    }
+  };
+
   /**
    * should render component
    * @returns {boolean} - whether to render the component
@@ -145,6 +159,7 @@ class PictureInPicture extends Component<any, any> implements IconComponent {
               aria-label={this.props.isInPictureInPicture ? this.props.pictureInPictureExitText : this.props.pictureInPictureText}
               className={this.props.isInPictureInPicture ? [style.controlButton, style.isInPictureInPicture].join(' ') : style.controlButton}
               onClick={this.togglePip}
+              onKeyDown={this.onKeyDown}
             >
               <Icon type={IconType.PictureInPictureStart} />
               <Icon type={IconType.PictureInPictureStop} />

src/components/vr-stereo/vr-stereo.tsx

@@ -2,7 +2,7 @@ import style from '../../styles/style.scss';
 import {h, Component, VNode} from 'preact';
 import {withText} from 'preact-i18n';
 import {default as Icon, IconType} from '../icon';
-import {KeyMap} from '../../utils';
+import {KeyCode} from '../../utils';
 import {actions as engineActions} from '../../reducers/engine';
 import {bindActions} from '../../utils';
 import {connect} from 'react-redux';
@@ -100,10 +100,10 @@ class VrStereo extends Component<any, any> implements IconComponent {
    *
    * @param {KeyboardEvent} e - keyboard event
    * @returns {void}
-   * @memberof DropDown
+   * @memberof VrStereo
    */
   onKeyDown = (e: KeyboardEvent): void => {
-    if (e.keyCode === KeyMap.ENTER) {
+    if ([KeyCode.Enter, KeyCode.Space].includes(e.code)) {
       this.onClick();
     }
   };