Skip to content

Commit ad11d2b

Browse files
catarakcatarak
authored
Merge pull request #1420 from processing/aria-labels
Make SVG icons web accessible
2 parents 504cdc3 + 2c3aeee commit ad11d2b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1530
-409
lines changed

‎client/components/AddRemoveButton.jsx

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import InlineSVG from 'react-inlinesvg';
43

5-
const addIcon = require('../images/plus.svg');
6-
const removeIcon = require('../images/minus.svg');
4+
import AddIcon from '../images/plus.svg';
5+
import RemoveIcon from '../images/minus.svg';
76

87
const AddRemoveButton = ({ type, onClick }) => {
9-
const alt = type === 'add' ? 'add to collection' : 'remove from collection';
10-
const icon = type === 'add' ? addIcon : removeIcon;
8+
const alt = type === 'add' ? 'Add to collection' : 'Remove from collection';
9+
const Icon = type === 'add' ? AddIcon : RemoveIcon;
1110

1211
return (
13-
<button className="overlay__close-button" onClick={onClick}>
14-
<InlineSVG src={icon} alt={alt} />
12+
<button
13+
className="overlay__close-button"
14+
onClick={onClick}
15+
aria-label={alt}
16+
>
17+
<Icon focusable="false" aria-hidden="true" />
1518
</button>
1619
);
1720
};

‎client/components/Nav.jsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
import { connect } from 'react-redux';
44
import { withRouter } from 'react-router';
55
import { Link } from 'react-router';
6-
import InlineSVG from 'react-inlinesvg';
76
import classNames from 'classnames';
87
import * as IDEActions from '../modules/IDE/actions/ide';
98
import * as toastActions from '../modules/IDE/actions/toast';
@@ -12,10 +11,10 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
1211
import { logoutUser } from '../modules/User/actions';
1312

1413
import { metaKeyName, } from '../utils/metaKey';
15-
import caretLeft from '../images/left-arrow.svg';
1614

17-
const triangleUrl = require('../images/down-filled-triangle.svg');
18-
const logoUrl = require('../images/p5js-logo-small.svg');
15+
import CaretLeftIcon from '../images/left-arrow.svg';
16+
import TriangleIcon from '../images/down-filled-triangle.svg';
17+
import LogoIcon from '../images/p5js-logo-small.svg';
1918

2019
const __process = (typeof global !== 'undefined' ? global : window).process;
2120

@@ -229,11 +228,11 @@ class Nav extends React.PureComponent {
229228
return (
230229
<ul className="nav__items-left">
231230
<li className="nav__item-logo">
232-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
231+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
233232
</li>
234233
<li className="nav__item nav__item--no-icon">
235234
<Link to="/" className="nav__back-link">
236-
<InlineSVG src={caretLeft} className="nav__back-icon" />
235+
<CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
237236
<span className="nav__item-header">
238237
Back to Editor
239238
</span>
@@ -247,7 +246,7 @@ class Nav extends React.PureComponent {
247246
return (
248247
<ul className="nav__items-left">
249248
<li className="nav__item-logo">
250-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
249+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
251250
</li>
252251
<li className={navDropdownState.file}>
253252
<button
@@ -261,7 +260,7 @@ class Nav extends React.PureComponent {
261260
}}
262261
>
263262
<span className="nav__item-header">File</span>
264-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
263+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
265264
</button>
266265
<ul className="nav__dropdown">
267266
<li className="nav__dropdown-item">
@@ -363,7 +362,7 @@ class Nav extends React.PureComponent {
363362
}}
364363
>
365364
<span className="nav__item-header">Edit</span>
366-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
365+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
367366
</button>
368367
<ul className="nav__dropdown" >
369368
<li className="nav__dropdown-item">
@@ -423,7 +422,7 @@ class Nav extends React.PureComponent {
423422
}}
424423
>
425424
<span className="nav__item-header">Sketch</span>
426-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
425+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
427426
</button>
428427
<ul className="nav__dropdown">
429428
<li className="nav__dropdown-item">
@@ -498,7 +497,7 @@ class Nav extends React.PureComponent {
498497
}}
499498
>
500499
<span className="nav__item-header">Help</span>
501-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
500+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
502501
</button>
503502
<ul className="nav__dropdown">
504503
<li className="nav__dropdown-item">
@@ -575,7 +574,7 @@ class Nav extends React.PureComponent {
575574
}}
576575
>
577576
My Account
578-
<InlineSVG className="nav__item-header-triangle" src={triangleUrl} />
577+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
579578
</button>
580579
<ul className="nav__dropdown">
581580
<li className="nav__dropdown-item">

‎client/components/NavBasic.jsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import InlineSVG from 'react-inlinesvg';
43

5-
const logoUrl = require('../images/p5js-logo-small.svg');
6-
const arrowUrl = require('../images/triangle-arrow-left.svg');
4+
import LogoIcon from '../images/p5js-logo-small.svg';
5+
import ArrowIcon from '../images/triangle-arrow-left.svg';
76

87
class NavBasic extends React.PureComponent {
98
static defaultProps = {
@@ -15,13 +14,13 @@ class NavBasic extends React.PureComponent {
1514
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
1615
<ul className="nav__items-left">
1716
<li className="nav__item-logo">
18-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
17+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
1918
</li>
2019
{ this.props.onBack && (
2120
<li className="nav__item">
2221
<button onClick={this.props.onBack}>
2322
<span className="nav__item-header">
24-
<InlineSVG src={arrowUrl} alt="Left arrow" />
23+
<ArrowIcon focusable="false" aria-hidden="true" />
2524
</span>
2625
Back to the editor
2726
</button>

‎client/components/PreviewNav.jsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { Link } from 'react-router';
4-
import InlineSVG from 'react-inlinesvg';
54

6-
const logoUrl = require('../images/p5js-logo-small.svg');
7-
const editorUrl = require('../images/code.svg');
5+
import LogoIcon from '../images/p5js-logo-small.svg';
6+
import CodeIcon from '../images/code.svg';
87

98
const PreviewNav = ({ owner, project }) => (
109
<nav className="nav preview-nav">
1110
<div className="nav__items-left">
1211
<div className="nav__item-logo">
13-
<InlineSVG src={logoUrl} alt="p5.js logo" className="svg__logo" />
12+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
1413
</div>
1514
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
1615
<p className="toolbar__project-owner">by</p>
1716
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
1817
</div>
1918
<div className="nav__items-right">
20-
<Link to={`/${owner.username}/sketches/${project.id}`}>
21-
<InlineSVG className="preview-nav__editor-svg" src={editorUrl} />
19+
<Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
20+
<CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
2221
</Link>
2322
</div>
2423
</nav>

‎client/components/__test__/__snapshots__/Nav.test.jsx.snap

+21-10
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@ exports[`Nav renders correctly 1`] = `
1111
<li
1212
className="nav__item-logo"
1313
>
14-
<span
15-
className="isvg loading svg__logo"
14+
<test-file-stub
15+
aria-label="p5.js Logo"
16+
className="svg__logo"
17+
focusable="false"
18+
role="img"
1619
/>
1720
</li>
1821
<li
@@ -29,8 +32,10 @@ exports[`Nav renders correctly 1`] = `
2932
>
3033
File
3134
</span>
32-
<span
33-
className="isvg loading nav__item-header-triangle"
35+
<test-file-stub
36+
aria-hidden="true"
37+
className="nav__item-header-triangle"
38+
focusable="false"
3439
/>
3540
</button>
3641
<ul
@@ -108,8 +113,10 @@ exports[`Nav renders correctly 1`] = `
108113
>
109114
Edit
110115
</span>
111-
<span
112-
className="isvg loading nav__item-header-triangle"
116+
<test-file-stub
117+
aria-hidden="true"
118+
className="nav__item-header-triangle"
119+
focusable="false"
113120
/>
114121
</button>
115122
<ul
@@ -201,8 +208,10 @@ exports[`Nav renders correctly 1`] = `
201208
>
202209
Sketch
203210
</span>
204-
<span
205-
className="isvg loading nav__item-header-triangle"
211+
<test-file-stub
212+
aria-hidden="true"
213+
className="nav__item-header-triangle"
214+
focusable="false"
206215
/>
207216
</button>
208217
<ul
@@ -282,8 +291,10 @@ exports[`Nav renders correctly 1`] = `
282291
>
283292
Help
284293
</span>
285-
<span
286-
className="isvg loading nav__item-header-triangle"
294+
<test-file-stub
295+
aria-hidden="true"
296+
className="nav__item-header-triangle"
297+
focusable="false"
287298
/>
288299
</button>
289300
<ul

‎client/modules/App/components/Overlay.jsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3-
import InlineSVG from 'react-inlinesvg';
43
import { browserHistory } from 'react-router';
54

6-
const exitUrl = require('../../../images/exit.svg');
5+
import ExitIcon from '../../../images/exit.svg';
76

87
class Overlay extends React.Component {
98
constructor(props) {
@@ -81,8 +80,8 @@ class Overlay extends React.Component {
8180
<h2 className="overlay__title">{title}</h2>
8281
<div className="overlay__actions">
8382
{actions}
84-
<button className="overlay__close-button" onClick={this.close} >
85-
<InlineSVG src={exitUrl} alt="close overlay" />
83+
<button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
84+
<ExitIcon focusable="false" aria-hidden="true" />
8685
</button>
8786
</div>
8887
</header>

‎client/modules/IDE/components/About.jsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import InlineSVG from 'react-inlinesvg';
32
import { Helmet } from 'react-helmet';
43

5-
const squareLogoUrl = require('../../../images/p5js-square-logo.svg');
6-
// const playUrl = require('../../../images/play.svg');
7-
const asteriskUrl = require('../../../images/p5-asterisk.svg');
4+
import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
5+
// import PlayIcon from '../../../images/play.svg';
6+
import AsteriskIcon from '../../../images/p5-asterisk.svg';
87

98
function About(props) {
109
return (
@@ -13,15 +12,15 @@ function About(props) {
1312
<title>p5.js Web Editor | About</title>
1413
</Helmet>
1514
<div className="about__content-column">
16-
<InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
15+
<SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
1716
{/* Video button to hello p5 video page */}
1817
{/* <p className="about__play-video">
1918
<a
2019
href="http://hello.p5js.org/"
2120
target="_blank"
2221
rel="noopener noreferrer"
2322
>
24-
<InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
23+
<PlayIcon className="about__play-video-button" title="Play Hello Video" />
2524
Play hello! video</a>
2625
</p> */}
2726
</div>
@@ -33,7 +32,7 @@ function About(props) {
3332
target="_blank"
3433
rel="noopener noreferrer"
3534
>
36-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
35+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
3736
Examples
3837
</a>
3938
</p>
@@ -43,7 +42,7 @@ function About(props) {
4342
target="_blank"
4443
rel="noopener noreferrer"
4544
>
46-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
45+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
4746
Learn
4847
</a>
4948
</p>
@@ -56,7 +55,7 @@ function About(props) {
5655
target="_blank"
5756
rel="noopener noreferrer"
5857
>
59-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
58+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
6059
Libraries
6160
</a>
6261
</p>
@@ -66,7 +65,7 @@ function About(props) {
6665
target="_blank"
6766
rel="noopener noreferrer"
6867
>
69-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
68+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
7069
Reference
7170
</a>
7271
</p>
@@ -76,7 +75,7 @@ function About(props) {
7675
target="_blank"
7776
rel="noopener noreferrer"
7877
>
79-
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
78+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
8079
Forum
8180
</a>
8281
</p>

‎client/modules/IDE/components/AssetList.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ import { bindActionCreators } from 'redux';
55
import { Link } from 'react-router';
66
import { Helmet } from 'react-helmet';
77
import prettyBytes from 'pretty-bytes';
8-
import InlineSVG from 'react-inlinesvg';
98

109
import Loader from '../../App/components/loader';
1110
import * as AssetActions from '../actions/assets';
12-
import downFilledTriangle from '../../../images/down-filled-triangle.svg';
11+
import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
1312

1413
class AssetListRowBase extends React.Component {
1514
constructor(props) {
@@ -86,8 +85,9 @@ class AssetListRowBase extends React.Component {
8685
onClick={this.toggleOptions}
8786
onBlur={this.onBlurComponent}
8887
onFocus={this.onFocusComponent}
88+
aria-label="Toggle Open/Close Asset Options"
8989
>
90-
<InlineSVG src={downFilledTriangle} alt="Menu" />
90+
<DownFilledTriangleIcon focusable="false" aria-hidden="true" />
9191
</button>
9292
{optionsOpen &&
9393
<ul

0 commit comments

Comments
 (0)