Merge pull request #847 from quachtina96/sprite-info-keyboard

Enable selection of sprite visibility by keyboard.

src/components/sprite-info/sprite-info.css

@@ -62,6 +62,11 @@
     border-bottom-left-radius: $form-radius;
 }
 
+.radio-left:focus {
+    border-color: #4c97ff;
+    box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+}
+
 .radio-right {
     border-bottom: 1px solid $form-border;
     border-top: 1px solid $form-border;
@@ -70,6 +75,11 @@
     border-bottom-right-radius: $form-radius;
 }
 
+.radio-right:focus {
+    border-color: #4c97ff;
+    box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+}
+
 .icon {
     width: 100%;
     height: 100%;

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

@@ -118,6 +118,7 @@ class SpriteInfo extends React.Component {
                                 )}
                                 tabIndex="4"
                                 onClick={this.props.onClickVisible}
+                                onKeyPress={this.props.onPressVisible}
                             >
                                 <img
                                     className={styles.icon}
@@ -134,8 +135,9 @@ class SpriteInfo extends React.Component {
                                         [styles.isDisabled]: this.props.disabled
                                     }
                                 )}
-                                tabIndex="4"
+                                tabIndex="5"
                                 onClick={this.props.onClickNotVisible}
+                                onKeyPress={this.props.onPressNotVisible}
                             >
                                 <img
                                     className={styles.icon}
@@ -153,7 +155,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}
@@ -202,6 +204,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}
             />
         );
     }