fix: localize aria-labels (#4027)

Fixes #2728.
videojs · Feb 8, 2017 · 0ac1269 · 0ac1269
1 parent eddc1d7
commit 0ac1269
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 61 deletions.
diff --git a/docs/translations-needed.md b/docs/translations-needed.md
diff --git a/lang/en.json b/lang/en.json
@@ -1,4 +1,6 @@
 {
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
   "Play": "Play",
   "Pause": "Pause",
   "Replay": "Replay",
@@ -9,6 +11,7 @@
   "LIVE": "LIVE",
   "Loaded": "Loaded",
   "Progress": "Progress",
+  "Progress Bar": "Progress Bar",
   "Fullscreen": "Fullscreen",
   "Non-Fullscreen": "Non-Fullscreen",
   "Mute": "Mute",
@@ -19,10 +22,10 @@
   "Captions": "Captions",
   "captions off": "captions off",
   "Chapters": "Chapters",
-  "Close Modal Dialog": "Close Modal Dialog",
   "Descriptions": "Descriptions",
   "descriptions off": "descriptions off",
   "Audio Track": "Audio Track",
+  "Volume Level": "Volume Level",
   "You aborted the media playback": "You aborted the media playback",
   "A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
@@ -31,6 +34,7 @@
   "The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it.",
   "Play Video": "Play Video",
   "Close": "Close",
+  "Close Modal Dialog": "Close Modal Dialog",
   "Modal Window": "Modal Window",
   "This is a modal window": "This is a modal window",
   "This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",

diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
@@ -48,7 +48,7 @@ class SeekBar extends Slider {
     return super.createEl('div', {
       className: 'vjs-progress-holder'
     }, {
-      'aria-label': 'progress bar'
+      'aria-label': this.localize('Progress Bar')
     });
   }
 

diff --git a/src/js/control-bar/volume-control/volume-bar.js b/src/js/control-bar/volume-control/volume-bar.js
@@ -40,7 +40,7 @@ class VolumeBar extends Slider {
     return super.createEl('div', {
       className: 'vjs-volume-bar vjs-slider-bar'
     }, {
-      'aria-label': 'volume level',
+      'aria-label': this.localize('Volume Level'),
       'aria-live': 'polite'
     });
   }

diff --git a/src/js/modal-dialog.js b/src/js/modal-dialog.js
@@ -129,7 +129,7 @@ class ModalDialog extends Component {
    *         the localized or raw label of this modal.
    */
   label() {
-    return this.options_.label || this.localize('Modal Window');
+    return this.localize(this.options_.label || 'Modal Window');
   }
 
   /**

diff --git a/src/js/player.js b/src/js/player.js
@@ -412,9 +412,9 @@ class Player extends Component {
     // Set ARIA label and region role depending on player type
     this.el_.setAttribute('role', 'region');
     if (this.isAudio()) {
-      this.el_.setAttribute('aria-label', 'audio player');
+      this.el_.setAttribute('aria-label', this.localize('Audio Player'));
     } else {
-      this.el_.setAttribute('aria-label', 'video player');
+      this.el_.setAttribute('aria-label', this.localize('Video Player'));
     }
 
     if (this.isAudio()) {

diff --git a/test/unit/player.test.js b/test/unit/player.test.js
@@ -1000,7 +1000,7 @@ QUnit.test('should add a video player region if a video el is used', function(as
   const player = TestHelpers.makePlayer({}, video);
 
   assert.ok(player.el().getAttribute('role') === 'region', 'region role is present');
-  assert.ok(player.el().getAttribute('aria-label') === 'video player', 'video player label present');
+  assert.ok(player.el().getAttribute('aria-label') === 'Video Player', 'Video Player label present');
   player.dispose();
 });
 
@@ -1009,7 +1009,7 @@ QUnit.test('should add an audio player region if an audio el is used', function(
   const player = TestHelpers.makePlayer({}, audio);
 
   assert.ok(player.el().getAttribute('role') === 'region', 'region role is present');
-  assert.ok(player.el().getAttribute('aria-label') === 'audio player', 'audio player label present');
+  assert.ok(player.el().getAttribute('aria-label') === 'Audio Player', 'Audio Player label present');
   player.dispose();
 });