about summary refs log tree commit diff
path: root/app/javascript/mastodon/components/icon_button.js
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2019-08-06 11:59:58 +0200
committerEugen Rochko <eugen@zeonfederated.com>2019-08-06 11:59:58 +0200
commit27a0d02d0d960163e98595b05412c0d03a4875d0 (patch)
treeb2a80e80eec0448ef0d03c06c1aff6c540cd9df5 /app/javascript/mastodon/components/icon_button.js
parenta12f1a0baf3d31ecc9779c25b4bf4a0c9bd95543 (diff)
Improve keyboard navigation in privacy dropdown (#11492)
* Trap tab in privacy dropdown

* Give focus back to last focused element when privacy dropdown menu closes

* Actually give back focus to the element that had it before clicking the dropdown
Diffstat (limited to 'app/javascript/mastodon/components/icon_button.js')
-rw-r--r--app/javascript/mastodon/components/icon_button.js18
1 files changed, 18 insertions, 0 deletions
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 9d8a8d06b..a727359e9 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -12,6 +12,8 @@ export default class IconButton extends React.PureComponent {
     title: PropTypes.string.isRequired,
     icon: PropTypes.string.isRequired,
     onClick: PropTypes.func,
+    onMouseDown: PropTypes.func,
+    onKeyDown: PropTypes.func,
     size: PropTypes.number,
     active: PropTypes.bool,
     pressed: PropTypes.bool,
@@ -42,6 +44,18 @@ export default class IconButton extends React.PureComponent {
     }
   }
 
+  handleMouseDown = (e) => {
+    if (!this.props.disabled && this.props.onMouseDown) {
+      this.props.onMouseDown(e);
+    }
+  }
+
+  handleKeyDown = (e) => {
+    if (!this.props.disabled && this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  }
+
   render () {
     const style = {
       fontSize: `${this.props.size}px`,
@@ -84,6 +98,8 @@ export default class IconButton extends React.PureComponent {
           title={title}
           className={classes}
           onClick={this.handleClick}
+          onMouseDown={this.handleMouseDown}
+          onKeyDown={this.handleKeyDown}
           style={style}
           tabIndex={tabIndex}
           disabled={disabled}
@@ -103,6 +119,8 @@ export default class IconButton extends React.PureComponent {
             title={title}
             className={classes}
             onClick={this.handleClick}
+            onMouseDown={this.handleMouseDown}
+            onKeyDown={this.handleKeyDown}
             style={style}
             tabIndex={tabIndex}
             disabled={disabled}