Bug 1131458 - Make reader mode button accessible. r=Gijs

browser/base/content/browser.xul

@@ -816,10 +816,11 @@
                        hidden="true"
                        tooltiptext="&pageReportIcon.tooltip;"
                        onclick="gPopupBlockerObserver.onReportButtonClick(event);"/>
-                <image id="reader-mode-button"
-                       class="urlbar-icon"
-                       hidden="true"
-                       onclick="ReaderParent.toggleReaderMode(event);"/>
+                <toolbarbutton id="reader-mode-button"
+                               class="tabbable"
+                               hidden="true"
+                               onclick="ReaderParent.handleReaderButtonEvent(event);"
+                               onkeypress="ReaderParent.handleReaderButtonEvent(event);"/>
               </hbox>
               <toolbarbutton id="urlbar-go-button"
                              class="chromeclass-toolbar-additional"

browser/locales/en-US/chrome/browser/readerMode.properties

@@ -0,0 +1,6 @@
+# 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/.
+
+readerMode.enter=Enter Reader Mode
+readerMode.exit=Exit Reader Mode

browser/locales/jar.mn

@@ -138,6 +138,7 @@
     locale/browser/preferences/tabs.dtd               (%chrome/browser/preferences/tabs.dtd)
     locale/browser/preferences/search.dtd             (%chrome/browser/preferences/search.dtd)
     locale/browser/preferences/translation.dtd        (%chrome/browser/preferences/translation.dtd)
+    locale/browser/readerMode.properties              (%chrome/browser/readerMode.properties)
 #ifdef MOZ_SERVICES_SYNC
     locale/browser/syncBrand.dtd                (%chrome/browser/syncBrand.dtd)
     locale/browser/syncSetup.dtd                (%chrome/browser/syncSetup.dtd)

browser/modules/ReaderParent.jsm

@@ -15,6 +15,8 @@ Cu.import("resource://gre/modules/Task.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "ReaderMode", "resource://gre/modules/ReaderMode.jsm");
 
+const gStringBundle = Services.strings.createBundle("chrome://browser/locale/readerMode.properties");
+
 let ReaderParent = {
 
   MESSAGES: [
@@ -101,13 +103,23 @@ let ReaderParent = {
     if (browser.currentURI.spec.startsWith("about:reader")) {
       button.setAttribute("readeractive", true);
       button.hidden = false;
+      button.setAttribute("tooltiptext", gStringBundle.GetStringFromName("readerMode.exit"));
     } else {
       button.removeAttribute("readeractive");
+      button.setAttribute("tooltiptext", gStringBundle.GetStringFromName("readerMode.enter"));
       button.hidden = !browser.isArticle;
     }
   },
 
-  toggleReaderMode: function(event) {
+  handleReaderButtonEvent: function(event) {
+    event.stopPropagation();
+
+    if ((event.type == "click" && event.button != 0) ||
+        (event.type == "keypress" && event.charCode != Ci.nsIDOMKeyEvent.DOM_VK_SPACE &&
+         event.keyCode != Ci.nsIDOMKeyEvent.DOM_VK_RETURN)) {
+      return; // Left click, space or enter only
+    }
+
     let win = event.target.ownerDocument.defaultView;
     let url = win.gBrowser.selectedBrowser.currentURI.spec;
     if (url.startsWith("about:reader")) {

browser/themes/linux/browser.css

@@ -1617,10 +1617,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 /* Reader mode button */
 
 #reader-mode-button {
+  -moz-appearance: none;
+  padding: 0;
   list-style-image: url("chrome://browser/skin/reader-mode-16.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#reader-mode-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#reader-mode-button:focus {
+  outline: 1px dotted;
+}
+
 #reader-mode-button:hover:active,
 #reader-mode-button[readeractive] {
    -moz-image-region: rect(0, 32px, 16px, 16px);

browser/themes/osx/browser.css

@@ -2521,20 +2521,29 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-
 /* Reader mode button */
 
 #reader-mode-button {
+  -moz-appearance: none;
+  padding: 0;
   list-style-image: url("chrome://browser/skin/reader-mode-16.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#reader-mode-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#reader-mode-button:focus {
+  @hudButtonFocused@
+}
+
 #reader-mode-button:hover:active,
 #reader-mode-button[readeractive] {
    -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 @media (min-resolution: 2dppx) {
-  #reader-mode-button{
+  #reader-mode-button {
     list-style-image: url("chrome://browser/skin/reader-mode-16@2x.png");
     -moz-image-region: rect(0, 32px, 32px, 0);
-    width: 22px;
   }
 
   #reader-mode-button:hover:active,

browser/themes/windows/browser.css

@@ -1579,10 +1579,20 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 /* Reader mode button */
 
 #reader-mode-button {
+  -moz-appearance: none;
+  padding: 0;
   list-style-image: url("chrome://browser/skin/reader-mode-16.png");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
+#reader-mode-button > .toolbarbutton-icon {
+  width: 16px;
+}
+
+#reader-mode-button:focus {
+  outline: 1px dotted;
+}
+
 #reader-mode-button:hover:active,
 #reader-mode-button[readeractive] {
    -moz-image-region: rect(0, 32px, 16px, 16px);