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] 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}
/>
);
}
--
GitLab