make presentation upload checkbox accessible to keyboard

bigbluebutton-html5/imports/ui/components/checkbox/component.jsx

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { findDOMNode } from 'react-dom';
+import KEY_CODES from '/imports/utils/keyCodes';
 import Icon from '../icon/component';
 import { styles } from './styles';
 
@@ -31,6 +33,24 @@ export default class Checkbox extends PureComponent {
 
     this.onChange = props.onChange;
     this.handleChange = this.handleChange.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount () {
+    const checkbox = findDOMNode(this.checkbox);
+    checkbox.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    checkbox.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(event) {
+    const { which } = event;
+    const input = findDOMNode(this.input);
+    if ([KEY_CODES.ENTER].includes(which)) {
+      input.click();
+    }
   }
 
   handleChange() {
@@ -38,7 +58,7 @@ export default class Checkbox extends PureComponent {
     if (disabled) return;
     this.onChange(keyValue);
   }
-
+l
   render() {
     const {
       ariaLabel, ariaLabelledBy, ariaDesc, ariaDescribedBy,
@@ -49,6 +69,8 @@ export default class Checkbox extends PureComponent {
       <div className={cx({
         [styles.disabled]: !!disabled,
       }, className)}
+        tabIndex={0}
+        ref={node => { this.checkbox = node; }}
       >
         <input
           type="checkbox"
@@ -58,6 +80,7 @@ export default class Checkbox extends PureComponent {
           aria-labelledby={ariaLabelledBy}
           aria-describedby={ariaDescribedBy}
           disabled={disabled}
+          ref={node => { this.input = node; }}
         />
         <div role="presentation" onClick={this.handleChange}>
           { checked