Bug 1608923 - reuse some DTD strings so at least play/pause and the mute/unmute button are labeled, r=mconley
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 20 Jan 2020 19:26:15 +0000
changeset 510854 cf65ab95f9113fdba6d59e8181531f44c86b0e3b
parent 510853 7a7c58a7ef50ea9fa20955b96fd24f4681680b23
child 510855 c714bda799cfceab2574f72df25d1b2203ab90ad
push id37036
push userdvarga@mozilla.com
push dateTue, 21 Jan 2020 00:17:43 +0000
treeherdermozilla-central@83b429758070 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1608923
milestone74.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1608923 - reuse some DTD strings so at least play/pause and the mute/unmute button are labeled, r=mconley Differential Revision: https://phabricator.services.mozilla.com/D60199
toolkit/components/pictureinpicture/content/player.js
toolkit/components/pictureinpicture/content/player.xhtml
--- a/toolkit/components/pictureinpicture/content/player.js
+++ b/toolkit/components/pictureinpicture/content/player.js
@@ -272,16 +272,20 @@ let Player = {
 
   /**
    * Set isPlaying to true if the video is playing, false otherwise. This will
    * update the internal state and displayed controls.
    */
   set isPlaying(isPlaying) {
     this._isPlaying = isPlaying;
     this.controls.classList.toggle("playing", isPlaying);
+    const playButton = document.getElementById("playpause");
+    let attrName = isPlaying ? "pauselabel" : "playlabel";
+    let accessibleLabel = playButton.getAttribute(attrName);
+    playButton.setAttribute("aria-label", accessibleLabel);
   },
 
   _isMuted: false,
   /**
    * isMuted returns true if the video is currently muted.
    *
    * @return Boolean
    */
@@ -291,16 +295,20 @@ let Player = {
 
   /**
    * Set isMuted to true if the video is muted, false otherwise. This will
    * update the internal state and displayed controls.
    */
   set isMuted(isMuted) {
     this._isMuted = isMuted;
     this.controls.classList.toggle("muted", isMuted);
+    const audioButton = document.getElementById("audio");
+    let attrName = isMuted ? "unmutelabel" : "mutelabel";
+    let accessibleLabel = audioButton.getAttribute(attrName);
+    audioButton.setAttribute("aria-label", accessibleLabel);
   },
 
   recordEvent(type, args) {
     Services.telemetry.recordEvent(
       "pictureinpicture",
       type,
       "player",
       this.id,
--- a/toolkit/components/pictureinpicture/content/player.xhtml
+++ b/toolkit/components/pictureinpicture/content/player.xhtml
@@ -1,16 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE system [
+  <!ENTITY % videocontrolsDTD
+    SYSTEM "chrome://global/locale/videocontrols.dtd">
+  %videocontrolsDTD;
+]>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<!DOCTYPE html [
-  <!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
-  %htmlDTD;
-]>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       windowtype="Toolkit:PictureInPicture"
       chromemargin="0,0,0,0">
   <head>
     <meta charset="utf-8"/>
     <link rel="stylesheet" type="text/css"
           href="chrome://global/skin/pictureinpicture/player.css"/>
@@ -24,15 +25,19 @@
       <xul:browser type="content" primary="true" remote="true" remoteType="web" id="browser" tabindex="-1"></xul:browser>
     </div>
     <div id="controls">
       <button id="close" class="control-item" tabindex="3"></button>
 
       <div id="controls-bottom">
         <button id="unpip" class="control-item" tabindex="2"></button>
         <div class="gap"></div>
-        <button id="playpause" class="control-item" tabindex="1" autofocus="true"></button>
+        <button id="playpause" class="control-item" tabindex="1" autofocus="true"
+                playlabel="&playButton.playLabel;"
+                pauselabel="&playButton.pauseLabel;"/>
         <div class="gap" hidden="true"></div>
-        <button id="audio" class="control-item" hidden="true" tabindex="1"></button>
+        <button id="audio" class="control-item" hidden="true" tabindex="1"
+                mutelabel="&muteButton.muteLabel;"
+                unmutelabel="&muteButton.unmuteLabel;"/>
       </div>
     </div>
   </body>
 </html>