enable selection of sprite visibility via keyboard control

src/components/sprite-info/sprite-info.jsx

@@ -116,6 +116,9 @@ class SpriteInfo extends React.Component {
                                 )}
                                 tabIndex="4"
                                 onClick={this.props.onClickVisible}
+                                onKeyPress={this.props.onPressVisible}
+                                aria-label="Show sprite"
+                                role="button"
                             >
                                 <img
                                     className={styles.icon}
@@ -132,8 +135,11 @@ class SpriteInfo extends React.Component {
                                         [styles.isDisabled]: this.props.disabled
                                     }
                                 )}
-                                tabIndex="4"
+                                tabIndex="5"
                                 onClick={this.props.onClickNotVisible}
+                                onKeyPress={this.props.onPressNotVisible}
+                                aria-label="Hide sprite"
+                                role="button"
                             >
                                 <img
                                     className={styles.icon}
@@ -151,7 +157,7 @@ class SpriteInfo extends React.Component {
                                 small
                                 disabled={this.props.disabled}
                                 label="Direction"
-                                tabIndex="5"
+                                tabIndex="6"
                                 type="text"
                                 value={this.props.disabled ? '' : this.props.direction}
                                 onSubmit={this.props.onChangeDirection}
@@ -200,6 +206,8 @@ SpriteInfo.propTypes = {
     onChangeY: PropTypes.func,
     onClickNotVisible: PropTypes.func,
     onClickVisible: PropTypes.func,
+    onPressNotVisible: PropTypes.func,
+    onPressVisible: PropTypes.func,
     rotationStyle: PropTypes.oneOf(ROTATION_STYLES),
     visible: PropTypes.bool,
     x: PropTypes.oneOfType([

src/containers/sprite-info.jsx

@@ -10,7 +10,9 @@ class SpriteInfo extends React.Component {
         bindAll(this, [
             'handleChangeRotationStyle',
             'handleClickVisible',
-            'handleClickNotVisible'
+            'handleClickNotVisible',
+            'handlePressVisible',
+            'handlePressNotVisible'
         ]);
     }
     handleChangeRotationStyle (e) {
@@ -24,6 +26,18 @@ class SpriteInfo extends React.Component {
         e.preventDefault();
         this.props.onChangeVisibility(false);
     }
+    handlePressVisible (e) {
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            this.props.onChangeVisibility(true);
+        }
+    }
+    handlePressNotVisible (e) {
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            this.props.onChangeVisibility(false);
+        }
+    }
     render () {
         return (
             <SpriteInfoComponent
@@ -31,6 +45,8 @@ class SpriteInfo extends React.Component {
                 onChangeRotationStyle={this.handleChangeRotationStyle}
                 onClickNotVisible={this.handleClickNotVisible}
                 onClickVisible={this.handleClickVisible}
+                onPressNotVisible={this.handlePressNotVisible}
+                onPressVisible={this.handlePressVisible}
             />
         );
     }