Change anchor to button element (#3321)
Fix warning for ESLint (jsx-a11y/href-no-hash).
This commit is contained in:
parent
2531c5953b
commit
4b11675bdc
|
@ -22,7 +22,7 @@ class Button extends React.PureComponent {
|
|||
|
||||
handleClick = (e) => {
|
||||
if (!this.props.disabled) {
|
||||
this.props.onClick();
|
||||
this.props.onClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 = {
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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,
|
||||
|
|
Reference in a new issue