commit: 4b11675bdc0e99e3e03fde056a1e50e847cec81b
parent: 2531c5953ba4048b04b3c47de345eeac25c05a5f
Author: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Fri, 26 May 2017 21:10:37 +0900
Change anchor to button element (#3321)
Fix warning for ESLint (jsx-a11y/href-no-hash).
Diffstat:
4 files changed, 43 insertions(+), 22 deletions(-)
diff --git a/app/javascript/mastodon/components/button.js b/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);
}
}
diff --git a/app/javascript/mastodon/components/load_more.js b/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 = {
diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/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'>
diff --git a/app/javascript/styles/components.scss b/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,