diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index f9bbb64e32748af1f955db724d8dc113caea8648..2cddd2b2c25d9989021d19e739b837023b9ce029 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 532fb37e5fdb8c9af94602ef825257b7bb1d64a9..baea1f8186cfd659f1ac0d25353f5a30f15f5153 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} /> ); }