web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-13 10:32:26 +02:00
Code Releases Activity

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

Browse Source 
Wrap font-icons in a span with aria-hidden=true on it.

Fixes #3982.
This commit is contained in:
Gary Katsevman 2017-02-01 14:53:43 -05:00 committed by GitHub
parent 5bde16a1bc
commit 24d2e7ba33
13 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/components/_audio.scss
View File

@ -1,3 +1,3 @@
.video-js .vjs-audio-button {
.video-js .vjs-audio-button .vjs-icon-placeholder {
@extend .vjs-icon-audio;
}

6
src/css/components/_big-play.scss
View File

@ -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;
}
}

2
src/css/components/_captions.scss
View File

@ -1,3 +1,3 @@
.video-js .vjs-captions-button {
.video-js .vjs-captions-button .vjs-icon-placeholder {
@extend .vjs-icon-captions;
}

2
src/css/components/_chapters.scss
View File

@ -1,4 +1,4 @@
.video-js .vjs-chapters-button {
.video-js .vjs-chapters-button .vjs-icon-placeholder {
@extend .vjs-icon-chapters;
}

5
src/css/components/_close-button.scss
View File

@ -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;

2
src/css/components/_control.scss
View File

@ -10,7 +10,7 @@
width: 4em;
@include flex(none);
&:before {
& .vjs-icon-placeholder:before {
font-size: 1.8em;
line-height: 1.67;

2
src/css/components/_descriptions.scss
View File

@ -1,3 +1,3 @@
.video-js .vjs-descriptions-button {
.video-js .vjs-descriptions-button .vjs-icon-placeholder {
@extend .vjs-icon-audio-description;
}

7
src/css/components/_fullscreen.scss
View File

@ -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;
}

6
src/css/components/_play-pause.scss
View File

@ -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;
}

2
src/css/components/_subtitles.scss
View File

@ -1,3 +1,3 @@
.video-js .vjs-subtitles-button {
.video-js .vjs-subtitles-button .vjs-icon-placeholder {
@extend .vjs-icon-subtitles;
}

11
src/css/components/_volume.scss
View File

@ -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;
}

1
src/js/button.js
View File

@ -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);

1
src/js/clickable-component.js
View File

@ -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);