Bug 1551588 - Added a tab stop to the "info" and "dismiss" buttons in the FxA Bookmark Panel Message r=k88hudson
authorEmily McMinn <emily@mcminn.ca>
Fri, 30 Aug 2019 13:58:08 +0000
changeset 551375 089d52d6ad36eb3122cdfc6eacd2a6e0e5c42613
parent 551374 ef2853ccdc1162c25b9e36018c73dfd3eb3ea894
child 551376 87d437ca92a92161ad2d3dba4c4947ab16ca1ec4
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersk88hudson
bugs1551588
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1551588 - Added a tab stop to the "info" and "dismiss" buttons in the FxA Bookmark Panel Message r=k88hudson The Bookmark Panel Message now has tab stops on the info button, message dismiss icon, and message link, as well as all form fields and CTA buttons. Differential Revision: https://phabricator.services.mozilla.com/D42692
browser/base/content/browser.xhtml
browser/themes/shared/places/editBookmarkPanel.inc.css
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -264,17 +264,17 @@
            type="arrow"
            orient="vertical"
            ignorekeys="true"
            hidden="true"
            tabspecific="true"
            aria-labelledby="editBookmarkPanelTitle">
       <box class="panel-header">
         <label id="editBookmarkPanelTitle"/>
-        <toolbarbutton id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
+        <toolbarbutton tabindex="0" id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
           <image/>
         </toolbarbutton>
       </box>
       <html:div id="editBookmarkPanelInfoArea">
         <html:div id="editBookmarkPanelRecommendation"></html:div>
         <html:div id="editBookmarkPanelFaviconContainer">
           <html:img id="editBookmarkPanelFavicon"/>
         </html:div>
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -20,16 +20,21 @@
 .panel-info-button[checked] {
   background-color: var(--toolbarbutton-active-background);
 }
 
 .panel-info-button:hover {
   background-color: var(--toolbarbutton-hover-background);
 }
 
+.panel-info-button:focus {
+  background-color: var(--toolbarbutton-hover-background);
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
 .panel-info-button > image {
   list-style-image: url(chrome://browser/skin/identity-icon.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
   padding: 2px;
 }