Bug 1395178 - The new buttons that can be added to the toolbar don't announce themselves to screen readers as buttons. r?jaws draft
authorDrew Willcoxon <adw@mozilla.com>
Wed, 30 Aug 2017 13:29:54 -0700
changeset 656199 27c38090a799a10301fc3dc405e090a95c2d8f04
parent 655774 ab2d700fda2b4934d24227216972dce9fac19b74
child 656236 3b985c81da5956314c4040f32b260eb24711ea66
child 656238 df5435e5be90e7fb2f0328abc953ac12fdf08487
push id77112
push userdwillcoxon@mozilla.com
push dateWed, 30 Aug 2017 20:39:25 +0000
reviewersjaws
bugs1395178
milestone57.0a1
Bug 1395178 - The new buttons that can be added to the toolbar don't announce themselves to screen readers as buttons. r?jaws MozReview-Commit-ID: AvQD9Z9ySfu
browser/base/content/browser-pageActions.js
browser/base/content/browser.xul
browser/extensions/pocket/bootstrap.js
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -334,16 +334,17 @@ var BrowserPageActions = {
     }
 
     return node;
   },
 
   _makeUrlbarButtonNode(action) {
     let buttonNode = document.createElement("image");
     buttonNode.classList.add("urlbar-icon", "urlbar-page-action");
+    buttonNode.setAttribute("role", "button");
     if (action.tooltip) {
       buttonNode.setAttribute("tooltiptext", action.tooltip);
     }
     if (action.iconURL) {
       buttonNode.style.listStyleImage = `url('${action.iconURL}')`;
     }
     buttonNode.setAttribute("context", "pageActionPanelContextMenu");
     buttonNode.addEventListener("contextmenu", event => {
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -876,43 +876,49 @@
               </box>
               <hbox id="page-action-buttons">
                 <hbox id="userContext-icons" hidden="true">
                   <label id="userContext-label"/>
                   <image id="userContext-indicator"/>
                 </hbox>
                 <image id="page-report-button"
                        class="urlbar-icon urlbar-page-action"
+                       role="button"
                        hidden="true"
                        tooltiptext="&pageReportIcon.tooltip;"
                        onmousedown="gPopupBlockerObserver.onReportButtonMousedown(event);"/>
                 <image id="reader-mode-button"
                        class="urlbar-icon urlbar-page-action"
+                       role="button"
                        hidden="true"
                        onclick="ReaderParent.buttonClick(event);"/>
                 <toolbarbutton id="urlbar-zoom-button"
                        onclick="FullZoom.reset();"
                        tooltip="dynamic-shortcut-tooltip"
                        hidden="true"/>
                 <box id="pageActionSeparator" class="urlbar-page-action"/>
                 <image id="pageActionButton"
                        class="urlbar-icon urlbar-page-action"
+                       role="button"
                        tooltiptext="&pageActionButton.tooltip;"
                        onclick="BrowserPageActions.mainButtonClicked(event);"/>
                 <hbox id="star-button-box"
                       hidden="true"
                       class="urlbar-icon-wrapper urlbar-page-action"
+                      role="button"
                       context="pageActionPanelContextMenu"
                       oncontextmenu="BrowserPageActions.onContextMenu(event);"
                       onclick="BrowserPageActions.bookmark.onUrlbarNodeClicked(event);">
                   <image id="star-button"
                          class="urlbar-icon"
+                         role="button"
                          observes="bookmarkThisPageBroadcaster"/>
                   <hbox id="star-button-animatable-box">
                     <image id="star-button-animatable-image"
+                           role="button"
                            observes="bookmarkThisPageBroadcaster"/>
                   </hbox>
                 </hbox>
               </hbox>
             </textbox>
         </toolbaritem>
 
         <toolbaritem id="search-container" title="&searchItem.title;"
--- a/browser/extensions/pocket/bootstrap.js
+++ b/browser/extensions/pocket/bootstrap.js
@@ -113,19 +113,25 @@ var PocketPageAction = {
           wrapper.setAttribute("context", "pageActionPanelContextMenu");
           wrapper.addEventListener("contextmenu", event => {
             window.BrowserPageActions.onContextMenu(event);
           });
           let animatableBox = doc.createElement("hbox");
           animatableBox.id = "pocket-animatable-box";
           let animatableImage = doc.createElement("image");
           animatableImage.id = "pocket-animatable-image";
+          animatableImage.setAttribute("role", "button");
+          let tooltip =
+            gPocketBundle.GetStringFromName("pocket-button.tooltiptext");
+          animatableImage.setAttribute("tooltiptext", tooltip);
           let pocketButton = doc.createElement("image");
           pocketButton.id = "pocket-button";
           pocketButton.classList.add("urlbar-icon");
+          pocketButton.setAttribute("role", "button");
+          pocketButton.setAttribute("tooltiptext", tooltip);
 
           wrapper.appendChild(pocketButton);
           wrapper.appendChild(animatableBox);
           animatableBox.appendChild(animatableImage);
           let iconBox = doc.getElementById("page-action-buttons");
           iconBox.appendChild(wrapper);
           wrapper.hidden = true;