diff options
author | ThibG <thib@sitedethib.com> | 2019-08-07 13:58:53 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2019-08-07 13:58:53 +0200 |
commit | 396b8cdd0f071fab85b09855f882b19c07cccd44 (patch) | |
tree | a6d7f528512b7b03e8174f76d3d7a977e78f4283 /app/javascript/mastodon/components/icon_button.js | |
parent | ac33f1aedd9a6c72c6c176afb1f5d62a1ce5d44d (diff) |
Improve focus handling with dropdown menus (#11511)
- Focus first item when activated via keyboard - When the dropdown menu closes, give back the focus to the actual element which was focused prior to opening the menu
Diffstat (limited to 'app/javascript/mastodon/components/icon_button.js')
-rw-r--r-- | app/javascript/mastodon/components/icon_button.js | 9 |
1 files changed, 9 insertions, 0 deletions
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index a727359e9..401675052 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -14,6 +14,7 @@ export default class IconButton extends React.PureComponent { onClick: PropTypes.func, onMouseDown: PropTypes.func, onKeyDown: PropTypes.func, + onKeyPress: PropTypes.func, size: PropTypes.number, active: PropTypes.bool, pressed: PropTypes.bool, @@ -44,6 +45,12 @@ export default class IconButton extends React.PureComponent { } } + handleKeyPress = (e) => { + if (this.props.onKeyPress && !this.props.disabled) { + this.props.onKeyPress(e); + } + } + handleMouseDown = (e) => { if (!this.props.disabled && this.props.onMouseDown) { this.props.onMouseDown(e); @@ -100,6 +107,7 @@ export default class IconButton extends React.PureComponent { onClick={this.handleClick} onMouseDown={this.handleMouseDown} onKeyDown={this.handleKeyDown} + onKeyPress={this.handleKeyPress} style={style} tabIndex={tabIndex} disabled={disabled} @@ -121,6 +129,7 @@ export default class IconButton extends React.PureComponent { onClick={this.handleClick} onMouseDown={this.handleMouseDown} onKeyDown={this.handleKeyDown} + onKeyPress={this.handleKeyPress} style={style} tabIndex={tabIndex} disabled={disabled} |