techhub/mastodon
2
0
Fork 0
Code 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

8
app/assets/javascripts/components/components/video_player.jsx
View File

@@ -194,7 +194,7 @@ const VideoPlayer = React.createClass({
if (!this.state.visible) {
if (sensitive) {
return (
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
<div role='button' tabIndex='0' style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@@ -202,7 +202,7 @@ const VideoPlayer = React.createClass({
);
} else {
return (
<div style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
<div role='button' tabIndex='0' style={{...spoilerStyle, width: `${width}px`, height: `${height}px` }} className='media-spoiler' onClick={this.handleVisibility}>
{spoilerButton}
<span style={spoilerSpanStyle}><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span style={spoilerSubSpanStyle}><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
@@ -213,7 +213,7 @@ const VideoPlayer = React.createClass({
if (this.state.preview && !autoplay) {
return (
<div style={{ cursor: 'pointer', position: 'relative', marginTop: '8px', width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }} onClick={this.handleOpen}>
<div role='button' tabIndex='0' style={{ cursor: 'pointer', position: 'relative', marginTop: '8px', width: `${width}px`, height: `${height}px`, background: `url(${media.get('preview_url')}) no-repeat center`, backgroundSize: 'cover' }} onClick={this.handleOpen}>
{spoilerButton}
<div style={{ position: 'absolute', top: '50%', left: '50%', fontSize: '36px', transform: 'translate(-50%, -50%)', padding: '5px', borderRadius: '100px', color: 'rgba(255, 255, 255, 0.8)' }}><i className='fa fa-play' /></div>
</div>
@@ -225,7 +225,7 @@ const VideoPlayer = React.createClass({
{spoilerButton}
{muteButton}
{expandButton}
<video ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
<video role='button' tabIndex='0' ref={this.setRef} src={media.get('url')} autoPlay={!isIOS()} loop={true} muted={this.state.muted} style={videoStyle} onClick={this.handleVideoClick} />
</div>
);
}