web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-07-05 00:58:52 +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
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; @extend .vjs-icon-audio;
} }

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

@ -17,11 +17,11 @@
@include border-radius(0.3em); @include border-radius(0.3em);
@include transition(all 0.4s); @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 // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
// other buttons for the icon. // other buttons for the icon.
&:before { & .vjs-icon-placeholder:before {
@extend .vjs-icon-play;
@extend %icon-default; @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; @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; @extend .vjs-icon-chapters;
} }

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

@ -1,5 +1,8 @@
.video-js .vjs-control.vjs-close-button { .video-js .vjs-control.vjs-close-button {
& .vjs-icon-placeholder {
@extend .vjs-icon-cancel; @extend .vjs-icon-cancel;
}
cursor: pointer; cursor: pointer;
height: 3em; height: 3em;
position: absolute; position: absolute;

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

@ -10,7 +10,7 @@
width: 4em; width: 4em;
@include flex(none); @include flex(none);
&:before { & .vjs-icon-placeholder:before {
font-size: 1.8em; font-size: 1.8em;
line-height: 1.67; 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; @extend .vjs-icon-audio-description;
} }

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

@ -1,9 +1,12 @@
.video-js .vjs-fullscreen-control { .video-js .vjs-fullscreen-control {
cursor: pointer; cursor: pointer;
@include flex(none); @include flex(none);
& .vjs-icon-placeholder {
@extend .vjs-icon-fullscreen-enter; @extend .vjs-icon-fullscreen-enter;
} }
}
// Switch to the exit icon when the player is in fullscreen // 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; @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; cursor: pointer;
@include flex(none); @include flex(none);
@extend .vjs-icon-play; @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; @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; @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; @extend .vjs-icon-subtitles;
} }

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

@ -1,21 +1,24 @@
.video-js .vjs-mute-control { .video-js .vjs-mute-control {
cursor: pointer; cursor: pointer;
@include flex(none); @include flex(none);
@extend .vjs-icon-volume-high;
// padding here is for IE < 9, it doesn't do width: auto from // padding here is for IE < 9, it doesn't do width: auto from
// another style correctly // another style correctly
padding-left: 2em; padding-left: 2em;
padding-right: 2em; padding-right: 2em;
padding-bottom: 3em; 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; @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; @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; @extend .vjs-icon-volume-mid;
} }

1
src/js/button.js
View File

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

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

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