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.

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}

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) => {
+  handleCancel = () => {
-    e.preventDefault();
     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 onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
-          <Button text={confirm} onClick={this.handleClick} />
+            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+          </Button>
+          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
         </div>
       </div>
     );

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 {
+  .confirmation-modal__cancel-button {
-    text-align: left;
+    background-color: transparent;
-    padding: 0 16px;
-  }
-
-  a {
     color: darken($ui-secondary-color, 34%);
-    text-decoration: none;
     font-size: 14px;
     font-weight: 500;
 

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",

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"