Merge pull request #27722 from eeejay/bug-1068998

Bug 1068998 - Label video player buttons. r=djf

apps/gallery/index.html

@@ -20,6 +20,7 @@
     <meta name="availableLanguages" content="ar, en-US, fr, zh-TW">
     <link rel="localization" href="locales/gallery.{locale}.properties">
     <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
+    <link rel="localization" href="/shared/locales/media/media.{locale}.properties">
     <!-- Shared code -->
     <script defer src="shared/js/usertiming.js"></script>
     <script defer src="shared/js/performance_testing_helper.js"></script>

shared/js/media/video_player.js

@@ -23,11 +23,14 @@ function VideoPlayer(container) {
     container = document.getElementById(container);
   }
 
-  function newelt(parent, type, classes) {
+  function newelt(parent, type, classes, l10n_id) {
     var e = document.createElement(type);
     if (classes) {
       e.className = classes;
     }
+    if (l10n_id) {
+      e.dataset.l10nId = l10n_id;
+    }
     parent.appendChild(e);
     return e;
   }
@@ -36,9 +39,11 @@ function VideoPlayer(container) {
   var poster = newelt(container, 'img', 'videoPoster');
   var player = newelt(container, 'video', 'videoPlayer');
   var controls = newelt(container, 'div', 'videoPlayerControls');
-  var playbutton = newelt(controls, 'button', 'videoPlayerPlayButton');
+  var playbutton = newelt(controls, 'button', 'videoPlayerPlayButton',
+                          'playbackPlay');
   var footer = newelt(controls, 'div', 'videoPlayerFooter hidden');
-  var pausebutton = newelt(footer, 'button', 'videoPlayerPauseButton');
+  var pausebutton = newelt(footer, 'button', 'videoPlayerPauseButton',
+                           'playbackPause');
   var slider = newelt(footer, 'div', 'videoPlayerSlider');
   var elapsedText = newelt(slider, 'span', 'videoPlayerElapsedText');
   var progress = newelt(slider, 'div', 'videoPlayerProgress');
@@ -47,8 +52,8 @@ function VideoPlayer(container) {
   var playHead = newelt(progress, 'div', 'videoPlayerPlayHead');
   var durationText = newelt(slider, 'span', 'videoPlayerDurationText');
   // expose fullscreen button, so that client can manipulate it directly
-  var fullscreenButton = newelt(slider, 'button',
-                          'videoPlayerFullscreenButton');
+  var fullscreenButton = newelt(slider, 'button', 'videoPlayerFullscreenButton',
+                                'playbackFullscreen');
 
   this.poster = poster;
   this.player = player;

shared/locales/media/media.en-US.properties

@@ -0,0 +1,4 @@
+# Video controls
+playbackPlay.ariaLabel=Play
+playbackPause.ariaLabel=Pause
+playbackFullscreen.ariaLabel=Fullscreen