mirror of
https://github.com/videojs/video.js.git
synced 2024-11-24 08:42:25 +02:00
fix(a11y): make seek-to-live better announce itself to screen reader users (#5651)
To make the seek-to-live component more accessible, we hide the text that says "LIVE" from screen readers and make it be purely for sighted users. Then set the control text to be either "Seek to live, currently playing live" or "Seek to live, currently behind live" to indicate what this control does and be informative around whether we are at edge or not. Then use aria-disabled on control if we are at edge.
This commit is contained in:
Brandon Casey
Gary Katsevman
parent
13b42ad05d
commit
165c120db0
@ -13,12 +13,13 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
## Status of translations
|
||||
|
||||
<!-- START langtable -->
|
||||
|
||||
| Language file | Missing translations |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------- |
|
||||
| ar.json (missing 51) | Audio Player |
|
||||
| ar.json (missing 53) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -67,9 +68,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| ba.json (missing 59) | Audio Player |
|
||||
| ba.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -126,9 +129,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| bg.json (missing 59) | Audio Player |
|
||||
| bg.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -185,9 +190,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| ca.json (missing 59) | Audio Player |
|
||||
| ca.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -244,11 +251,15 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| cs.json (Complete) | |
|
||||
| cy.json (Complete) | |
|
||||
| da.json (missing 59) | Audio Player |
|
||||
| cs.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| cy.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| da.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -305,10 +316,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| de.json (missing 1) | {1} is loading. |
|
||||
| el.json (missing 45) | Audio Player |
|
||||
| de.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| el.json (missing 47) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Volume Level |
|
||||
@ -351,9 +366,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| es.json (missing 58) | Audio Player |
|
||||
| es.json (missing 60) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -409,10 +426,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| fa.json (missing 1) | {1} is loading. |
|
||||
| fi.json (missing 59) | Audio Player |
|
||||
| fa.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| fi.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -469,10 +490,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| fr.json (missing 1) | {1} is loading. |
|
||||
| gl.json (missing 58) | Audio Player |
|
||||
| fr.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| gl.json (missing 60) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -528,10 +553,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| he.json (missing 1) | {1} is loading. |
|
||||
| hr.json (missing 59) | Audio Player |
|
||||
| he.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| hr.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -588,9 +617,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| hu.json (missing 59) | Audio Player |
|
||||
| hu.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -647,9 +678,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| it.json (missing 59) | Audio Player |
|
||||
| it.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -706,9 +739,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| ja.json (missing 59) | Audio Player |
|
||||
| ja.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -765,9 +800,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| ko.json (missing 59) | Audio Player |
|
||||
| ko.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -824,9 +861,11 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| nb.json (missing 59) | Audio Player |
|
||||
| nb.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -883,10 +922,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| nl.json (missing 1) | {1} is loading. |
|
||||
| nn.json (missing 59) | Audio Player |
|
||||
| nl.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| nn.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -943,10 +986,14 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| oc.json (missing 1) | {1} is loading. |
|
||||
| pl.json (missing 51) | Audio Player |
|
||||
| oc.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| pl.json (missing 53) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -995,9 +1042,12 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| pt-BR.json (Complete) | |
|
||||
| pt-PT.json (missing 44) | Audio Player |
|
||||
| pt-BR.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| pt-PT.json (missing 46) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Volume Level |
|
||||
@ -1040,11 +1090,15 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| ru.json (Complete) | |
|
||||
| sk.json (Complete) | |
|
||||
| sr.json (missing 59) | Audio Player |
|
||||
| ru.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| sk.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| sr.json (missing 61) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
@ -1101,67 +1155,12 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| sv.json (missing 59) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Descriptions |
|
||||
| | descriptions off |
|
||||
| | Audio Track |
|
||||
| | Volume Level |
|
||||
| | The media is encrypted and we do not have the keys to decrypt it. |
|
||||
| | Play Video |
|
||||
| | Close |
|
||||
| | Close Modal Dialog |
|
||||
| | Modal Window |
|
||||
| | This is a modal window |
|
||||
| | This modal can be closed by pressing the Escape key or activating the close button. |
|
||||
| | , opens captions settings dialog |
|
||||
| | , opens subtitles settings dialog |
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
| | Black |
|
||||
| | Red |
|
||||
| | Green |
|
||||
| | Blue |
|
||||
| | Yellow |
|
||||
| | Magenta |
|
||||
| | Cyan |
|
||||
| | Background |
|
||||
| | Window |
|
||||
| | Transparent |
|
||||
| | Semi-Transparent |
|
||||
| | Opaque |
|
||||
| | Font Size |
|
||||
| | Text Edge Style |
|
||||
| | None |
|
||||
| | Raised |
|
||||
| | Depressed |
|
||||
| | Uniform |
|
||||
| | Dropshadow |
|
||||
| | Font Family |
|
||||
| | Proportional Sans-Serif |
|
||||
| | Monospace Sans-Serif |
|
||||
| | Proportional Serif |
|
||||
| | Monospace Serif |
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Reset |
|
||||
| | restore all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| tr.json (missing 9) | Audio Player |
|
||||
| sv.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| tr.json (missing 11) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | Progress Bar |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | Volume Level |
|
||||
@ -1169,11 +1168,17 @@ This default value is hardcoded as a default to the localize method in the SeekB
|
||||
| | restore all settings to the default values |
|
||||
| | End of dialog window. |
|
||||
| | {1} is loading. |
|
||||
| uk.json (Complete) | |
|
||||
| vi.json (missing 1) | {1} is loading. |
|
||||
| zh-CN.json (missing 2) | progress bar timing: currentTime={1} duration={2} |
|
||||
| uk.json (missing 2) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| vi.json (missing 3) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | {1} is loading. |
|
||||
| zh-TW.json (missing 2) | progress bar timing: currentTime={1} duration={2} |
|
||||
| zh-CN.json (missing 4) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | {1} is loading. |
|
||||
| zh-TW.json (missing 4) | Seek to live, currently behind live |
|
||||
| | Seek to live, currently playing live |
|
||||
| | progress bar timing: currentTime={1} duration={2} |
|
||||
| | {1} is loading. |
|
||||
|
||||
<!-- END langtable -->
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
"Remaining Time": "Remaining Time",
|
||||
"Stream Type": "Stream Type",
|
||||
"LIVE": "LIVE",
|
||||
"Seek to live, currently behind live": "Seek to live, currently behind live",
|
||||
"Seek to live, currently playing live": "Seek to live, currently playing live",
|
||||
"Loaded": "Loaded",
|
||||
"Progress": "Progress",
|
||||
"Progress Bar": "Progress Bar",
|
||||
|
||||
@ -51,13 +51,13 @@
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.vjs-seek-to-live-control .vjs-seek-to-live-circle {
|
||||
.vjs-seek-to-live-control .vjs-icon-placeholder {
|
||||
margin-right: 0.5em;
|
||||
@extend .vjs-icon-circle;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
// make the live circle red when at the live edge
|
||||
.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-seek-to-live-circle {
|
||||
.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -42,19 +42,14 @@ class SeekToLive extends Button {
|
||||
className: 'vjs-seek-to-live-control vjs-control'
|
||||
});
|
||||
|
||||
this.contentEl_ = Dom.createEl('div', {
|
||||
className: 'vjs-seek-to-live',
|
||||
innerHTML: `<span class="vjs-control-text">${this.localize('Stream Type')}\u00a0</span>${this.localize('LIVE')}`
|
||||
this.textEl_ = Dom.createEl('span', {
|
||||
className: 'vjs-seek-to-live-text',
|
||||
innerHTML: this.localize('LIVE')
|
||||
}, {
|
||||
'aria-live': 'off'
|
||||
'aria-hidden': 'true'
|
||||
});
|
||||
|
||||
this.circleEl_ = Dom.createEl('span', {
|
||||
className: 'vjs-seek-to-live-circle'
|
||||
});
|
||||
|
||||
el.appendChild(this.circleEl_);
|
||||
el.appendChild(this.contentEl_);
|
||||
el.appendChild(this.textEl_);
|
||||
return el;
|
||||
}
|
||||
|
||||
@ -65,9 +60,13 @@ class SeekToLive extends Button {
|
||||
updateLiveEdgeStatus(e) {
|
||||
// default to live edge
|
||||
if (!this.player_.liveTracker || this.player_.liveTracker.atLiveEdge()) {
|
||||
this.setAttribute('aria-disabled', true);
|
||||
this.addClass('vjs-at-live-edge');
|
||||
this.controlText('Seek to live, currently playing live');
|
||||
} else {
|
||||
this.setAttribute('aria-disabled', false);
|
||||
this.removeClass('vjs-at-live-edge');
|
||||
this.controlText('Seek to live, currently behind live');
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,13 +86,13 @@ class SeekToLive extends Button {
|
||||
if (this.player_.liveTracker) {
|
||||
this.off(this.player_.liveTracker, 'liveedgechange', this.updateLiveEdgeStatus);
|
||||
}
|
||||
this.contentEl_ = null;
|
||||
this.circleEl_ = null;
|
||||
this.textEl_ = null;
|
||||
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SeekToLive.prototype.controlText_ = 'Seek to live, currently playing live';
|
||||
|
||||
Component.registerComponent('SeekToLive', SeekToLive);
|
||||
export default SeekToLive;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user