Change anchor to button element (#3321)

Fix warning for ESLint (jsx-a11y/href-no-hash).

app/javascript/mastodon/components/button.js

@@ -22,7 +22,7 @@ class Button extends React.PureComponent {
 
   handleClick = (e) => {
     if (!this.props.disabled) {
-      this.props.onClick();
+      this.props.onClick(e);
     }
   }
 

app/javascript/mastodon/components/load_more.js

@@ -3,9 +3,9 @@ import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
 const LoadMore = ({ onClick }) => (
-  <a href="#" className='load-more' role='button' onClick={onClick}>
+  <button className='load-more' onClick={onClick}>
     <FormattedMessage id='status.load_more' defaultMessage='Load more' />
-  </a>
+  </button>
 );
 
 LoadMore.propTypes = {

app/javascript/mastodon/features/ui/components/onboarding_modal.js

@@ -191,15 +191,14 @@ class OnboardingModal extends React.PureComponent {
     this.setState({ currentIndex: i });
   }
 
-  handleNext = (e) => {
-    const maxNum = Number(e.currentTarget.getAttribute('data-length'));
-    e.preventDefault();
+  handleNext = () => {
+    this.setState(({ currentIndex }) => ({
+      currentIndex: currentIndex + 1,
+    }));
+  }
 
-    if (this.state.currentIndex < maxNum - 1) {
-      this.setState({ currentIndex: this.state.currentIndex + 1 });
-    } else {
-      this.props.onClose();
-    }
+  handleClose = () => {
+    this.props.onClose();
   }
 
   render () {
@@ -216,13 +215,21 @@ class OnboardingModal extends React.PureComponent {
     const { currentIndex } = this.state;
     const hasMore = currentIndex < pages.length - 1;
 
-    let nextOrDoneBtn;
-
-    if(hasMore) {
-      nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next'><FormattedMessage id='onboarding.next' defaultMessage='Next' /></a>;
-    } else {
-      nextOrDoneBtn = <a href='#' data-length={pages.length} onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__done'><FormattedMessage id='onboarding.done' defaultMessage='Done' /></a>;
-    }
+    const nextOrDoneBtn = hasMore ? (
+      <button
+        onClick={this.handleNext}
+        className='onboarding-modal__nav onboarding-modal__next'
+      >
+        <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+      </button>
+    ) : (
+      <button
+        onClick={this.handleClose}
+        className='onboarding-modal__nav onboarding-modal__done'
+      >
+        <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+      </button>
+    );
 
     const styles = pages.map((page, i) => ({
       key: `page-${i}`,
@@ -243,7 +250,12 @@ class OnboardingModal extends React.PureComponent {
 
         <div className='onboarding-modal__paginator'>
           <div>
-            <a href='#' className='onboarding-modal__skip' onClick={this.handleSkip}><FormattedMessage id='onboarding.skip' defaultMessage='Skip' /></a>
+            <button
+              onClick={this.handleSkip}
+              className='onboarding-modal__nav onboarding-modal__skip'
+            >
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip' />
+            </button>
           </div>
 
           <div className='onboarding-modal__dots'>

app/javascript/styles/components.scss

@@ -1965,9 +1965,14 @@ button.icon-button.active i.fa-retweet {
 .load-more {
   display: block;
   color: lighten($ui-base-color, 26%);
+  background-color: transparent;
+  border: 0;
+  font-size: inherit;
   text-align: center;
+  line-height: inherit;
+  margin: 0;
   padding: 15px;
-  text-decoration: none;
+  width: 100%;
   clear: both;
 
   &:hover {
@@ -2916,11 +2921,15 @@ button.icon-button.active i.fa-retweet {
     min-width: 33px;
   }
 
-  a {
+  .onboarding-modal__nav {
     color: darken($ui-secondary-color, 34%);
-    text-decoration: none;
+    background-color: transparent;
+    border: 0;
     font-size: 14px;
     font-weight: 500;
+    padding: 0;
+    line-height: inherit;
+    height: auto;
 
     &:hover,
     &:focus,