Bug 1229206 - Labels for screen readers are missing from about:preferences#sync. r=markh

browser/components/preferences/in-content/sync.js

@@ -271,9 +271,7 @@ var gSyncPane = {
       gSyncPane.signIn();
       return false;
     });
-    setEventListener("verifiedManage", "click",
-      gSyncPane.manageFirefoxAccount);
-    setEventListener("fxaUnlinkButton", "click", function () {
+    setEventListener("fxaUnlinkButton", "command", function () {
       gSyncPane.unlinkFirefoxAccount(true);
     });
     setEventListener("verifyFxaAccount", "command",
@@ -550,13 +548,34 @@ var gSyncPane = {
     this._openAboutAccounts("reauth");
   },
 
-  openChangeProfileImage: function() {
-    fxAccounts.promiseAccountsChangeProfileURI(this._getEntryPoint(), "avatar")
-      .then(url => {
+
+  clickOrSpaceOrEnterPressed: function(event) {
+    // Note: charCode is deprecated, but 'char' not yet implemented.
+    // Replace charCode with char when implemented, see Bug 680830
+    if ((event.type == "click" && event.button == 0) ||    // button 0 = 'main button', typically left click.
+        (event.type == "keypress" &&
+        (event.charCode == KeyEvent.DOM_VK_SPACE || event.keyCode == KeyEvent.DOM_VK_RETURN))) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  openChangeProfileImage: function(event) {
+    if (this.clickOrSpaceOrEnterPressed(event)) {
+      fxAccounts.promiseAccountsChangeProfileURI(this._getEntryPoint(), "avatar")
+          .then(url => {
         this.openContentInBrowser(url, {
           replaceQueryString: true
         });
       });
+    }
+  },
+
+  openManageFirefoxAccount: function(event) {
+    if (this.clickOrSpaceOrEnterPressed(event)) {
+      this.manageFirefoxAccount();
+    }
   },
 
   manageFirefoxAccount: function() {

browser/components/preferences/in-content/sync.xul

@@ -199,8 +199,8 @@
               <vbox flex="1">
                 <label id="signedOutAccountBoxTitle">&signedOut.accountBox.title;</label>
                 <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="noFxaSignUp">&signedOut.accountBox.create;</button>
-                  <button id="noFxaSignIn">&signedOut.accountBox.signin;</button>
+                  <button id="noFxaSignUp" label="&signedOut.accountBox.create;"></button>
+                  <button id="noFxaSignIn" label="&signedOut.accountBox.signin;"></button>
                 </hbox>
               </vbox>
             </hbox>
@@ -234,16 +234,21 @@
             <!-- logged in and verified and all is good -->
             <hbox id="fxaLoginVerified" class="fxaAccountBox">
               <vbox>
-                <image id="fxaProfileImage"
-                    onclick="gSyncPane.openChangeProfileImage();" hidden="true"
-                    tooltiptext="&profilePicture.tooltip;" class="actionable"/>
+                <image id="fxaProfileImage" class="actionable"
+                    role="button"
+                    onclick="gSyncPane.openChangeProfileImage(event);" hidden="true"
+                    onkeypress="gSyncPane.openChangeProfileImage(event);"
+                    tooltiptext="&profilePicture.tooltip;"/>
               </vbox>
               <vbox flex="1">
                 <label id="fxaEmailAddress1"/>
                 <label id="fxaDisplayName" hidden="true"/>
                 <hbox class="fxaAccountBoxButtons" align="center">
-                  <button id="fxaUnlinkButton">&disconnect.label;</button>
-                  <label id="verifiedManage" class="text-link">&verifiedManage.label;</label>
+                  <button id="fxaUnlinkButton" label="&disconnect.label;"/>
+                  <label id="verifiedManage" class="text-link"
+                         onclick="gSyncPane.openManageFirefoxAccount(event);"
+                         onkeypress="gSyncPane.openManageFirefoxAccount(event);"><!--
+                  -->&verifiedManage.label;</label>
                 </hbox>
               </vbox>
             </hbox>

browser/themes/linux/preferences/in-content/preferences.css

@@ -25,6 +25,10 @@
   margin-top: 2px !important;
 }
 
+#fxaProfileImage {
+  -moz-user-focus: normal;
+}
+
 menulist.actionsMenu > .menulist-dropmarker {
   margin-top: 11px;
   margin-bottom: 11px;

browser/themes/osx/preferences/in-content/preferences.css

@@ -19,6 +19,10 @@ prefpane .groupbox-title {
   -moz-padding-start: 3px;
 }
 
+#fxaProfileImage {
+  -moz-user-focus: normal;
+}
+
 textbox + button {
   -moz-margin-start: -4px;
 }

browser/themes/windows/preferences/in-content/preferences.css

@@ -51,6 +51,10 @@ filefield + button {
   padding-bottom: 0; /* override padding from normal preferences.css */
 }
 
+#fxaProfileImage {
+  -moz-user-focus: normal;
+}
+
 /**
  * Dialog
  */