Merge pull request #30412 from yzen/bug-1162040-system

Bug 1162040 - updating accessibility for gaia-icons used in system app.

apps/system/index.html

@@ -225,7 +225,7 @@
             <div id="statusbar-tray">
             </div>
             <div id="notification-bar" class="fake-notification">
-              <div data-icon="notifications"></div>
+              <div data-icon="notifications" aria-hidden="true"></div>
               <div class="title-container">
                 <div id="notification-some" class="title" data-l10n-id="statusbarNotifications" data-l10n-args='{"n": "0"}'></div>
                 <button id="notification-clear" data-l10n-id="clear-all" disabled></button>
@@ -237,19 +237,19 @@
               <div id="attention-window-notifications-container"></div>
               <!-- Update Manager -->
               <div id="update-manager-container" class="fake-notification" role="link">
-                <div data-icon="download-circle"></div>
+                <div data-icon="download-circle" aria-hidden="true"></div>
                 <div class="title-container"></div>
                 <progress></progress>
               </div>
               <!-- Emergency callback manager -->
               <div id="emergency-callback-notification" class="fake-notification" hidden role="link">
-                <div data-icon="call-emergency" class="alert"></div>
+                <div data-icon="call-emergency" class="alert" aria-hidden="true"></div>
                 <div class="title-container" data-l10n-id="emergency-callback-mode"></div>
                 <div class="timer detail"></div>
               </div>
               <!-- Storage watcher notification -->
               <div id="storage-watcher-container" class="fake-notification" role="link">
-                <div data-icon="storage-circle"></div>
+                <div data-icon="storage-circle" aria-hidden="true"></div>
                 <div class="title-container"></div>
                 <div class="detail"></div>
               </div>
@@ -262,7 +262,7 @@
               <!-- IME list -->
               <div id="keyboard-show-ime-list">
                 <div class="fake-notification" role="link">
-                  <div data-icon="keyboard-circle"></div>
+                  <div data-icon="keyboard-circle" aria-hidden="true"></div>
                   <div class="title-container"></div>
                   <div class="detail"></div>
                 </div>
@@ -286,7 +286,7 @@
                 <div class="media-playback-controls" role="toolbar" data-l10n-id="mediaPlaybackControls">
                   <!-- XXX: These used to be button elements for prev/pause/next buttons but we are not able to receive contextmenu event from them. Change to div elements to make it work and able to fast seek from it (Bug 1017294) -->
                   <div data-icon="skip-back" class="previous" data-l10n-id="mediaPlaybackPrevious"></div>
-                  <div data-icon="play" class="play-pause"></div>
+                  <div data-icon="play" class="play-pause" data-l10n-id="mediaPlaybackPlay"></div>
                   <div data-icon="skip-forward" class="next" data-l10n-id="mediaPlaybackNext"></div>
                 </div>
               </div>
@@ -297,10 +297,10 @@
               <!-- Quick settings -->
               <div id="quick-settings" role="toolbar">
                 <ul>
-                  <li><a href="#" id="quick-settings-wifi" class="icon bb-button" data-icon="wifi-4" data-enabled="false" role="button"></a></li>
-                  <li><a href="#" id="quick-settings-airplane-mode" class="icon bb-button" data-icon="airplane" data-enabled="false" role="button"></a></li>
-                  <li><a href="#" id="quick-settings-bluetooth" class="icon bb-button" data-icon="bluetooth" data-enabled="false" role="button"></a></li>
-                  <li><a href="#" id="quick-settings-data" class="icon bb-button" data-icon="data" data-enabled="false" role="button"></a></li>
+                  <li><a href="#" id="quick-settings-wifi" class="icon bb-button" data-icon="wifi-4" data-enabled="false" role="button" data-l10n-id="quick-settings-wifiButton-off"></a></li>
+                  <li><a href="#" id="quick-settings-airplane-mode" class="icon bb-button" data-icon="airplane" data-enabled="false" role="button" data-l10n-id="quick-settings-airplaneMode-off"></a></li>
+                  <li><a href="#" id="quick-settings-bluetooth" class="icon bb-button" data-icon="bluetooth" data-enabled="false" role="button" data-l10n-id="quick-settings-bluetoothButton-off"></a></li>
+                  <li><a href="#" id="quick-settings-data" class="icon bb-button" data-icon="data" data-enabled="false" role="button" data-l10n-id="quick-settings-dataButton-off"></a></li>
                   <li><a href="#" id="quick-settings-full-app" class="icon bb-button" data-icon="settings" data-enabled="false" role="button" data-l10n-id="settingsButton"></a></li>
                 </ul>
               </div>

apps/system/js/app_install_manager.js

@@ -535,7 +535,7 @@
 
       var newNotif =
         `<div class="fake-notification" role="link">
-          <div data-icon="rocket" class="alert"></div>
+          <div data-icon="rocket" class="alert" aria-hidden="true"></div>
           <div class="title-container"></div>
           <progress></progress>
         </div>`;

apps/system/js/bluetooth_transfer.js

@@ -265,7 +265,7 @@ var BluetoothTransfer = {
       };
 
       var body = msg;
-      Service.request('showCustomDialog', 
+      Service.request('showCustomDialog',
         'cannotReceiveFile', body, confirm, null);
   },
 
@@ -385,7 +385,7 @@ var BluetoothTransfer = {
     // XXX: Bug 804533 - [Bluetooth]
     // Need sending/receiving icon for Bluetooth file transfer
     var content =
-      `<div data-icon="bluetooth-transfer-circle"></div>
+      `<div data-icon="bluetooth-transfer-circle" aria-hidden="true"></div>
       <div class="title-container">${transferMode}</div>
       <progress value="0" max="1"></progress>`;
 

apps/system/js/debugging_icon.js

@@ -14,6 +14,7 @@
   DebuggingIcon.prototype.view = function view() {
     return `<div id="statusbar-debugging"
               data-icon="bug"
+              data-l10n-id="statusbarDebugging"
               class="sb-icon sb-icon-debugging" hidden
               role="listitem">
             </div>`;

apps/system/js/media_recording.js

@@ -159,7 +159,7 @@
           messageElement, timerElement;
       /* create panel
        <div class="media-recording-status fake-notification" role="listitem">
-         <div data-icon="video"></div>
+         <div data-icon="video" aria-hidden="true"></div>
          <div class="title-container">
            <div class="origin"></div>
            <div class="timestamp"></div>
@@ -173,6 +173,7 @@
 
       iconElement = document.createElement('div');
       iconElement.dataset.icon = item.icon;
+      iconElement.setAttribute('aria-hidden', true);
       iconElement.className = 'alert';
       panelElement.appendChild(iconElement);
 

apps/system/js/quick_settings.js

@@ -194,8 +194,9 @@
       var wifiFirstSet = true;
       SettingsListener.observe('wifi.enabled', true, function(value) {
         // check self.wifi.dataset.enabled and value are identical
-        if ((self.wifi.dataset.enabled && value) ||
-          (self.wifi.dataset.enabled === undefined && !value)) {
+        if ((self.wifi.dataset.enabled === 'true' && value) ||
+          ((self.wifi.dataset.enabled === undefined ||
+            self.wifi.dataset.enabled === 'false') && !value)) {
           return;
         }
 
@@ -417,7 +418,7 @@
 
       this.overlay = document.getElementById('quick-settings');
     },
-    
+
     /**
      * XXX Break down obj keys in a for each loop because mozSettings
      * does not currently supports multiple keys in one set()
@@ -441,14 +442,12 @@
      * @memberof QuickSettings.prototype
      */
     setAccessibilityAttributes: function(button, label, type) {
-      label += button.dataset.enabled === undefined ? '-off' : '-on';
+      label = 'quick-settings-' + label +
+        (button.dataset.enabled === undefined ? '-off' : '-on');
       if (button.dataset.initializing !== undefined) {
         label += '-initializing';
       }
-
-      button.setAttribute('aria-label', navigator.mozL10n.get(label, {
-        type: type || ''
-      }));
+      navigator.mozL10n.setAttributes(button, label, { type: type || '' });
       button.setAttribute('aria-pressed', button.dataset.enabled !== undefined);
     },
 

apps/system/locales/system.en-US.properties

@@ -20,16 +20,16 @@ mediaPlaybackPlay.ariaLabel=Play
 mediaPlaybackPause.ariaLabel=Pause
 mediaPlaybackNext.ariaLabel=Next
 UnknownTrack=Unknown track
-wifiButton-on=Wi-Fi on
-wifiButton-on-initializing= Wi-Fi on, initializing
-wifiButton-off=Wi-Fi off
-dataButton-on=Data {{type}} on
-dataButton-off=Data {{type}} off
-bluetoothButton-on=Bluetooth on
-bluetoothButton-on-initializing= Bluetooth on, initializing
-bluetoothButton-off=Bluetooth off
-airplaneMode-on=Airplane mode on
-airplaneMode-off=Airplane mode off
+quick-settings-wifiButton-on.ariaLabel=Wi-Fi on
+quick-settings-wifiButton-on-initializing.ariaLabel=Wi-Fi on, initializing
+quick-settings-wifiButton-off.ariaLabel=Wi-Fi off
+quick-settings-dataButton-on.ariaLabel=Data {{type}} on
+quick-settings-dataButton-off.ariaLabel=Data {{type}} off
+quick-settings-bluetoothButton-on.ariaLabel=Bluetooth on
+quick-settings-bluetoothButton-on-initializing.ariaLabel=Bluetooth on, initializing
+quick-settings-bluetoothButton-off.ariaLabel=Bluetooth off
+quick-settings-airplaneMode-on.ariaLabel=Airplane mode on
+quick-settings-airplaneMode-off.ariaLabel=Airplane mode off
 settingsButton.ariaLabel=Settings
 utilityTray.ariaLabel=Utility tray
 simLabel=SIM {{id}}
@@ -81,6 +81,7 @@ statusbarNotifications-unread.ariaLabel[two]={{n}} unread notifications
 statusbarNotifications-unread.ariaLabel[few]={{n}} unread notifications
 statusbarNotifications-unread.ariaLabel[many]={{n}} unread notifications
 statusbarNotifications-unread.ariaLabel[other]={{n}} unread notifications
+statusbarDebugging.ariaLabel=Debugging
 
 # notifications
 notifications=Notifications

apps/system/lockscreen/js/lockscreen_media_playback.js

@@ -122,18 +122,16 @@ LockScreenMediaPlaybackWidget.prototype = {
   },
 
   updatePlaybackStatus: function mp_updatePlaybackStatus(status) {
-    var _ = navigator.mozL10n.get;
     switch (status.playStatus) {
       case 'PLAYING':
         this.hidden = false;
         this.playPauseButton.dataset.icon = 'pause';
-        this.playPauseButton.setAttribute('aria-label',
-          _('mediaPlaybackPause'));
+        this.playPauseButton.setAttribute('data-l10n-id', 'mediaPlaybackPause');
         break;
       case 'PAUSED':
         this.hidden = false;
         this.playPauseButton.dataset.icon = 'play';
-        this.playPauseButton.setAttribute('aria-label', _('mediaPlaybackPlay'));
+        this.playPauseButton.setAttribute('data-l10n-id', 'mediaPlaybackPlay');
         break;
       case 'STOPPED':
         this.hidden = true;

apps/system/lockscreen/lockscreen.html

@@ -76,7 +76,7 @@
           <div class="media-playback-controls" role="toolbar" data-l10n-id="mediaPlaybackControls">
             <!-- XXX: These used to be button elements for prev/pause/next buttons but we are not able to receive contextmenu event from them. Change to div elements to make it work and able to fast seek from it (Bug 1017294) -->
             <div data-icon="skip-back" class="previous" data-l10n-id="mediaPlaybackPrevious"></div>
-            <div data-icon="play" class="play-pause"></div>
+            <div data-icon="play" class="play-pause" data-l10n-id="mediaPlaybackPlay"></div>
             <div data-icon="skip-forward" class="next" data-l10n-id="mediaPlaybackNext"></div>
           </div>
         </div>

apps/system/test/unit/device_storage_watcher_test.js

@@ -45,7 +45,7 @@ suite('system/DeviceStorageWatcher >', function() {
     fakeNotif = document.createElement('div');
     fakeNotif.id = 'storage-watcher-container';
     fakeNotif.innerHTML = [
-      '<div data-icon="storage-circle"></div>',
+      '<div data-icon="storage-circle" aria-hidden="true"></div>',
       '<div class="title-container"></div>',
       '<div class="detail"></div>'
     ].join('');

apps/system/test/unit/update_manager_test.js

@@ -144,7 +144,7 @@ suite('system/UpdateManager', function() {
     fakeNode = document.createElement('div');
     fakeNode.id = 'update-manager-container';
     fakeNode.innerHTML = [
-      '<div data-icon="download-circle"></div>',
+      '<div data-icon="download-circle" aria-hidden="true"></div>',
       '<div class="title-container"></div>',
       '<progress></progress>'
     ].join('');