Focus the submit button (#3253)

Focus the submit button when confirmation modal is opened.

Also, changed cancellation link to button.
This makes the meaning clearer.

diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js
index cc6482cdecad6d46fe34038dd7fcea009caa910e..aeb6b7c03666170b53c9a566f3cd6b5b16ec5335 100644 (file)
--- a/app/javascript/mastodon/components/button.js
+++ b/app/javascript/mastodon/components/button.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 class Button extends React.PureComponent {
 
@@ -10,6 +11,7 @@ class Button extends React.PureComponent {
     block: PropTypes.bool,
     secondary: PropTypes.bool,
     size: PropTypes.number,
+    className: PropTypes.string,
     style: PropTypes.object,
     children: PropTypes.node,
   };
@@ -24,6 +26,14 @@ class Button extends React.PureComponent {
     }
   }
 
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  focus() {
+    this.node.focus();
+  }
+
   render () {
     const style = {
       padding: `0 ${this.props.size / 2.25}px`,
@@ -32,11 +42,17 @@ class Button extends React.PureComponent {
       ...this.props.style,
     };
 
+    const className = classNames('button', this.props.className, {
+      'button-secondary': this.props.secondary,
+      'button--block': this.props.block,
+    });
+
     return (
       <button
-        className={`button ${this.props.secondary ? 'button-secondary' : ''} ${this.props.block ? 'button--block' : ''}`}
+        className={className}
         disabled={this.props.disabled}
         onClick={this.handleClick}
+        ref={this.setRef}
         style={style}
       >
         {this.props.text || this.props.children}

diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modal.js b/app/javascript/mastodon/features/ui/components/confirmation_modal.js
index d0c0927377196bbc02c179ed0469c0cc09457554..f33bfd4453c0c33806215a199016d170ad7ee7a4 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/confirmation_modal.js
+++ b/app/javascript/mastodon/features/ui/components/confirmation_modal.js
@@ -13,18 +13,25 @@ class ConfirmationModal extends React.PureComponent {
     intl: PropTypes.object.isRequired,
   };
 
+  componentDidMount() {
+    this.button.focus();
+  }
+
   handleClick = () => {
     this.props.onClose();
     this.props.onConfirm();
   }
 
-  handleCancel = (e) => {
-    e.preventDefault();
+  handleCancel = () => {
     this.props.onClose();
   }
 
+  setRef = (c) => {
+    this.button = c;
+  }
+
   render () {
-    const { intl, message, confirm, onConfirm, onClose } = this.props;
+    const { message, confirm } = this.props;
 
     return (
       <div className='modal-root__modal confirmation-modal'>
@@ -33,8 +40,10 @@ class ConfirmationModal extends React.PureComponent {
         </div>
 
         <div className='confirmation-modal__action-bar'>
-          <div><a href='#' onClick={this.handleCancel}><FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' /></a></div>
-          <Button text={confirm} onClick={this.handleClick} />
+          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
+            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+          </Button>
+          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
         </div>
       </div>
     );

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 863f7958ccc4c182c2722b113fddbf07a94473e6..992db014e41bd22a6296905e3d090b13b2f8ec34 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3145,6 +3145,7 @@ button.icon-button.active i.fa-retweet {
 .boost-modal__action-bar,
 .confirmation-modal__action-bar {
   display: flex;
+  justify-content: space-between;
   background: $ui-secondary-color;
   padding: 10px;
   line-height: 36px;
@@ -3179,14 +3180,9 @@ button.icon-button.active i.fa-retweet {
 }
 
 .confirmation-modal__action-bar {
-  & > div {
-    text-align: left;
-    padding: 0 16px;
-  }
-
-  a {
+  .confirmation-modal__cancel-button {
+    background-color: transparent;
     color: darken($ui-secondary-color, 34%);
-    text-decoration: none;
     font-size: 14px;
     font-weight: 500;
 

diff --git a/package.json b/package.json
index 94711eb191af5fa32c62c74db63c54c14fb5d4f6..6159de506f5e11eb4f8866a64eb631bf9a2163a8 100644 (file)
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.11.1",
+    "classnames": "^2.2.5",
     "coffee-loader": "^0.7.3",
     "coffee-script": "^1.12.5",
     "compression-webpack-plugin": "^0.4.0",

diff --git a/yarn.lock b/yarn.lock
index 549c7178a8116bd137f7ec9beaa437e75cf4e4b6..3c19450b631d94163e6e93ac88c1a0e42dbfba1e 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -1542,7 +1542,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.1.2, classnames@^2.2.3, classnames@~2.2:
+classnames@^2.1.2, classnames@^2.2.3, classnames@^2.2.5, classnames@~2.2:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"