Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix accessibility eslint rules

Browse Source
This commit is contained in:
Pavel Dohnal
2019-01-23 11:38:20 +01:00
parent e694438033
commit 28f43c4077
17 changed files with 115 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.eslintrc.es6.json
View File

@@ -19,6 +19,25 @@
"comma-dangle": ["error", "always-multiline"],
"no-script-url": 0,
"import/extensions": 0, // we wouldn't be able to import jQuery without this line
"react/destructuring-assignment": 0 // that would be too many changes to fix this one
"react/destructuring-assignment": 0, // that would be too many changes to fix this one
"jsx-a11y/label-has-for": [2, {
"required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
}],
"jsx-a11y/anchor-is-valid": 0, // cannot fix this one, it would break wprdpress themes
"no-restricted-globals": 0, // todo
"max-len": 0, // todo
"prefer-destructuring": 0, // todo
"react/default-props-match-prop-types": 0, // todo
"react/no-access-state-in-setstate": 0, // todo
"react/jsx-closing-tag-location": 0, // todo
"react/require-default-props": 0, // todo
"react/jsx-no-target-blank": 0, // todo
"react/sort-comp": 0, // todo
"react/no-unused-state": 0, // todo
"react/no-this-in-sfc": 0 // todo
}
}

6
assets/js/src/announcements/feature_announcement.jsx
View File

@@ -56,15 +56,15 @@ class FeatureAnnouncement extends React.Component {
);
return (
<div className="mailpoet_feature_announcement">
<a
href=""
<button
type="button"
id="beamer-selector"
onClick={this.loadBeamer}
className={buttonClasses}
title={MailPoet.I18n.t('whatsNew')}
>
<span className="mailpoet_feature_announcement_icon dashicons dashicons-carrot" />
</a>
</button>
</div>
);

40
assets/js/src/announcements/in_app_announcement_dot.jsx
View File

@@ -4,21 +4,31 @@ import ReactDOMServer from 'react-dom/server';
import classNames from 'classnames';
import MailPoet from 'mailpoet';
const InAppAnnouncementDot = props => (
<span
role="button"
tabIndex="-1"
className={classNames('mailpoet_in_app_announcement_pulsing_dot', props.className)}
onClick={() => {
MailPoet.Modal.popup({
template: ReactDOMServer.renderToString(props.children),
width: props.width,
height: props.height,
});
if (props.onUserTrigger) props.onUserTrigger();
}}
/>
);
const InAppAnnouncementDot = (props) => {
const onClick = () => {
MailPoet.Modal.popup({
template: ReactDOMServer.renderToString(props.children),
width: props.width,
height: props.height,
});
if (props.onUserTrigger) props.onUserTrigger();
};
return (
<span
role="button"
tabIndex="-1"
className={classNames('mailpoet_in_app_announcement_pulsing_dot', props.className)}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
onClick();
}
}}
onClick={onClick}
/>
);
};
InAppAnnouncementDot.propTypes = {
children: PropTypes.element.isRequired,

6
assets/js/src/common/confirm_alert.jsx
View File

@@ -48,7 +48,7 @@ class ConfirmAlert extends React.Component {
<div className="mailpoet_modal_overlay">
<div className="mailpoet_popup" tabIndex="-1">
<div className="mailpoet_popup_wrapper">
<button className="mailpoet_modal_close" onClick={this.onClose} />
<button className="mailpoet_modal_close" onClick={this.onClose} type="button" />
{title
&& (
<div className="mailpoet_popup_title">
@@ -58,10 +58,10 @@ class ConfirmAlert extends React.Component {
}
<div className="mailpoet_popup_body clearfix">
<p className="mailpoet_hp_email_label">{message}</p>
<button className="button button-secondary" onClick={this.onClose}>
<button className="button button-secondary" onClick={this.onClose} type="button">
{cancelLabel}
</button>
<button className="button button-primary" onClick={this.onConfirm}>
<button className="button button-primary" onClick={this.onConfirm} type="submit">
{confirmLabel}
</button>
</div>

5
assets/js/src/forms/list.jsx
View File

@@ -189,14 +189,15 @@ class FormList extends React.Component {
<h1 className="title">
{MailPoet.I18n.t('pageTitle')}
{' '}
<a
<button
className="page-title-action"
href="javascript:;"
onClick={this.createForm}
data-automation-id="create_new_form"
type="button"
>
{MailPoet.I18n.t('new')}
</a>
</button>
</h1>
<Listing

2
assets/js/src/listing/bulk_actions.jsx
View File

@@ -88,7 +88,7 @@ class ListingBulkActions extends React.Component {
<div className="alignleft actions bulkactions">
<label
className="screen-reader-text"
htmlFor="bulk-action-selector-top"
htmlFor="bulk_actions"
>
{MailPoet.I18n.t('selectBulkAction')}
</label>

7
assets/js/src/listing/listing_column.jsx
View File

@@ -25,6 +25,13 @@ class ListingColumn extends React.Component {
onClick={this.handleSort}
role="button"
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
this.handleSort();
}
}}
>
<span>{ this.props.column.label }</span>
<span className="sorting-indicator" />

8
assets/js/src/listing/listing_item.jsx
View File

@@ -74,6 +74,7 @@ class ListingItem extends React.Component {
<span key={`action-${action.name}`} className="trash">
{(!isFirst) ? ' | ' : ''}
<a
type="button"
href="javascript:;"
onClick={() => this.handleTrashItem(this.props.item.id)}
>
@@ -89,6 +90,13 @@ class ListingItem extends React.Component {
className={action.name}
role="button"
tabIndex={index}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
this.props.onRefreshItems();
}
}}
>
{(!isFirst) ? ' | ' : ''}
{ action.link(this.props.item) }

2
assets/js/src/newsletters/send/congratulate/fail.jsx
View File

@@ -24,7 +24,7 @@ function Fail(props) {
)
}
</p>
<button className="button" onClick={props.failClicked}>{MailPoet.I18n.t('close')}</button>
<button type="button" className="button" onClick={props.failClicked}>{MailPoet.I18n.t('close')}</button>
</div>
);
}

2
assets/js/src/newsletters/send/congratulate/success.jsx
View File

@@ -38,7 +38,7 @@ function Success(props) {
/>
)
}
<button className="button" onClick={props.successClicked}>{MailPoet.I18n.t('close')}</button>
<button type="button" className="button" onClick={props.successClicked}>{MailPoet.I18n.t('close')}</button>
</div>
);
}

7
assets/js/src/newsletters/templates/template_box.jsx
View File

@@ -131,6 +131,13 @@ class TemplateBox extends React.Component {
onClick={this.onSelect}
role="button"
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
this.onSelect();
}
}}
>
{' '}
{MailPoet.I18n.t('select')}

21
assets/js/src/newsletters/types.jsx
View File

@@ -39,6 +39,13 @@ class NewsletterTypes extends React.Component {
role="button"
tabIndex={0}
disabled={!window.mailpoet_premium_active}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
this.onClick();
}
}}
>
{ MailPoet.I18n.t('setUp') }
</a>
@@ -91,6 +98,13 @@ class NewsletterTypes extends React.Component {
onClick={createStandardNewsletter}
role="button"
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
createStandardNewsletter();
}
}}
>
{MailPoet.I18n.t('create')}
</a>
@@ -136,6 +150,13 @@ class NewsletterTypes extends React.Component {
onClick={createNotificationNewsletter}
role="button"
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
createNotificationNewsletter();
}
}}
>
{MailPoet.I18n.t('setUp')}
</a>

11
assets/js/src/newsletters/types/automatic_emails/event.jsx
View File

@@ -28,12 +28,21 @@ class AutomaticEmailEvent extends React.PureComponent {
</a>
);
} else {
const onClick = !disabled ? _.partial(this.props.eventsConfigurator, event.slug) : null;
action = (
<a
className="button button-primary"
disabled={disabled}
onClick={!disabled ? _.partial(this.props.eventsConfigurator, event.slug) : null}
onClick={onClick}
role="button"
data-automation-id={`create_${event.slug}`}
onKeyDown={(keyEvent) => {
if ((['keydown', 'keypress'].includes(keyEvent.type) && ['Enter', ' '].includes(keyEvent.key))
) {
keyEvent.preventDefault();
onClick();
}
}}
>
{event.actionButtonTitle || MailPoet.I18n.t('setUp')}
</a>

2
assets/js/src/welcome_wizard/steps/email_course_step.jsx
View File

@@ -25,7 +25,7 @@ const WelcomeWizardEmailCourseStep = props => (
marginHeight="0"
/>
</div>
<button className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
<button type="button" className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
</div>
);

2
assets/js/src/welcome_wizard/steps/migrated_user_step.jsx
View File

@@ -7,7 +7,7 @@ const WelcomeWizardMigratedUserStep = props => (
<h1>{MailPoet.I18n.t('welcomeWizardLetsStartTitle')}</h1>
<p>{MailPoet.I18n.t('welcomeWizardSenderMigratedUserText')}</p>
<div className="mailpoet_welcome_wizard_step_controls">
<button className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
<button type="button" className="button button-primary" onClick={props.next}>{MailPoet.I18n.t('next')}</button>
</div>
</div>
);

2
assets/js/src/welcome_wizard/steps/usage_tracking_step.jsx
View File

@@ -31,6 +31,7 @@ const WelcomeWizardUsageTrackingStep = props => (
}
>
<button
type="button"
className="button"
onClick={props.skip_action}
disabled={props.loading}
@@ -38,6 +39,7 @@ const WelcomeWizardUsageTrackingStep = props => (
{MailPoet.I18n.t('skip')}
</button>
<button
type="button"
className="button button-primary"
onClick={props.allow_action}
disabled={props.loading}

1
assets/js/src/welcome_wizard/steps/woo_commerce_step.jsx
View File

@@ -23,6 +23,7 @@ const WelcomeWizardWooCommerceStep = props => (
}
>
<button
type="button"
className="button button-primary"
onClick={props.next}
disabled={props.loading}