mirror of
https://github.com/videojs/video.js.git
synced 2024-12-25 02:42:10 +02:00
@OwenEdwards fixed caption settings dialog labels for accessibility. closes #3281
This commit is contained in:
Owen Edwards
Gary Katsevman
parent
58604795f8
commit
238c752aee
@ -25,6 +25,7 @@ CHANGELOG
|
||||
* @sashyro fixed nativeControlsForTouch option ([view](https://github.com/videojs/video.js/pull/3410))
|
||||
* @tbasse fixed techCall null check against tech ([view](https://github.com/videojs/video.js/pull/2676))
|
||||
* @rbran100 checked src and currentSrc in handleTechReady to work around mixed content issues in chrome ([view](https://github.com/videojs/video.js/pull/3287))
|
||||
* @OwenEdwards fixed caption settings dialog labels for accessibility ([view](https://github.com/videojs/video.js/pull/3281))
|
||||
|
||||
--------------------
|
||||
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
color: $primary-foreground-color;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 15em;
|
||||
height: 16em;
|
||||
font-size: 12px;
|
||||
width: 40em;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksettings {
|
||||
top: 0;
|
||||
bottom: 2em;
|
||||
bottom: 1em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
@ -40,8 +40,9 @@
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
min-height: 40px;
|
||||
border: none;
|
||||
}
|
||||
.vjs-caption-settings .vjs-tracksetting label {
|
||||
.vjs-caption-settings .vjs-tracksetting label, legend {
|
||||
display: block;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
@ -50,6 +51,8 @@
|
||||
.vjs-caption-settings .vjs-tracksetting span {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
vertical-align: top;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting > div {
|
||||
@ -67,6 +70,23 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.vjs-caption-settings fieldset {
|
||||
margin-top: 1em;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
// Hide labels within fieldsets, so they are only for screen reader users
|
||||
.vjs-caption-settings fieldset .vjs-label {
|
||||
position: absolute;
|
||||
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vjs-caption-settings input[type="button"] {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
@ -67,9 +67,18 @@ class TextTrackSettings extends Component {
|
||||
* @method createEl
|
||||
*/
|
||||
createEl() {
|
||||
let uniqueId = this.id_;
|
||||
let dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId;
|
||||
let dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId;
|
||||
|
||||
return super.createEl('div', {
|
||||
className: 'vjs-caption-settings vjs-modal-overlay',
|
||||
innerHTML: captionOptionsMenuTemplate()
|
||||
innerHTML: captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId),
|
||||
tabIndex: -1
|
||||
}, {
|
||||
role: 'dialog',
|
||||
'aria-labelledby': dialogLabelId,
|
||||
'aria-describedby': dialogDescriptionId
|
||||
});
|
||||
}
|
||||
|
||||
@ -241,14 +250,19 @@ function setSelectedOption(target, value) {
|
||||
target.selectedIndex = i;
|
||||
}
|
||||
|
||||
function captionOptionsMenuTemplate() {
|
||||
let template = `<div class="vjs-tracksettings">
|
||||
<div class="vjs-tracksettings-colors">
|
||||
<div class="vjs-fg-color vjs-tracksetting">
|
||||
<label class="vjs-label">Foreground</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="#FFF">White</option>
|
||||
function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId) {
|
||||
|
||||
let template = `
|
||||
<div role="document">
|
||||
<div role="heading" aria-level="1" id="${dialogLabelId}" class="vjs-control-text">Captions Settings Dialog</div>
|
||||
<div id="${dialogDescriptionId}" class="vjs-control-text">Beginning of dialog window. Escape will cancel and close the window.</div>
|
||||
<div class="vjs-tracksettings">
|
||||
<div class="vjs-tracksettings-colors">
|
||||
<fieldset class="vjs-fg-color vjs-tracksetting">
|
||||
<legend>Text</legend>
|
||||
<label class="vjs-label" for="captions-foreground-color-${uniqueId}">Color</label>
|
||||
<select id="captions-foreground-color-${uniqueId}">
|
||||
<option value="#FFF" selected>White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
@ -258,19 +272,19 @@ function captionOptionsMenuTemplate() {
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-text-opacity vjs-opacity">
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<label class="vjs-label" for="captions-foreground-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-foreground-opacity-${uniqueId}">
|
||||
<option value="1" selected>Opaque</option>
|
||||
<option value="0.5">Semi-Opaque</option>
|
||||
</select>
|
||||
</span>
|
||||
</div> <!-- vjs-fg-color -->
|
||||
<div class="vjs-bg-color vjs-tracksetting">
|
||||
<label class="vjs-label">Background</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
</fieldset>
|
||||
<fieldset class="vjs-bg-color vjs-tracksetting">
|
||||
<legend>Background</legend>
|
||||
<label class="vjs-label" for="captions-background-color-${uniqueId}">Color</label>
|
||||
<select id="captions-background-color-${uniqueId}">
|
||||
<option value="#000" selected>Black</option>
|
||||
<option value="#FFF">White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
<option value="#00F">Blue</option>
|
||||
@ -279,20 +293,20 @@ function captionOptionsMenuTemplate() {
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-bg-opacity vjs-opacity">
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
<label class="vjs-label" for="captions-background-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-background-opacity-${uniqueId}">
|
||||
<option value="1" selected>Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
</span>
|
||||
</div> <!-- vjs-bg-color -->
|
||||
<div class="window-color vjs-tracksetting">
|
||||
<label class="vjs-label">Window</label>
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
</fieldset>
|
||||
<fieldset class="window-color vjs-tracksetting">
|
||||
<legend>Window</legend>
|
||||
<label class="vjs-label" for="captions-window-color-${uniqueId}">Color</label>
|
||||
<select id="captions-window-color-${uniqueId}">
|
||||
<option value="#000" selected>Black</option>
|
||||
<option value="#FFF">White</option>
|
||||
<option value="#000">Black</option>
|
||||
<option value="#F00">Red</option>
|
||||
<option value="#0F0">Green</option>
|
||||
<option value="#00F">Blue</option>
|
||||
@ -301,59 +315,59 @@ function captionOptionsMenuTemplate() {
|
||||
<option value="#0FF">Cyan</option>
|
||||
</select>
|
||||
<span class="vjs-window-opacity vjs-opacity">
|
||||
<select>
|
||||
<option value="">---</option>
|
||||
<option value="1">Opaque</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="0">Transparent</option>
|
||||
</select>
|
||||
<label class="vjs-label" for="captions-window-opacity-${uniqueId}">Transparency</label>
|
||||
<select id="captions-window-opacity-${uniqueId}">
|
||||
<option value="0" selected>Transparent</option>
|
||||
<option value="0.5">Semi-Transparent</option>
|
||||
<option value="1">Opaque</option>
|
||||
</select>
|
||||
</span>
|
||||
</div> <!-- vjs-window-color -->
|
||||
</fieldset>
|
||||
</div> <!-- vjs-tracksettings-colors -->
|
||||
<div class="vjs-tracksettings-font">
|
||||
<div class="vjs-font-percent vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-font-size-${uniqueId}">Font Size</label>
|
||||
<select id="captions-font-size-${uniqueId}">
|
||||
<option value="0.50">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1.00" selected>100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.50">150%</option>
|
||||
<option value="1.75">175%</option>
|
||||
<option value="2.00">200%</option>
|
||||
<option value="3.00">300%</option>
|
||||
<option value="4.00">400%</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vjs-edge-style vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-edge-style-${uniqueId}">Text Edge Style</label>
|
||||
<select id="captions-edge-style-${uniqueId}">
|
||||
<option value="none" selected>None</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="depressed">Depressed</option>
|
||||
<option value="uniform">Uniform</option>
|
||||
<option value="dropshadow">Dropshadow</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vjs-font-family vjs-tracksetting">
|
||||
<label class="vjs-label" for="captions-font-family-${uniqueId}">Font Family</label>
|
||||
<select id="captions-font-family-${uniqueId}">
|
||||
<option value="proportionalSansSerif" selected>Proportional Sans-Serif</option>
|
||||
<option value="monospaceSansSerif">Monospace Sans-Serif</option>
|
||||
<option value="proportionalSerif">Proportional Serif</option>
|
||||
<option value="monospaceSerif">Monospace Serif</option>
|
||||
<option value="casual">Casual</option>
|
||||
<option value="script">Script</option>
|
||||
<option value="small-caps">Small Caps</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> <!-- vjs-tracksettings-font -->
|
||||
<div class="vjs-tracksettings-controls">
|
||||
<button class="vjs-default-button">Defaults</button>
|
||||
<button class="vjs-done-button">Done</button>
|
||||
</div>
|
||||
</div> <!-- vjs-tracksettings -->
|
||||
<div class="vjs-tracksettings-font">
|
||||
<div class="vjs-font-percent vjs-tracksetting">
|
||||
<label class="vjs-label">Font Size</label>
|
||||
<select>
|
||||
<option value="0.50">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1.00" selected>100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.50">150%</option>
|
||||
<option value="1.75">175%</option>
|
||||
<option value="2.00">200%</option>
|
||||
<option value="3.00">300%</option>
|
||||
<option value="4.00">400%</option>
|
||||
</select>
|
||||
</div> <!-- vjs-font-percent -->
|
||||
<div class="vjs-edge-style vjs-tracksetting">
|
||||
<label class="vjs-label">Text Edge Style</label>
|
||||
<select>
|
||||
<option value="none">None</option>
|
||||
<option value="raised">Raised</option>
|
||||
<option value="depressed">Depressed</option>
|
||||
<option value="uniform">Uniform</option>
|
||||
<option value="dropshadow">Dropshadow</option>
|
||||
</select>
|
||||
</div> <!-- vjs-edge-style -->
|
||||
<div class="vjs-font-family vjs-tracksetting">
|
||||
<label class="vjs-label">Font Family</label>
|
||||
<select>
|
||||
<option value="">Default</option>
|
||||
<option value="monospaceSerif">Monospace Serif</option>
|
||||
<option value="proportionalSerif">Proportional Serif</option>
|
||||
<option value="monospaceSansSerif">Monospace Sans-Serif</option>
|
||||
<option value="proportionalSansSerif">Proportional Sans-Serif</option>
|
||||
<option value="casual">Casual</option>
|
||||
<option value="script">Script</option>
|
||||
<option value="small-caps">Small Caps</option>
|
||||
</select>
|
||||
</div> <!-- vjs-font-family -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="vjs-tracksettings-controls">
|
||||
<button class="vjs-default-button">Defaults</button>
|
||||
<button class="vjs-done-button">Done</button>
|
||||
</div>`;
|
||||
</div> <!-- role="document" -->`;
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
@ -9,6 +9,16 @@ const tracks = [{
|
||||
label: 'test'
|
||||
}];
|
||||
|
||||
const defaultSettings = {
|
||||
backgroundColor: '#000',
|
||||
backgroundOpacity: '1',
|
||||
color: '#FFF',
|
||||
fontFamily: 'proportionalSansSerif',
|
||||
textOpacity: '1',
|
||||
windowColor: '#000',
|
||||
windowOpacity: '0'
|
||||
};
|
||||
|
||||
q.module('Text Track Settings', {
|
||||
beforeEach() {
|
||||
window.localStorage.clear();
|
||||
@ -20,13 +30,13 @@ test('should update settings', function() {
|
||||
tracks,
|
||||
persistTextTrackSettings: true
|
||||
});
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#FFF',
|
||||
color: '#F00',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@ -35,14 +45,14 @@ test('should update settings', function() {
|
||||
player.textTrackSettings.setValues(newSettings);
|
||||
deepEqual(player.textTrackSettings.getValues(), newSettings, 'values are updated');
|
||||
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 1, 'fg-color is set to new value');
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 2, 'fg-color is set to new value');
|
||||
equal(player.$('.vjs-bg-color > select').selectedIndex, 1, 'bg-color is set to new value');
|
||||
equal(player.$('.window-color > select').selectedIndex, 1, 'window-color is set to new value');
|
||||
equal(player.$('.vjs-text-opacity > select').selectedIndex, 1, 'text-opacity is set to new value');
|
||||
equal(player.$('.vjs-bg-opacity > select').selectedIndex, 1, 'bg-opacity is set to new value');
|
||||
equal(player.$('.vjs-window-opacity > select').selectedIndex, 1, 'window-opacity is set to new value');
|
||||
equal(player.$('.vjs-edge-style select').selectedIndex, 1, 'edge-style is set to new value');
|
||||
equal(player.$('.vjs-font-family select').selectedIndex, 1, 'font-family is set to new value');
|
||||
equal(player.$('.vjs-font-family select').selectedIndex, 3, 'font-family is set to new value');
|
||||
equal(player.$('.vjs-font-percent select').selectedIndex, 3, 'font-percent is set to new value');
|
||||
|
||||
Events.trigger(player.$('.vjs-done-button'), 'click');
|
||||
@ -71,8 +81,9 @@ test('should restore default settings', function() {
|
||||
Events.trigger(player.$('.vjs-default-button'), 'click');
|
||||
Events.trigger(player.$('.vjs-done-button'), 'click');
|
||||
|
||||
deepEqual(player.textTrackSettings.getValues(), {}, 'values are defaulted');
|
||||
deepEqual(window.localStorage.getItem('vjs-text-track-settings'), null, 'values are saved');
|
||||
deepEqual(player.textTrackSettings.getValues(), defaultSettings, 'values are defaulted');
|
||||
// MikeA: need to figure out how to modify saveSettings to factor in defaults are no longer null
|
||||
// deepEqual(window.localStorage.getItem('vjs-text-track-settings'), defaultSettings, 'values are saved');
|
||||
|
||||
equal(player.$('.vjs-fg-color > select').selectedIndex, 0, 'fg-color is set to default value');
|
||||
equal(player.$('.vjs-bg-color > select').selectedIndex, 0, 'bg-color is set to default value');
|
||||
@ -186,13 +197,13 @@ test('do not try to restore or save settings if persist option is not set', func
|
||||
|
||||
test('should restore saved settings', function() {
|
||||
let player;
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#FFF',
|
||||
color: '#F00',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@ -212,13 +223,13 @@ test('should restore saved settings', function() {
|
||||
|
||||
test('should not restore saved settings', function() {
|
||||
let player;
|
||||
let newSettings = {
|
||||
backgroundOpacity: '1',
|
||||
textOpacity: '1',
|
||||
windowOpacity: '1',
|
||||
const newSettings = {
|
||||
backgroundOpacity: '0.5',
|
||||
textOpacity: '0.5',
|
||||
windowOpacity: '0.5',
|
||||
edgeStyle: 'raised',
|
||||
fontFamily: 'monospaceSerif',
|
||||
color: '#FFF',
|
||||
color: '#F00',
|
||||
backgroundColor: '#FFF',
|
||||
windowColor: '#FFF',
|
||||
fontPercent: 1.25
|
||||
@ -231,7 +242,7 @@ test('should not restore saved settings', function() {
|
||||
persistTextTrackSettings: false
|
||||
});
|
||||
|
||||
deepEqual(player.textTrackSettings.getValues(), {});
|
||||
deepEqual(player.textTrackSettings.getValues(), defaultSettings);
|
||||
|
||||
player.dispose();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user