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
--- 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;