fix: hide font-icons from assitive technology (#4006)

Wrap font-icons in a span with aria-hidden=true on it. Fixes #3982.
videojs · Feb 1, 2017 · 24d2e7b · 24d2e7b
1 parent 5bde16a
commit 24d2e7b
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 19 deletions.
diff --git a/src/css/components/_audio.scss b/src/css/components/_audio.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-audio-button {
+.video-js .vjs-audio-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio;
 }
diff --git a/src/css/components/_big-play.scss b/src/css/components/_big-play.scss
@@ -17,11 +17,11 @@
   @include border-radius(0.3em);
   @include transition(all 0.4s);
 
-  @extend .vjs-icon-play;
-
   // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
   // other buttons for the icon.
-  &:before {
+  & .vjs-icon-placeholder:before {
+    @extend .vjs-icon-play;
+
     @extend %icon-default;
   }
 }

diff --git a/src/css/components/_captions.scss b/src/css/components/_captions.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-captions-button {
+.video-js .vjs-captions-button .vjs-icon-placeholder {
   @extend .vjs-icon-captions;
 }
diff --git a/src/css/components/_chapters.scss b/src/css/components/_chapters.scss
@@ -1,4 +1,4 @@
-.video-js .vjs-chapters-button {
+.video-js .vjs-chapters-button .vjs-icon-placeholder {
   @extend .vjs-icon-chapters;
 }
 

diff --git a/src/css/components/_close-button.scss b/src/css/components/_close-button.scss
@@ -1,5 +1,8 @@
 .video-js .vjs-control.vjs-close-button {
-  @extend .vjs-icon-cancel;
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
+
   cursor: pointer;
   height: 3em;
   position: absolute;

diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss
@@ -10,7 +10,7 @@
   width: 4em;
   @include flex(none);
 
-  &:before {
+  & .vjs-icon-placeholder:before {
     font-size: 1.8em;
     line-height: 1.67;
 

diff --git a/src/css/components/_descriptions.scss b/src/css/components/_descriptions.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-descriptions-button {
+.video-js .vjs-descriptions-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio-description;
 }
diff --git a/src/css/components/_fullscreen.scss b/src/css/components/_fullscreen.scss
@@ -1,9 +1,12 @@
 .video-js .vjs-fullscreen-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-fullscreen-enter;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-fullscreen-enter;
+  }
 }
 // Switch to the exit icon when the player is in fullscreen
-.video-js.vjs-fullscreen .vjs-fullscreen-control {
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
   @extend .vjs-icon-fullscreen-exit;
 }
diff --git a/src/css/components/_play-pause.scss b/src/css/components/_play-pause.scss
@@ -1,11 +1,11 @@
-.video-js .vjs-play-control {
+.video-js .vjs-play-control .vjs-icon-placeholder {
   cursor: pointer;
   @include flex(none);
   @extend .vjs-icon-play;
 }
-.video-js .vjs-play-control.vjs-playing {
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
   @extend .vjs-icon-pause;
 }
-.video-js .vjs-play-control.vjs-ended {
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
   @extend .vjs-icon-replay;
 }
diff --git a/src/css/components/_subtitles.scss b/src/css/components/_subtitles.scss
@@ -1,3 +1,3 @@
-.video-js .vjs-subtitles-button {
+.video-js .vjs-subtitles-button .vjs-icon-placeholder {
   @extend .vjs-icon-subtitles;
 }
diff --git a/src/css/components/_volume.scss b/src/css/components/_volume.scss
@@ -1,21 +1,24 @@
 .video-js .vjs-mute-control {
   cursor: pointer;
   @include flex(none);
-  @extend .vjs-icon-volume-high;
   // padding here is for IE < 9, it doesn't do width: auto from
   // another style correctly
   padding-left: 2em;
   padding-right: 2em;
   padding-bottom: 3em;
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-volume-high;
+  }
 }
 
-.video-js .vjs-mute-control.vjs-vol-0 {
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mute;
 }
-.video-js .vjs-mute-control.vjs-vol-1 {
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-low;
 }
-.video-js .vjs-mute-control.vjs-vol-2 {
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
   @extend .vjs-icon-volume-mid;
 }
 

diff --git a/src/js/button.js b/src/js/button.js
@@ -33,6 +33,7 @@ class Button extends ClickableComponent {
     tag = 'button';
 
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass()
     }, props);
 

diff --git a/src/js/clickable-component.js b/src/js/clickable-component.js
@@ -51,6 +51,7 @@ class ClickableComponent extends Component {
    */
   createEl(tag = 'div', props = {}, attributes = {}) {
     props = assign({
+      innerHTML: '<span aria-hidden="true" class="vjs-icon-placeholder"></span>',
       className: this.buildCSSClass(),
       tabIndex: 0
     }, props);