From 3f75f83b1ffd3059bca9e27b09635051de351add Mon Sep 17 00:00:00 2001
From: Tina Quach <quacht@mit.edu>
Date: Tue, 31 Oct 2017 15:56:39 -0400
Subject: [PATCH 1/4] enable selection of sprite visibility via keyboard
 control

---
 src/components/sprite-info/sprite-info.jsx | 12 ++++++++++--
 src/containers/sprite-info.jsx             | 18 +++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index f9bbb64e3..2cddd2b2c 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/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([
diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx
index 532fb37e5..baea1f818 100644
--- a/src/containers/sprite-info.jsx
+++ b/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}
             />
         );
     }

From ef2cb656c575ba922b75b849823de3c5f837db95 Mon Sep 17 00:00:00 2001
From: Tina Quach <quacht@mit.edu>
Date: Tue, 31 Oct 2017 16:21:50 -0400
Subject: [PATCH 2/4] show focus on sprite visibility buttons

---
 src/components/sprite-info/sprite-info.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 200aedaf7..f018abe8e 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/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%;

From d14311e758b9e777af1566614e3221dcdad921dd Mon Sep 17 00:00:00 2001
From: Tina Quach <quacht@mit.edu>
Date: Thu, 2 Nov 2017 16:27:27 -0400
Subject: [PATCH 3/4] remove aria label and button role to narrow scope of PR

---
 src/components/sprite-info/sprite-info.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index 2cddd2b2c..6db049a7a 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -117,8 +117,6 @@ 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}
@@ -138,8 +136,6 @@ class SpriteInfo extends React.Component {
                                 tabIndex="5"
                                 onClick={this.props.onClickNotVisible}
                                 onKeyPress={this.props.onPressNotVisible}
-                                aria-label="Hide sprite"
-                                role="button"
                             >
                                 <img
                                     className={styles.icon}

From d113541ccdd4a784eab211250c0b88c29eff7c9a Mon Sep 17 00:00:00 2001
From: Tina Quach <quacht@mit.edu>
Date: Thu, 2 Nov 2017 17:03:14 -0400
Subject: [PATCH 4/4] nit single quotes

---
 src/containers/sprite-info.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx
index baea1f818..f4b5ca696 100644
--- a/src/containers/sprite-info.jsx
+++ b/src/containers/sprite-info.jsx
@@ -27,13 +27,13 @@ class SpriteInfo extends React.Component {
         this.props.onChangeVisibility(false);
     }
     handlePressVisible (e) {
-        if (e.key === " " || e.key === "Enter") {
+        if (e.key === ' ' || e.key === 'Enter') {
             e.preventDefault();
             this.props.onChangeVisibility(true);
         }
     }
     handlePressNotVisible (e) {
-        if (e.key === " " || e.key === "Enter") {
+        if (e.key === ' ' || e.key === 'Enter') {
             e.preventDefault();
             this.props.onChangeVisibility(false);
         }