1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-25 02:42:10 +02:00

fix(time-display): restore hidden label text for screen readers. (#5157)

Restore hidden label text for screen readers that describes what the button control does.

Renames the Duration Time language item to Duration.

Deprecate controlText_ property.

Fix a typo in translations-needed.md.

Add a space in the hidden label for live-display, so that it doesn't run together with the visible "LIVE" indication.

Fixes #5135
This commit is contained in:
Owen Edwards 2018-05-11 11:02:52 -07:00 committed by Gary Katsevman
parent dc0d2bc187
commit 0aa827fac5
44 changed files with 111 additions and 71 deletions

View File

@ -45,8 +45,8 @@ Video.js uses a JSON object to describe a language, where the keys are English a
"Play": "Reproducción",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration Time": "Duración total",
"Remaining Time": "Tiempo restante"
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
}
```
@ -89,7 +89,7 @@ videojs.addLanguage('es', {
Play: 'Reproducción',
Pause: 'Pausa',
'Current Time': 'Tiempo reproducido',
'Duration Time': 'Duración total',
'Duration': 'Duración total',
'Remaining Time': 'Tiempo restante',
...
});

View File

@ -20,7 +20,7 @@
"Play": "Reproducción",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration Time": "Duración total",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
@ -65,7 +65,7 @@
"Play": "Reproducción",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration Time": "Duración total",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",

View File

@ -6,7 +6,7 @@ If you add or update a translation run `grunt check-translations` to update the
## Progress Bar Translations
The progress bar as a translation with a few token replacements.
The progress bar has a translation with a few token replacements.
They key is `progress bar timing: currentTime={1} duration={2}` and the default English value is `{1} of {2}`.
This default value is hardcoded as a default to the localize method in the SeekBar component.

View File

@ -2,7 +2,7 @@
"Play": "تشغيل",
"Pause": "إيقاف",
"Current Time": "الوقت الحالي",
"Duration Time": "مدة",
"Duration": "مدة",
"Remaining Time": "الوقت المتبقي",
"Stream Type": "نوع التيار",
"LIVE": "مباشر",

View File

@ -2,7 +2,7 @@
"Play": "Pusti",
"Pause": "Pauza",
"Current Time": "Trenutno vrijeme",
"Duration Time": "Vrijeme trajanja",
"Duration": "Vrijeme trajanja",
"Remaining Time": "Preostalo vrijeme",
"Stream Type": "Način strimovanja",
"LIVE": "UŽIVO",

View File

@ -2,7 +2,7 @@
"Play": "Възпроизвеждане",
"Pause": "Пауза",
"Current Time": "Текущо време",
"Duration Time": "Продължителност",
"Duration": "Продължителност",
"Remaining Time": "Оставащо време",
"Stream Type": "Тип на потока",
"LIVE": "НА ЖИВО",

View File

@ -2,7 +2,7 @@
"Play": "Reproducció",
"Pause": "Pausa",
"Current Time": "Temps reproduït",
"Duration Time": "Durada total",
"Duration": "Durada total",
"Remaining Time": "Temps restant",
"Stream Type": "Tipus de seqüència",
"LIVE": "EN DIRECTE",

View File

@ -2,7 +2,7 @@
"Play": "Přehrát",
"Pause": "Pauza",
"Current Time": "Aktuální čas",
"Duration Time": "Doba trvání",
"Duration": "Doba trvání",
"Remaining Time": "Zbývající čas",
"Stream Type": "Stream Type",
"LIVE": "ŽIVĚ",

View File

@ -2,7 +2,7 @@
"Play": "Afspil",
"Pause": "Pause",
"Current Time": "Aktuel tid",
"Duration Time": "Varighed",
"Duration": "Varighed",
"Remaining Time": "Resterende tid",
"Stream Type": "Stream-type",
"LIVE": "LIVE",

View File

@ -3,7 +3,7 @@
"Pause": "Pause",
"Replay": "Erneut abspielen",
"Current Time": "Aktueller Zeitpunkt",
"Duration Time": "Dauer",
"Duration": "Dauer",
"Remaining Time": "Verbleibende Zeit",
"Stream Type": "Streamtyp",
"LIVE": "LIVE",

View File

@ -2,7 +2,7 @@
"Play": "Aναπαραγωγή",
"Pause": "Παύση",
"Current Time": "Τρέχων χρόνος",
"Duration Time": "Συνολικός χρόνος",
"Duration": "Συνολικός χρόνος",
"Remaining Time": "Υπολοιπόμενος χρόνος",
"Stream Type": "Τύπος ροής",
"LIVE": "ΖΩΝΤΑΝΑ",

View File

@ -5,7 +5,7 @@
"Pause": "Pause",
"Replay": "Replay",
"Current Time": "Current Time",
"Duration Time": "Duration Time",
"Duration": "Duration",
"Remaining Time": "Remaining Time",
"Stream Type": "Stream Type",
"LIVE": "LIVE",

View File

@ -3,7 +3,7 @@
"Play Video": "Reproducción Vídeo",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration Time": "Duración total",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",

View File

@ -5,7 +5,7 @@
"Pause": "مکث",
"Replay": "بازپخش",
"Current Time": "زمان کنونی",
"Duration Time": "مدت زمان",
"Duration": "مدت زمان",
"Remaining Time": "زمان باقیمانده",
"Stream Type": "نوع استریم",
"LIVE": "زنده",

View File

@ -2,7 +2,7 @@
"Play": "Toisto",
"Pause": "Tauko",
"Current Time": "Tämänhetkinen aika",
"Duration Time": "Kokonaisaika",
"Duration": "Kokonaisaika",
"Remaining Time": "Jäljellä oleva aika",
"Stream Type": "Lähetystyyppi",
"LIVE": "LIVE",

View File

@ -5,7 +5,7 @@
"Pause": "Pause",
"Replay": "Revoir",
"Current Time": "Temps actuel",
"Duration Time": "Durée",
"Duration": "Durée",
"Remaining Time": "Temps restant",
"Stream Type": "Type de flux",
"LIVE": "EN DIRECT",

View File

@ -3,7 +3,7 @@
"Play Video": "Reprodución Vídeo",
"Pause": "Pausa",
"Current Time": "Tempo reproducido",
"Duration Time": "Duración total",
"Duration": "Duración total",
"Remaining Time": "Tempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",

View File

@ -5,7 +5,7 @@
"Pause": "השהה",
"Replay": "נַגֵּן שוב",
"Current Time": "זמן נוכחי",
"Duration Time": "זמן כולל",
"Duration": "זמן כולל",
"Remaining Time": "זמן נותר",
"Stream Type": "סוג Stream",
"LIVE": "שידור חי",

View File

@ -2,7 +2,7 @@
"Play": "Pusti",
"Pause": "Pauza",
"Current Time": "Trenutno vrijeme",
"Duration Time": "Vrijeme trajanja",
"Duration": "Vrijeme trajanja",
"Remaining Time": "Preostalo vrijeme",
"Stream Type": "Način strimovanja",
"LIVE": "UŽIVO",

View File

@ -2,7 +2,7 @@
"Play": "Lejátszás",
"Pause": "Szünet",
"Current Time": "Aktuális időpont",
"Duration Time": "Hossz",
"Duration": "Hossz",
"Remaining Time": "Hátralévő idő",
"Stream Type": "Adatfolyam típusa",
"LIVE": "ÉLŐ",

View File

@ -2,7 +2,7 @@
"Play": "Play",
"Pause": "Pausa",
"Current Time": "Orario attuale",
"Duration Time": "Durata",
"Duration": "Durata",
"Remaining Time": "Tempo rimanente",
"Stream Type": "Tipo del Streaming",
"LIVE": "LIVE",

View File

@ -2,7 +2,7 @@
"Play": "再生",
"Pause": "一時停止",
"Current Time": "現在の時間",
"Duration Time": "長さ",
"Duration": "長さ",
"Remaining Time": "残りの時間",
"Stream Type": "ストリームの種類",
"LIVE": "ライブ",

View File

@ -2,7 +2,7 @@
"Play": "재생",
"Pause": "일시중지",
"Current Time": "현재 시간",
"Duration Time": "지정 기간",
"Duration": "지정 기간",
"Remaining Time": "남은 시간",
"Stream Type": "스트리밍 유형",
"LIVE": "라이브",

View File

@ -2,7 +2,7 @@
"Play": "Spill",
"Pause": "Pause",
"Current Time": "Aktuell tid",
"Duration Time": "Varighet",
"Duration": "Varighet",
"Remaining Time": "Gjenstående tid",
"Stream Type": "Type strøm",
"LIVE": "DIREKTE",

View File

@ -5,7 +5,7 @@
"Pause": "Pauzeren",
"Replay": "Opnieuw afspelen",
"Current Time": "Huidige tijd",
"Duration Time": "Tijdsduur",
"Duration": "Tijdsduur",
"Remaining Time": "Resterende tijd",
"Stream Type": "Streamtype",
"LIVE": "LIVE",

View File

@ -2,7 +2,7 @@
"Play": "Spel",
"Pause": "Pause",
"Current Time": "Aktuell tid",
"Duration Time": "Varigheit",
"Duration": "Varigheit",
"Remaining Time": "Tid attende",
"Stream Type": "Type straum",
"LIVE": "DIREKTE",

View File

@ -2,7 +2,7 @@
"Play": "Odtwarzaj",
"Pause": "Pauza",
"Current Time": "Aktualny czas",
"Duration Time": "Czas trwania",
"Duration": "Czas trwania",
"Remaining Time": "Pozostały czas",
"Stream Type": "Typ strumienia",
"LIVE": "NA ŻYWO",

View File

@ -5,7 +5,7 @@
"Pause": "Pausar",
"Replay": "Tocar novamente",
"Current Time": "Tempo",
"Duration Time": "Duração",
"Duration": "Duração",
"Remaining Time": "Tempo Restante",
"Stream Type": "Tipo de Stream",
"LIVE": "AO VIVO",

View File

@ -3,7 +3,7 @@
"Pause": "Parar",
"Replay": "Reiniciar",
"Current Time": "Tempo Atual",
"Duration Time": "Duração",
"Duration": "Duração",
"Remaining Time": "Tempo Restante",
"Stream Type": "Tipo de Stream",
"LIVE": "EM DIRETO",

View File

@ -5,7 +5,7 @@
"Pause": "Приостановить",
"Replay": "Воспроизвести снова",
"Current Time": "Текущее время",
"Duration Time": "Продолжительность",
"Duration": "Продолжительность",
"Remaining Time": "Оставшееся время",
"Stream Type": "Тип потока",
"LIVE": "ОНЛАЙН",

View File

@ -5,7 +5,7 @@
"Pause": "Pozastaviť",
"Replay": "Prehrať znova",
"Current Time": "Aktuálny čas",
"Duration Time": "Čas trvania",
"Duration": "Čas trvania",
"Remaining Time": "Zostávajúci čas",
"Stream Type": "Typ stopy",
"LIVE": "NAŽIVO",

View File

@ -2,7 +2,7 @@
"Play": "Pusti",
"Pause": "Pauza",
"Current Time": "Trenutno vrijeme",
"Duration Time": "Vrijeme trajanja",
"Duration": "Vrijeme trajanja",
"Remaining Time": "Preostalo vrijeme",
"Stream Type": "Način strimovanja",
"LIVE": "UŽIVO",

View File

@ -2,7 +2,7 @@
"Play": "Spela",
"Pause": "Pausa",
"Current Time": "Aktuell tid",
"Duration Time": "Total tid",
"Duration": "Total tid",
"Remaining Time": "Återstående tid",
"Stream Type": "Strömningstyp",
"LIVE": "LIVE",

View File

@ -3,7 +3,7 @@
"Pause": "Duraklat",
"Replay": "Yeniden Oynat",
"Current Time": "Süre",
"Duration Time": "Toplam Süre",
"Duration": "Toplam Süre",
"Remaining Time": "Kalan Süre",
"Stream Type": "Yayın Tipi",
"LIVE": "CANLI",

View File

@ -2,7 +2,7 @@
"Play": "Відтворити",
"Pause": "Призупинити",
"Current Time": "Поточний час",
"Duration Time": "Тривалість",
"Duration": "Тривалість",
"Remaining Time": "Час, що залишився",
"Stream Type": "Тип потоку",
"LIVE": "НАЖИВО",

View File

@ -5,7 +5,7 @@
"Pause": "Tạm dừng",
"Replay": "Phát lại",
"Current Time": "Thời gian hiện tại",
"Duration Time": "Độ dài",
"Duration": "Độ dài",
"Remaining Time": "Thời gian còn lại",
"Stream Type": "Kiểu Stream",
"LIVE": "TRỰC TIẾP",

View File

@ -2,7 +2,7 @@
"Play": "播放",
"Pause": "暂停",
"Current Time": "当前时间",
"Duration Time": "时长",
"Duration": "时长",
"Remaining Time": "剩余时间",
"Stream Type": "媒体流类型",
"LIVE": "直播",

View File

@ -2,7 +2,7 @@
"Play": "播放",
"Pause": "暫停",
"Current Time": "目前時間",
"Duration Time": "總共時間",
"Duration": "總共時間",
"Remaining Time": "剩餘時間",
"Stream Type": "串流類型",
"LIVE": "直播",

View File

@ -17,30 +17,31 @@
<!-- Add support for Spanish 'es' -->
<script>
videojs.addLanguage('es', {
"Play": "Juego",
"Play": "Reproducción",
"Play Video": "Reproducción Vídeo",
"Pause": "Pausa",
"Current Time": "Tiempo Actual",
"Duration Time": "Tiempo de Duracion",
"Remaining Time": "Tiempo Restante",
"Stream Type": "Tipo de Transmision",
"LIVE": "En Vivo",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla Completa",
"Non-Fullscreen": "No Pantalla Completa",
"Mute": "Mudo",
"Unmute": "Activar sonido",
"Playback Rate": "Reproduccion Cambio",
"Subtitles": "Subtitulos",
"subtitles off": "subtitulos fuera",
"Captions": "Subtitulos",
"captions off": "subtitulos fuera",
"Chapters": "Capitulos",
"You aborted the video playback": "Ha anulado la reproduccion de video",
"A network error caused the video download to fail part-way.": "Un error en la red hizo que la descarga de video falle parte del camino.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "El video no se puede cargar, ya sea porque el servidor o la red fracasaron o porque el formato no es compatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproduccion de video se ha cancelado debido a un problema de corrupcion o porque el video utilizado cuenta con su navegador no soporta.",
"No compatible source was found for this video.": "Ninguna fuente compatible se encontro para este video."
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
"Mute": "Silenciar",
"Unmute": "No silenciado",
"Playback Rate": "Velocidad de reproducción",
"Subtitles": "Subtítulos",
"subtitles off": "Subtítulos desactivados",
"Captions": "Subtítulos especiales",
"captions off": "Subtítulos especiales desactivados",
"Chapters": "Capítulos",
"You aborted the media playback": "Ha interrumpido la reproducción del vídeo.",
"A network error caused the media download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this media.": "No se ha encontrado ninguna fuente compatible con este vídeo."
});
</script>

View File

@ -42,7 +42,7 @@ class LiveDisplay extends Component {
this.contentEl_ = Dom.createEl('div', {
className: 'vjs-live-display',
innerHTML: `<span class="vjs-control-text">${this.localize('Stream Type')}</span>${this.localize('LIVE')}`
innerHTML: `<span class="vjs-control-text">${this.localize('Stream Type')}\u00a0</span>${this.localize('LIVE')}`
}, {
'aria-live': 'off'
});

View File

@ -69,11 +69,21 @@ class CurrentTimeDisplay extends TimeDisplay {
}
/**
* The text that is added to the `CurrentTimeDisplay` for screen reader users.
*
* @type {string}
* @private
*/
CurrentTimeDisplay.prototype.labelText_ = 'Current Time';
/**
* The text that should display over the `CurrentTimeDisplay`s controls. Added to for localization.
*
* @type {string}
* @private
*
* @deprecated in v7; controlText_ is not used in non-active display Components
*/
CurrentTimeDisplay.prototype.controlText_ = 'Current Time';

View File

@ -66,12 +66,22 @@ class DurationDisplay extends TimeDisplay {
}
/**
* The text that should display over the `DurationDisplay`s controls. Added to for localization.
* The text that is added to the `DurationDisplay` for screen reader users.
*
* @type {string}
* @private
*/
DurationDisplay.prototype.controlText_ = 'Duration Time';
DurationDisplay.prototype.labelText_ = 'Duration';
/**
* The text that should display over the `DurationDisplay`s controls. Added to for localization.
*
* @type {string}
* @private
*
* @deprecated in v7; controlText_ is not used in non-active display Components
*/
DurationDisplay.prototype.controlText_ = 'Duration';
Component.registerComponent('DurationDisplay', DurationDisplay);
export default DurationDisplay;

View File

@ -47,6 +47,7 @@ class RemainingTimeDisplay extends TimeDisplay {
* @private
*/
formatTime_(time) {
// TODO: The "-" should be decorative, and not announced by a screen reader
return '-' + super.formatTime_(time);
}
@ -91,11 +92,21 @@ class RemainingTimeDisplay extends TimeDisplay {
}
}
/**
* The text that is added to the `RemainingTimeDisplay` for screen reader users.
*
* @type {string}
* @private
*/
RemainingTimeDisplay.prototype.labelText_ = 'Remaining Time';
/**
* The text that should display over the `RemainingTimeDisplay`s controls. Added to for localization.
*
* @type {string}
* @private
*
* @deprecated in v7; controlText_ is not used in non-active display Components
*/
RemainingTimeDisplay.prototype.controlText_ = 'Remaining Time';

View File

@ -38,18 +38,16 @@ class TimeDisplay extends Component {
createEl(plainName) {
const className = this.buildCSSClass();
const el = super.createEl('div', {
className: `${className} vjs-time-control vjs-control`
className: `${className} vjs-time-control vjs-control`,
innerHTML: `<span class="vjs-control-text">${this.localize(this.labelText_)}\u00a0</span>`
});
this.contentEl_ = Dom.createEl('div', {
this.contentEl_ = Dom.createEl('span', {
className: `${className}-display`
}, {
// tell screen readers not to automatically read the time as it changes
'aria-live': 'off'
}, Dom.createEl('span', {
className: 'vjs-control-text',
textContent: this.localize(this.controlText_)
}));
});
this.updateTextNode_();
el.appendChild(this.contentEl_);
@ -129,11 +127,21 @@ class TimeDisplay extends Component {
updateContent(event) {}
}
/**
* The text that is added to the `TimeDisplay` for screen reader users.
*
* @type {string}
* @private
*/
TimeDisplay.prototype.labelText_ = 'Time';
/**
* The text that should display over the `TimeDisplay`s controls. Added to for localization.
*
* @type {string}
* @private
*
* @deprecated in v7; controlText_ is not used in non-active display Components
*/
TimeDisplay.prototype.controlText_ = 'Time';