Enhance options overlay keyboard navigation and design parity

src/components/Shortcut.js

@@ -189,7 +189,7 @@ export default class Shortcut extends Component {
 
   componentDidMount() {
     this.mergeShortcuts();
-    document.addEventListener('keydown', this.handleKeyPress);
+    window.addEventListener('keydown', this.handleKeyPress);
     document.addEventListener('click', this.handleClick);
     document.addEventListener('dblclick', this.handleDoubleClick);
   }
@@ -201,7 +201,7 @@ export default class Shortcut extends Component {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyPress);
+    window.removeEventListener('keydown', this.handleKeyPress);
     document.removeEventListener('click', this.handleClick);
     document.removeEventListener('dblclick', this.handleDoubleClick);
   }
@@ -215,9 +215,10 @@ export default class Shortcut extends Component {
       alt = false
     }) => `${keyCode}:${ctrl}:${shift}:${alt}`;
     const defaultShortcuts = this.defaultShortcuts.reduce(
-      (shortcuts, shortcut) => Object.assign(shortcuts, {
-        [getShortcutKey(shortcut)]: shortcut
-      }),
+      (shortcuts, shortcut) =>
+        Object.assign(shortcuts, {
+          [getShortcutKey(shortcut)]: shortcut
+        }),
       {}
     );
     const mergedShortcuts = (this.props.shortcuts || []).reduce(
@@ -233,10 +234,10 @@ export default class Shortcut extends Component {
       defaultShortcuts
     );
 
-    const gradeShortcut = (s) => {
+    const gradeShortcut = s => {
       let score = 0;
       const ps = ['ctrl', 'shift', 'alt'];
-      ps.forEach((key) => {
+      ps.forEach(key => {
         if (s[key]) {
           score++;
         }
@@ -273,11 +274,11 @@ export default class Shortcut extends Component {
       return;
     }
     if (
-      document.activeElement
-      && (hasClass(document.activeElement, 'video-react-control')
-        || hasClass(document.activeElement, 'video-react-menu-button-active')
+      document.activeElement &&
+      (hasClass(document.activeElement, 'video-react-control') ||
+        hasClass(document.activeElement, 'video-react-menu-button-active') ||
         // || hasClass(document.activeElement, 'video-react-slider')
-        || hasClass(document.activeElement, 'video-react-big-play-button'))
+        hasClass(document.activeElement, 'video-react-big-play-button'))
     ) {
       return;
     }
@@ -287,14 +288,14 @@ export default class Shortcut extends Component {
     const shift = e.shiftKey;
     const alt = e.altKey;
 
-    const shortcut = this.shortcuts.filter((s) => {
+    const shortcut = this.shortcuts.filter(s => {
       if (!s.keyCode || s.keyCode - keyCode !== 0) {
         return false;
       }
       if (
-        (s.ctrl !== undefined && s.ctrl !== ctrl)
-        || (s.shift !== undefined && s.shift !== shift)
-        || (s.alt !== undefined && s.alt !== alt)
+        (s.ctrl !== undefined && s.ctrl !== ctrl) ||
+        (s.shift !== undefined && s.shift !== shift) ||
+        (s.alt !== undefined && s.alt !== alt)
       ) {
         return false;
       }
@@ -310,9 +311,9 @@ export default class Shortcut extends Component {
   // only if player is active and player is ready
   canBeClicked(player, e) {
     if (
-      !player.isActive
-      || e.target.nodeName !== 'VIDEO'
-      || player.readyState !== 4
+      !player.isActive ||
+      e.target.nodeName !== 'VIDEO' ||
+      player.readyState !== 4
     ) {
       return false;
     }

src/components/control-bar/ControlBar.js

@@ -74,7 +74,7 @@ export default class ControlBar extends Component {
     const defaultChildren = this.props.disableDefaultControls
       ? []
       : this.getDefaultChildren();
-    const { className, ...parentProps } = this.props; // remove className
+    const parentProps = { player: this.props.player };
     return mergeAndSortChildren(defaultChildren, children, parentProps);
   }
 

src/components/menu/MenuItem.js

@@ -14,21 +14,37 @@ export default class MenuItem extends Component {
     super(props, context);
 
     this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
-  handleClick() {
+  select() {
     const { index, onSelectItem } = this.props;
     onSelectItem(index);
   }
 
+  handleClick() {
+    this.select();
+  }
+
+  handleKeyDown(event) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.select();
+    }
+  }
+
   render() {
     const { label, index, activateIndex } = this.props;
     return (
       <div
-        className={classNames('video-react-menu-item')}
+        className={classNames({
+          'video-react-menu-item': true,
+          'video-react-menu-item-selected': index === activateIndex
+        })}
         role="menuitem"
         onClick={this.handleClick}
         tabIndex="0"
+        onKeyDown={this.handleKeyDown}
       >
         <div
           className={classNames({

src/components/menu/OptionsOverlay.js

@@ -29,6 +29,9 @@ class OptionsOverlay extends Component {
     );
     this.updateState = this.updateState.bind(this);
     this.handleSelectItem = this.handleSelectItem.bind(this);
+    this.handleRefChange = this.handleRefChange.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
 
     this.state = this.getTextTrackItems();
   }
@@ -80,6 +83,47 @@ class OptionsOverlay extends Component {
     return textTrackItems;
   }
 
+  close() {
+    if (this.props.player.isOptionsOverlayOpen) {
+      this.props.actions.handleOptionsOverlayChange();
+    }
+  }
+
+  listenClose(optionsOverlayElem) {
+    // Close the panel upon focus or click elsewhere on the DOM.
+    const handleActivityElsewhere = event => {
+      if (optionsOverlayElem.contains(event.target)) return;
+      this.close();
+    };
+    document.addEventListener('focusin', handleActivityElsewhere);
+    document.addEventListener('click', handleActivityElsewhere);
+    const stopListening = () => {
+      document.removeEventListener('focusin', handleActivityElsewhere);
+      document.removeEventListener('click', handleActivityElsewhere);
+    };
+    return stopListening;
+  }
+
+  handleKeyUp(event) {
+    if (event.key === 'Escape') {
+      this.close();
+    }
+  }
+
+  handleKeyDown(event) {
+    event.stopPropagation();
+  }
+
+  handleRefChange(optionsOverlayElem) {
+    if (this.stopListeningForClose) {
+      this.stopListeningForClose();
+    }
+    if (optionsOverlayElem) {
+      optionsOverlayElem.focus();
+      this.stopListeningForClose = this.listenClose(optionsOverlayElem);
+    }
+  }
+
   updateState() {
     const textTrackItems = this.getTextTrackItems();
     if (
@@ -139,52 +183,57 @@ class OptionsOverlay extends Component {
     if (!player.isOptionsOverlayOpen) return null;
 
     return (
-      <div className={classNames(className)}>
+      <div
+        className={classNames('video-react-options-overlay', className)}
+        ref={this.handleRefChange}
+        onKeyUp={this.handleKeyUp}
+        onKeyDown={this.handleKeyDown}
+        tabIndex="-1"
+      >
         <button
+          type="button"
           className={classNames('video-react-options-close')}
           onClick={() => actions.handleOptionsOverlayChange()}
           aria-label="Close Options Menu"
         >
-          &times;
+          <span>✕</span>
         </button>
-        <div className={classNames('video-react-options-overlay')}>
-          <div className={classNames('video-react-options-menu-section')}>
-            <h3 className={classNames('video-react-menu-section-header')}>
-              Closed Captions
-            </h3>
-            {items && (
-              <Menu>
-                {items.map((item, i) => (
-                  <MenuItem
-                    label={item.label}
-                    index={i}
-                    onSelectItem={this.handleSelectItem}
-                    activateIndex={selectedIndex}
-                    key={item.label}
-                  />
-                ))}
-              </Menu>
-            )}
-          </div>
-
-          <div className={classNames('video-react-options-menu-section')}>
-            <h3 className={classNames('video-react-menu-section-header')}>
-              Audio Description
-            </h3>
-            {player.audioDescriptions && (
-              <Menu>
-                {player.audioDescriptions.map((description, i) => (
-                  <MenuItem
-                    label={description.label}
-                    index={i}
-                    onSelectItem={this.handleSelectAudioDescription}
-                    activateIndex={player.activeAudioDescription}
-                    key={description.label}
-                  />
-                ))}
-              </Menu>
-            )}
-          </div>
+        <div className={classNames('video-react-options-menu-section')}>
+          <h3 className={classNames('video-react-menu-section-header')}>
+            Closed Captions
+          </h3>
+          {items && (
+            <Menu>
+              {items.map((item, i) => (
+                <MenuItem
+                  label={item.label}
+                  index={i}
+                  onSelectItem={this.handleSelectItem}
+                  activateIndex={selectedIndex}
+                  key={item.label}
+                />
+              ))}
+            </Menu>
+          )}
+        </div>
+
+        <div className={classNames('video-react-options-menu-section')}>
+          <h3 className={classNames('video-react-menu-section-header')}>
+            Audio Description
+          </h3>
+          {player.audioDescriptions && (
+            <Menu>
+              {player.audioDescriptions.map((description, i) => (
+                <MenuItem
+                  label={description.label}
+                  index={i}
+                  onSelectItem={this.handleSelectAudioDescription}
+                  activateIndex={player.activeAudioDescription}
+                  key={description.label}
+                />
+              ))}
+            </Menu>
+          )}
         </div>
       </div>
     );

src/utils/index.js

@@ -100,6 +100,7 @@ export function mergeAndSortChildren(
 
       const defaultProps = defaultComponent ? defaultComponent.props : {};
       const props = {
+        ref: defaultComponent ? defaultComponent.ref : undefined,
         ...parentProps, // inherit from parent component
         ...defaultProps, // inherit from default component
         ...element.props // element's own props