autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add eslint-plugin-jsx-a11y (#1651)

Browse Source 
* Add eslint-plugin-jsx-a11y.

* Fix npm script.

* Adjust npm scripts so test also runs lint.

* Fix existing lint errors.

* Don't break on a11y issues.

* Add role and tabIndex.

* Add vim and Mac files to .gitignore and .dockerignore.

* Handle htmlFor (partially), a that's actually a button.

* Fix missing tabIndex.

* Add cursor:pointer to load-more

* Revert change to load_more.

* Fixes based on review.

* Update yarn.lock.

* Don't try to install fsevents on Linux (hides warning noise).
This commit is contained in:
Zac Anger
2017-04-15 05:27:27 -06:00
committed by Eugen
parent df4ff9a8e1
commit f4045ba3d9
32 changed files with 155 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/assets/javascripts/components/features/account/components/header.jsx
View File

@ -43,7 +43,16 @@ const Avatar = React.createClass({
return (
<Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
{({ radius }) =>
<a href={account.get('url')} className='account__header__avatar' target='_blank' rel='noopener' style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden' }} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<a
href={account.get('url')}
className='account__header__avatar'
target='_blank'
rel='noopener'
style={{ display: 'block', width: '90px', height: '90px', margin: '0 auto', marginBottom: '10px', borderRadius: `${radius}px`, overflow: 'hidden' }}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}>
<img src={account.get('avatar')} alt={account.get('acct')} style={{ display: 'block', width: '90px', height: '90px' }} />
</a>
}

2
app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
View File

@ -83,7 +83,7 @@ const PrivacyDropdown = React.createClass({
<div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} title={intl.formatMessage(messages.change_privacy)} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div>
<div className='privacy-dropdown__dropdown'>
{options.map(item =>
<div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
<div role='button' tabIndex='0' key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>
<div className='privacy-dropdown__option__icon'><i className={`fa fa-fw fa-${item.icon}`} /></div>
<div className='privacy-dropdown__option__content'>
<strong>{item.shortText}</strong>

8
app/assets/javascripts/components/features/compose/components/search.jsx
View File

@ -36,6 +36,10 @@ const Search = React.createClass({
}
},
noop () {
},
handleFocus () {
this.props.onShow();
},
@ -56,9 +60,9 @@ const Search = React.createClass({
onFocus={this.handleFocus}
/>
<div className='search__icon'>
<div role='button' tabIndex='0' className='search__icon' onClick={hasValue ? this.handleClear : this.noop}>
<i className={`fa fa-search ${hasValue ? '' : 'active'}`} />
<i className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} onClick={this.handleClear} />
<i aria-label="Clear search" className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} />
</div>
</div>
);

2
app/assets/javascripts/components/features/notifications/components/clear_column_button.jsx
View File

@ -15,7 +15,7 @@ const ClearColumnButton = React.createClass({
const { intl } = this.props;
return (
<div title={intl.formatMessage(messages.clear)} className='column-icon column-icon-clear' tabIndex='0' onClick={this.props.onClick}>
<div role='button' title={intl.formatMessage(messages.clear)} className='column-icon column-icon-clear' tabIndex='0' onClick={this.props.onClick}>
<i className='fa fa-eraser' />
</div>
);

4
app/assets/javascripts/components/features/notifications/components/column_settings.jsx
View File

@ -27,9 +27,11 @@ const ColumnSettings = React.createClass({
propTypes: {
settings: ImmutablePropTypes.map.isRequired,
intl: React.PropTypes.object.isRequired,
onChange: React.PropTypes.func.isRequired,
onSave: React.PropTypes.func.isRequired,
intl: React.PropTypes.shape({
formatMessage: React.PropTypes.func.isRequired
}).isRequired
},
mixins: [PureRenderMixin],

2
app/assets/javascripts/components/features/notifications/components/notification.jsx
View File

@ -71,7 +71,7 @@ const Notification = React.createClass({
);
},
render () {
render () { // eslint-disable-line consistent-return
const { notification } = this.props;
const account = notification.get('account');
const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username');

7
app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx
View File

@ -14,8 +14,8 @@ const labelSpanStyle = {
marginLeft: '8px'
};
const SettingToggle = ({ settings, settingKey, label, onChange }) => (
<label style={labelStyle}>
const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => (
<label htmlFor={htmlFor} style={labelStyle}>
<Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
<span className='setting-toggle' style={labelSpanStyle}>{label}</span>
</label>
@ -25,7 +25,8 @@ SettingToggle.propTypes = {
settings: ImmutablePropTypes.map.isRequired,
settingKey: React.PropTypes.array.isRequired,
label: React.PropTypes.node.isRequired,
onChange: React.PropTypes.func.isRequired
onChange: React.PropTypes.func.isRequired,
htmlFor: React.PropTypes.string
};
export default SettingToggle;

2
app/assets/javascripts/components/features/ui/components/column_header.jsx
View File

@ -25,7 +25,7 @@ const ColumnHeader = React.createClass({
}
return (
<div aria-label={type} className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
<div role='button' tabIndex='0' aria-label={type} className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick}>
{icon}
{type}
</div>

3
app/assets/javascripts/components/features/ui/components/column_link.jsx
View File

@ -34,7 +34,8 @@ ColumnLink.propTypes = {
icon: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired,
to: React.PropTypes.string,
href: React.PropTypes.string
href: React.PropTypes.string,
method: React.PropTypes.string
};
export default ColumnLink;

4
app/assets/javascripts/components/features/ui/components/media_modal.jsx
View File

@ -104,8 +104,8 @@ const MediaModal = React.createClass({
leftNav = rightNav = content = '';
if (media.size > 1) {
leftNav = <div style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
rightNav = <div style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
leftNav = <div role='button' tabIndex='0' style={leftNavStyle} className='modal-container__nav' onClick={this.handlePrevClick}><i className='fa fa-fw fa-chevron-left' /></div>;
rightNav = <div role='button' tabIndex='0' style={rightNavStyle} className='modal-container__nav' onClick={this.handleNextClick}><i className='fa fa-fw fa-chevron-right' /></div>;
}
if (attachment.get('type') === 'image') {

2
app/assets/javascripts/components/features/ui/components/modal_root.jsx
View File

@ -66,7 +66,7 @@ const ModalRoot = React.createClass({
return (
<div key={key}>
<div className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} />
<div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity, transform: `translateZ(0px)` }} onClick={onClose} />
<div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
<SpecificComponent {...props} onClose={onClose} />
</div>