Skip to content

Commit 2446d39

Browse files
joedolsonjoedolson
committed
A11y: Ensure icons are not spoken by screen readers.
For all CSS generated icons across core, either add `aria-hidden="true"` to the HTML wrapper or set the generated content alternative to an empty string in the CSS using the alternative text specification for CSS generated content. Props afercia, joedolson, cheffheid, jhabdas. Fixes #40428. git-svn-id: https://develop.svn.wordpress.org/trunk@60806 602fd350-edb4-49c9-b593-d223f7449a82
1 parent aaf2422 commit 2446d39

27 files changed

+512
-512
lines changed

‎src/js/_enqueues/wp/editor/base.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1273,7 +1273,7 @@ window.wp = window.wp || {};
12731273

12741274
var $addMediaButton = $( '<button type="button" class="button insert-media add_media">' );
12751275

1276-
$addMediaButton.append( '<span class="wp-media-buttons-icon"></span>' );
1276+
$addMediaButton.append( '<span class="wp-media-buttons-icon" aria-hidden="true"></span>' );
12771277
$addMediaButton.append( document.createTextNode( ' ' + buttonText ) );
12781278
$addMediaButton.data( 'editor', id );
12791279

‎src/js/_enqueues/wp/theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1221,7 +1221,7 @@ themes.view.Themes = wp.Backbone.View.extend({
12211221

12221222
// 'Add new theme' element shown at the end of the grid.
12231223
if ( ! themes.isInstall && themes.data.settings.canInstall ) {
1224-
this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
1224+
this.$el.append( '<div class="theme add-new-theme"><a href="' + themes.data.settings.installURI + '"><div class="theme-screenshot"><span aria-hidden="true"></span></div><h2 class="theme-name">' + l10n.addNew + '</h2></a></div>' );
12251225
}
12261226

12271227
this.parent.page++;

‎src/wp-admin/css/customize-controls.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ body.trashing #publish-settings {
233233
display: inline-block;
234234
}
235235
#customize-control-trash_changeset .button-link:before {
236-
content: "\f182";
236+
content: "\f182" / '';
237237
font: normal 22px dashicons;
238238
text-decoration: none;
239239
position: absolute;
@@ -594,7 +594,7 @@ body.trashing #publish-settings {
594594

595595
#customize-theme-controls .accordion-section-title:after,
596596
#customize-outer-theme-controls .accordion-section-title:after {
597-
content: "\f345";
597+
content: "\f345" / '';
598598
color: #a7aaad;
599599
pointer-events: none;
600600
}
@@ -931,7 +931,7 @@ h3.customize-section-title {
931931

932932
.customize-controls-close:before {
933933
font: normal 22px/45px dashicons;
934-
content: "\f335";
934+
content: "\f335" / '';
935935
position: relative;
936936
top: -3px;
937937
left: 13px;
@@ -940,7 +940,7 @@ h3.customize-section-title {
940940
.customize-panel-back:before,
941941
.customize-section-back:before {
942942
font: normal 20px/72px dashicons;
943-
content: "\f341";
943+
content: "\f341" / '';
944944
position: relative;
945945
left: 9px;
946946
}
@@ -1026,7 +1026,7 @@ p.customize-section-description {
10261026

10271027
.customize-section-description a.external-link:after {
10281028
font: 16px/11px dashicons;
1029-
content: "\f504";
1029+
content: "\f504" / '';
10301030
top: 3px;
10311031
position: relative;
10321032
padding-left: 3px;
@@ -1357,7 +1357,7 @@ p.customize-section-description {
13571357
}
13581358

13591359
.customize-control .dropdown-arrow:after {
1360-
content: "\f140";
1360+
content: "\f140" / '';
13611361
font: normal 20px/1 dashicons;
13621362
speak: never;
13631363
display: block;
@@ -1882,7 +1882,7 @@ p.customize-section-description {
18821882
}
18831883

18841884
.themes-filter-bar .feature-filter-toggle:before {
1885-
content: "\f111";
1885+
content: "\f111" / '';
18861886
margin: 0 5px 0 0;
18871887
font: normal 16px/1 dashicons;
18881888
vertical-align: text-bottom;
@@ -2020,7 +2020,7 @@ p.customize-section-description {
20202020
}
20212021

20222022
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
2023-
content: "\f147";
2023+
content: "\f147" / '';
20242024
font: 16px/1 dashicons;
20252025
box-sizing: border-box;
20262026
width: 20px;
@@ -2523,7 +2523,7 @@ body.cheatin p {
25232523
.add-new-widget:before,
25242524
.add-new-menu-item:before,
25252525
#available-menu-items .new-content-item .add-content:before {
2526-
content: "\f132";
2526+
content: "\f132" / '';
25272527
display: inline-block;
25282528
position: relative;
25292529
left: -2px;
@@ -2602,12 +2602,12 @@ body.cheatin p {
26022602

26032603
.move-widget-down:before,
26042604
.menus-move-down:before {
2605-
content: "\f347";
2605+
content: "\f347" / '';
26062606
}
26072607

26082608
.move-widget-up:before,
26092609
.menus-move-up:before {
2610-
content: "\f343";
2610+
content: "\f343" / '';
26112611
}
26122612

26132613
#customize-theme-controls .first-widget .move-widget-up,
@@ -2767,7 +2767,7 @@ body.adding-widget .add-new-widget:before,
27672767

27682768
#available-widgets-filter .clear-results:before,
27692769
#available-menu-items-search .clear-results:before {
2770-
content: "\f335";
2770+
content: "\f335" / '';
27712771
font: normal 20px/1 dashicons;
27722772
vertical-align: middle;
27732773
-webkit-font-smoothing: antialiased;
@@ -2978,14 +2978,14 @@ body.adding-widget .add-new-widget:before,
29782978
.customize-controls-preview-toggle .preview:before,
29792979
.customize-controls-preview-toggle .controls:before {
29802980
font: normal 20px/1 dashicons;
2981-
content: "\f177";
2981+
content: "\f177" / '';
29822982
position: relative;
29832983
top: 4px;
29842984
margin-right: 6px;
29852985
}
29862986

29872987
.customize-controls-preview-toggle .controls:before {
2988-
content: "\f540";
2988+
content: "\f540" / '';
29892989
}
29902990

29912991
.preview-only #customize-controls {

‎src/wp-admin/css/customize-nav-menus.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,11 +141,11 @@
141141
}
142142

143143
.menus-move-left:before {
144-
content: "\f341";
144+
content: "\f341" / '';
145145
}
146146

147147
.menus-move-right:before {
148-
content: "\f345";
148+
content: "\f345" / '';
149149
}
150150

151151
.reordering .menu-item .item-controls,
@@ -177,7 +177,7 @@
177177
}
178178

179179
.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
180-
content: "\f142";
180+
content: "\f142" / '';
181181
}
182182

183183
.wp-customizer .menu-item-settings p.description {
@@ -277,7 +277,7 @@
277277
.customize-screen-options-toggle:before {
278278
-moz-osx-font-smoothing: grayscale;
279279
border: none;
280-
content: "\f111";
280+
content: "\f111" / '';
281281
display: block;
282282
font: 18px/1 dashicons;
283283
padding: 5px;
@@ -467,7 +467,7 @@
467467
}
468468

469469
.menu-item-bar .item-delete:before {
470-
content: "\f335";
470+
content: "\f335" / '';
471471
position: absolute;
472472
top: 9px;
473473
left: 5px;
@@ -652,7 +652,7 @@
652652
}
653653

654654
#available-menu-items .item-add:before {
655-
content: "\f543";
655+
content: "\f543" / '';
656656
position: relative;
657657
left: 2px;
658658
top: 3px;
@@ -670,7 +670,7 @@
670670
}
671671

672672
#available-menu-items .menu-item-handle.item-added .item-add:before {
673-
content: "\f147";
673+
content: "\f147" / '';
674674
}
675675

676676
#available-menu-items .accordion-section-title.loading .spinner,

‎src/wp-admin/css/customize-widgets.css‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
}
131131

132132
.move-widget:before {
133-
content: "\f504";
133+
content: "\f504" / '';
134134
}
135135

136136
#customize-theme-controls .move-widget-area {
@@ -170,7 +170,7 @@
170170

171171
#customize-theme-controls .widget-area-select li:before {
172172
display: none;
173-
content: "\f147";
173+
content: "\f147" / '';
174174
position: absolute;
175175
top: 12px;
176176
left: 10px;
@@ -292,7 +292,7 @@ body.adding-widget #customize-preview {
292292
}
293293

294294
#available-widgets .widget-title:before {
295-
content: "\f132";
295+
content: "\f132" / '';
296296
position: absolute;
297297
top: -3px;
298298
right: 100%;
@@ -308,73 +308,73 @@ body.adding-widget #customize-preview {
308308
}
309309

310310
/* dashicons-smiley */
311-
#available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; }
311+
#available-widgets [class*="easy"] .widget-title:before { content: "\f328" / ''; top: -4px; }
312312

313313
/* dashicons-star-filled */
314314
#available-widgets [class*="super"] .widget-title:before,
315-
#available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; }
315+
#available-widgets [class*="like"] .widget-title:before { content: "\f155" / ''; top: -4px; }
316316

317317
/* dashicons-wordpress */
318-
#available-widgets [class*="meta"] .widget-title:before { content: "\f120"; }
318+
#available-widgets [class*="meta"] .widget-title:before { content: "\f120" / ''; }
319319

320320
/* dashicons-archive */
321-
#available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; }
321+
#available-widgets [class*="archives"] .widget-title:before { content: "\f480" / ''; top: -4px; }
322322

323323
/* dashicons-category */
324-
#available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; }
324+
#available-widgets [class*="categor"] .widget-title:before { content: "\f318" / ''; top: -4px; }
325325

326326
/* dashicons-admin-comments */
327327
#available-widgets [class*="comment"] .widget-title:before,
328328
#available-widgets [class*="testimonial"] .widget-title:before,
329-
#available-widgets [class*="chat"] .widget-title:before { content: "\f101"; }
329+
#available-widgets [class*="chat"] .widget-title:before { content: "\f101" / ''; }
330330

331331
/* dashicons-admin-post */
332-
#available-widgets [class*="post"] .widget-title:before { content: "\f109"; }
332+
#available-widgets [class*="post"] .widget-title:before { content: "\f109" / ''; }
333333

334334
/* dashicons-admin-page */
335-
#available-widgets [class*="page"] .widget-title:before { content: "\f105"; }
335+
#available-widgets [class*="page"] .widget-title:before { content: "\f105" / ''; }
336336

337337
/* dashicons-text */
338-
#available-widgets [class*="text"] .widget-title:before { content: "\f478"; }
338+
#available-widgets [class*="text"] .widget-title:before { content: "\f478" / ''; }
339339

340340
/* dashicons-admin-links */
341-
#available-widgets [class*="link"] .widget-title:before { content: "\f103"; }
341+
#available-widgets [class*="link"] .widget-title:before { content: "\f103" / ''; }
342342

343343
/* dashicons-search */
344-
#available-widgets [class*="search"] .widget-title:before { content: "\f179"; }
344+
#available-widgets [class*="search"] .widget-title:before { content: "\f179" / ''; }
345345

346346
/* dashicons-menu */
347347
#available-widgets [class*="menu"] .widget-title:before,
348-
#available-widgets [class*="nav"] .widget-title:before { content: "\f333"; }
348+
#available-widgets [class*="nav"] .widget-title:before { content: "\f333" / ''; }
349349

350350
/* dashicons-tagcloud */
351-
#available-widgets [class*="tag"] .widget-title:before { content: "\f479"; }
351+
#available-widgets [class*="tag"] .widget-title:before { content: "\f479" / ''; }
352352

353353
/* dashicons-rss */
354-
#available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; }
354+
#available-widgets [class*="rss"] .widget-title:before { content: "\f303" / ''; top: -6px; }
355355

356356
/* dashicons-calendar */
357357
#available-widgets [class*="event"] .widget-title:before,
358-
#available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;}
358+
#available-widgets [class*="calendar"] .widget-title:before { content: "\f145" / ''; top: -4px;}
359359

360360
/* dashicons-format-image */
361361
#available-widgets [class*="image"] .widget-title:before,
362362
#available-widgets [class*="photo"] .widget-title:before,
363363
#available-widgets [class*="slide"] .widget-title:before,
364-
#available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; }
364+
#available-widgets [class*="instagram"] .widget-title:before { content: "\f128" / ''; }
365365

366366
/* dashicons-format-gallery */
367367
#available-widgets [class*="album"] .widget-title:before,
368-
#available-widgets [class*="galler"] .widget-title:before { content: "\f161"; }
368+
#available-widgets [class*="galler"] .widget-title:before { content: "\f161" / ''; }
369369

370370
/* dashicons-format-video */
371371
#available-widgets [class*="video"] .widget-title:before,
372-
#available-widgets [class*="tube"] .widget-title:before { content: "\f126"; }
372+
#available-widgets [class*="tube"] .widget-title:before { content: "\f126" / ''; }
373373

374374
/* dashicons-format-audio */
375375
#available-widgets [class*="music"] .widget-title:before,
376376
#available-widgets [class*="radio"] .widget-title:before,
377-
#available-widgets [class*="audio"] .widget-title:before { content: "\f127"; }
377+
#available-widgets [class*="audio"] .widget-title:before { content: "\f127" / ''; }
378378

379379
/* dashicons-admin-users */
380380
#available-widgets [class*="login"] .widget-title:before,
@@ -383,55 +383,55 @@ body.adding-widget #customize-preview {
383383
#available-widgets [class*="avatar"] .widget-title:before,
384384
#available-widgets [class*="subscriber"] .widget-title:before,
385385
#available-widgets [class*="profile"] .widget-title:before,
386-
#available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; }
386+
#available-widgets [class*="grofile"] .widget-title:before { content: "\f110" / ''; }
387387

388388
/* dashicons-cart */
389389
#available-widgets [class*="commerce"] .widget-title:before,
390390
#available-widgets [class*="shop"] .widget-title:before,
391-
#available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; }
391+
#available-widgets [class*="cart"] .widget-title:before { content: "\f174" / ''; top: -4px; }
392392

393393
/* dashicons-shield */
394394
#available-widgets [class*="secur"] .widget-title:before,
395-
#available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; }
395+
#available-widgets [class*="firewall"] .widget-title:before { content: "\f332" / ''; }
396396

397397
/* dashicons-chart-bar */
398398
#available-widgets [class*="analytic"] .widget-title:before,
399399
#available-widgets [class*="stat"] .widget-title:before,
400-
#available-widgets [class*="poll"] .widget-title:before { content: "\f185"; }
400+
#available-widgets [class*="poll"] .widget-title:before { content: "\f185" / ''; }
401401

402402
/* dashicons-feedback */
403-
#available-widgets [class*="form"] .widget-title:before { content: "\f175"; }
403+
#available-widgets [class*="form"] .widget-title:before { content: "\f175" / ''; }
404404

405405
/* dashicons-email-alt */
406406
#available-widgets [class*="subscribe"] .widget-title:before,
407407
#available-widgets [class*="news"] .widget-title:before,
408408
#available-widgets [class*="contact"] .widget-title:before,
409-
#available-widgets [class*="mail"] .widget-title:before { content: "\f466"; }
409+
#available-widgets [class*="mail"] .widget-title:before { content: "\f466" / ''; }
410410

411411
/* dashicons-share */
412412
#available-widgets [class*="share"] .widget-title:before,
413-
#available-widgets [class*="socia"] .widget-title:before { content: "\f237"; }
413+
#available-widgets [class*="socia"] .widget-title:before { content: "\f237" / ''; }
414414

415415
/* dashicons-translation */
416416
#available-widgets [class*="lang"] .widget-title:before,
417-
#available-widgets [class*="translat"] .widget-title:before { content: "\f326"; }
417+
#available-widgets [class*="translat"] .widget-title:before { content: "\f326" / ''; }
418418

419419
/* dashicons-location-alt */
420420
#available-widgets [class*="locat"] .widget-title:before,
421-
#available-widgets [class*="map"] .widget-title:before { content: "\f231"; }
421+
#available-widgets [class*="map"] .widget-title:before { content: "\f231" / ''; }
422422

423423
/* dashicons-download */
424-
#available-widgets [class*="download"] .widget-title:before { content: "\f316"; }
424+
#available-widgets [class*="download"] .widget-title:before { content: "\f316" / ''; }
425425

426426
/* dashicons-cloud */
427-
#available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;}
427+
#available-widgets [class*="weather"] .widget-title:before { content: "\f176" / ''; top: -4px;}
428428

429429
/* dashicons-facebook */
430-
#available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; }
430+
#available-widgets [class*="facebook"] .widget-title:before { content: "\f304" / ''; }
431431

432432
/* dashicons-twitter */
433433
#available-widgets [class*="tweet"] .widget-title:before,
434-
#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
434+
#available-widgets [class*="twitter"] .widget-title:before { content: "\f301" / ''; }
435435

436436
@media screen and (max-height: 700px) and (min-width: 981px) {
437437
/* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */

0 commit comments

Comments
 (0)