Skip to content

Commit cee22c3

Browse files
catarakcatarak
committed
Move through svg icons and add aria labels
1 parent 8bf4008 commit cee22c3

28 files changed

+194
-101
lines changed

‎client/components/Nav.jsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -228,11 +228,11 @@ class Nav extends React.PureComponent {
228228
return (
229229
<ul className="nav__items-left">
230230
<li className="nav__item-logo">
231-
<LogoIcon title="p5.js Logo" className="svg__logo" />
231+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
232232
</li>
233233
<li className="nav__item nav__item--no-icon">
234234
<Link to="/" className="nav__back-link">
235-
<CaretLeftIcon className="nav__back-icon" />
235+
<CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
236236
<span className="nav__item-header">
237237
Back to Editor
238238
</span>
@@ -246,7 +246,7 @@ class Nav extends React.PureComponent {
246246
return (
247247
<ul className="nav__items-left">
248248
<li className="nav__item-logo">
249-
<LogoIcon title="p5.js Logo" className="svg__logo" />
249+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
250250
</li>
251251
<li className={navDropdownState.file}>
252252
<button
@@ -260,7 +260,7 @@ class Nav extends React.PureComponent {
260260
}}
261261
>
262262
<span className="nav__item-header">File</span>
263-
<TriangleIcon className="nav__item-header-triangle" />
263+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
264264
</button>
265265
<ul className="nav__dropdown">
266266
<li className="nav__dropdown-item">
@@ -362,7 +362,7 @@ class Nav extends React.PureComponent {
362362
}}
363363
>
364364
<span className="nav__item-header">Edit</span>
365-
<TriangleIcon className="nav__item-header-triangle" />
365+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
366366
</button>
367367
<ul className="nav__dropdown" >
368368
<li className="nav__dropdown-item">
@@ -422,7 +422,7 @@ class Nav extends React.PureComponent {
422422
}}
423423
>
424424
<span className="nav__item-header">Sketch</span>
425-
<TriangleIcon className="nav__item-header-triangle" />
425+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
426426
</button>
427427
<ul className="nav__dropdown">
428428
<li className="nav__dropdown-item">
@@ -497,7 +497,7 @@ class Nav extends React.PureComponent {
497497
}}
498498
>
499499
<span className="nav__item-header">Help</span>
500-
<TriangleIcon className="nav__item-header-triangle" />
500+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
501501
</button>
502502
<ul className="nav__dropdown">
503503
<li className="nav__dropdown-item">
@@ -574,7 +574,7 @@ class Nav extends React.PureComponent {
574574
}}
575575
>
576576
My Account
577-
<TriangleIcon className="nav__item-header-triangle" />
577+
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
578578
</button>
579579
<ul className="nav__dropdown">
580580
<li className="nav__dropdown-item">

‎client/components/NavBasic.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ class NavBasic extends React.PureComponent {
1414
<nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
1515
<ul className="nav__items-left">
1616
<li className="nav__item-logo">
17-
<LogoIcon title="p5.js Logo" className="svg__logo" />
17+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
1818
</li>
1919
{ this.props.onBack && (
2020
<li className="nav__item">
2121
<button onClick={this.props.onBack}>
2222
<span className="nav__item-header">
23-
<ArrowIcon title="Left arrow" />
23+
<ArrowIcon focusable="false" aria-hidden="true" />
2424
</span>
2525
Back to the editor
2626
</button>

‎client/components/PreviewNav.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ const PreviewNav = ({ owner, project }) => (
99
<nav className="nav preview-nav">
1010
<div className="nav__items-left">
1111
<div className="nav__item-logo">
12-
<LogoIcon title="p5.js Logo" className="svg__logo" />
12+
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
1313
</div>
1414
<Link className="nav__item" to={`/${owner.username}/sketches/${project.id}`}>{project.name}</Link>
1515
<p className="toolbar__project-owner">by</p>
1616
<Link className="nav__item" to={`/${owner.username}/sketches/`}>{owner.username}</Link>
1717
</div>
1818
<div className="nav__items-right">
19-
<Link to={`/${owner.username}/sketches/${project.id}`}>
20-
<CodeIcon className="preview-nav__editor-svg" />
19+
<Link to={`/${owner.username}/sketches/${project.id}`} aria-label="Edit Sketch" >
20+
<CodeIcon className="preview-nav__editor-svg" focusable="false" aria-hidden="true" />
2121
</Link>
2222
</div>
2323
</nav>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ class Overlay extends React.Component {
8080
<h2 className="overlay__title">{title}</h2>
8181
<div className="overlay__actions">
8282
{actions}
83-
<button className="overlay__close-button" onClick={this.close} >
84-
<ExitIcon title="close overlay" />
83+
<button className="overlay__close-button" onClick={this.close} aria-label={`Close ${title} overlay`} >
84+
<ExitIcon focusable="false" aria-hidden="true" />
8585
</button>
8686
</div>
8787
</header>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function About(props) {
1212
<title>p5.js Web Editor | About</title>
1313
</Helmet>
1414
<div className="about__content-column">
15-
<SquareLogoIcon className="about__logo" title="p5.js Square Logo" />
15+
<SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
1616
{/* Video button to hello p5 video page */}
1717
{/* <p className="about__play-video">
1818
<a
@@ -32,7 +32,7 @@ function About(props) {
3232
target="_blank"
3333
rel="noopener noreferrer"
3434
>
35-
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
35+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
3636
Examples
3737
</a>
3838
</p>
@@ -42,7 +42,7 @@ function About(props) {
4242
target="_blank"
4343
rel="noopener noreferrer"
4444
>
45-
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
45+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
4646
Learn
4747
</a>
4848
</p>
@@ -55,7 +55,7 @@ function About(props) {
5555
target="_blank"
5656
rel="noopener noreferrer"
5757
>
58-
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
58+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
5959
Libraries
6060
</a>
6161
</p>
@@ -65,7 +65,7 @@ function About(props) {
6565
target="_blank"
6666
rel="noopener noreferrer"
6767
>
68-
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
68+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
6969
Reference
7070
</a>
7171
</p>
@@ -75,7 +75,7 @@ function About(props) {
7575
target="_blank"
7676
rel="noopener noreferrer"
7777
>
78-
<AsteriskIcon className="about__content-column-asterisk" title="p5 asterisk" />
78+
<AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
7979
Forum
8080
</a>
8181
</p>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,9 @@ class AssetListRowBase extends React.Component {
8585
onClick={this.toggleOptions}
8686
onBlur={this.onBlurComponent}
8787
onFocus={this.onFocusComponent}
88+
aria-label="Toggle Open/Close Asset Options"
8889
>
89-
<DownFilledTriangleIcon title="Menu" />
90+
<DownFilledTriangleIcon focusable="false" aria-hidden="true" />
9091
</button>
9192
{optionsOpen &&
9293
<ul

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

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,21 +82,43 @@ class CollectionList extends React.Component {
8282
return null;
8383
}
8484

85+
_getButtonLabel = (fieldName, displayName) => {
86+
const { field, direction } = this.props.sorting;
87+
let buttonLabel;
88+
if (field !== fieldName) {
89+
if (field === 'name') {
90+
buttonLabel = `Sort by ${displayName} ascending.`;
91+
} else {
92+
buttonLabel = `Sort by ${displayName} descending.`;
93+
}
94+
} else if (direction === SortingActions.DIRECTION.ASC) {
95+
buttonLabel = `Sort by ${displayName} descending.`;
96+
} else {
97+
buttonLabel = `Sort by ${displayName} ascending.`;
98+
}
99+
return buttonLabel;
100+
}
101+
85102
_renderFieldHeader = (fieldName, displayName) => {
86103
const { field, direction } = this.props.sorting;
87104
const headerClass = classNames({
88105
'sketches-table__header': true,
89106
'sketches-table__header--selected': field === fieldName
90107
});
108+
const buttonLabel = this._getButtonLabel(fieldName, displayName);
91109
return (
92110
<th scope="col">
93-
<button className="sketch-list__sort-button" onClick={() => this.props.toggleDirectionForField(fieldName)}>
111+
<button
112+
className="sketch-list__sort-button"
113+
onClick={() => this.props.toggleDirectionForField(fieldName)}
114+
aria-label={buttonLabel}
115+
>
94116
<span className={headerClass}>{displayName}</span>
95117
{field === fieldName && direction === SortingActions.DIRECTION.ASC &&
96-
<ArrowUpIcon />
118+
<ArrowUpIcon role="img" aria-label="Ascending" focusable="false" />
97119
}
98120
{field === fieldName && direction === SortingActions.DIRECTION.DESC &&
99-
<ArrowDownIcon />
121+
<ArrowDownIcon role="img" aria-label="Descending" focusable="false" />
100122
}
101123
</button>
102124
</th>

‎client/modules/IDE/components/CollectionList/CollectionListRow.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ class CollectionListRowBase extends React.Component {
128128
onClick={this.toggleOptions}
129129
onBlur={this.onBlurComponent}
130130
onFocus={this.onFocusComponent}
131+
aria-label="Toggle Open/Close collection options"
131132
>
132133
<DownFilledTriangleIcon title="Menu" />
133134
</button>

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,18 +90,18 @@ class Console extends React.Component {
9090
<div className="preview-console__header">
9191
<h2 className="preview-console__header-title">Console</h2>
9292
<div className="preview-console__header-buttons">
93-
<button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="clear console">
93+
<button className="preview-console__clear" onClick={this.props.clearConsole} aria-label="Clear console">
9494
Clear
9595
</button>
9696
<button
9797
className="preview-console__collapse"
9898
onClick={this.props.collapseConsole}
99-
aria-label="collapse console"
99+
aria-label="Close console"
100100
>
101-
<DownArrowIcon />
101+
<DownArrowIcon focusable="false" aria-hidden="true" />
102102
</button>
103-
<button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="expand console">
104-
<UpArrowIcon />
103+
<button className="preview-console__expand" onClick={this.props.expandConsole} aria-label="Open console" >
104+
<UpArrowIcon focusable="false" aria-hidden="true" />
105105
</button>
106106
</div>
107107
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,9 @@ class CopyableInput extends React.Component {
6969
rel="noopener noreferrer"
7070
href={value}
7171
className="copyable-input__preview"
72+
aria-label={`Open ${label} view in new tab`}
7273
>
73-
<ShareIcon title={`open ${label} view in new tab`} />
74+
<ShareIcon focusable="false" aria-hidden="true" />
7475
</a>
7576
}
7677
</div>

0 commit comments

Comments
 (0)