Bug 1506510 - add keyboard focus styling for toolbar/urlbar buttons. r=dao
authorYura Zenevich <yura.zenevich@gmail.com>
Fri, 15 Mar 2019 04:35:09 +0000
changeset 464405 19ec728351acee967f424397f9f3e1b11e11c0f3
parent 464404 1391a8e0183535b6f56586c844d2bbcc543e8237
child 464406 3204779395ce6e90bfb39558484641a2d63d2fa7
push id35716
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:42:17 +0000
treeherdermozilla-central@8ee97c045359 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1506510
milestone67.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 1506510 - add keyboard focus styling for toolbar/urlbar buttons. r=dao Differential Revision: https://phabricator.services.mozilla.com/D19958
browser/app/profile/firefox.js
browser/base/content/test/general/browser_bug462289.js
browser/base/content/test/popupNotifications/browser_popupNotification_keyboard.js
browser/base/content/test/siteIdentity/browser_identityBlock_focus.js
browser/base/content/test/siteIdentity/browser_identityPopup_focus.js
browser/base/content/test/tabs/browser_multiselect_tabs_using_keyboard.js
browser/components/search/test/browser/browser_searchbar_openpopup.js
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1839,9 +1839,9 @@ pref("prio.enabled", true);
 pref("browser.discovery.enabled", true);
 pref("browser.discovery.containers.enabled", true);
 pref("browser.discovery.sites", "addons.mozilla.org");
 
 pref("browser.engagement.recent_visited_origins.expiry", 86400); // 24 * 60 * 60 (24 hours in seconds)
 
 pref("browser.aboutConfig.showWarning", true);
 
-pref("browser.toolbars.keyboard_navigation", false);
+pref("browser.toolbars.keyboard_navigation", true);
--- a/browser/base/content/test/general/browser_bug462289.js
+++ b/browser/base/content/test/general/browser_bug462289.js
@@ -25,19 +25,22 @@ function step2() {
   EventUtils.synthesizeMouseAtCenter(tab1, {});
   setTimeout(step3, 0);
 }
 
 function step3() {
   is(gBrowser.selectedTab, tab1, "2nd click on selected tab1 keeps tab selected");
   isnot(document.activeElement, tab1, "2nd click on selected tab1 does not activate tab");
 
-  ok(true, "focusing URLBar then sending 1 Shift+Tab.");
+  ok(true, "focusing URLBar then sending 2 Shift+Tab.");
   gURLBar.focus();
   EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
+  info(`Focus is now on Home button (#${document.activeElement.id})`);
+  EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
+
   is(gBrowser.selectedTab, tab1, "tab key to selected tab1 keeps tab selected");
   is(document.activeElement, tab1, "tab key to selected tab1 activates tab");
 
   EventUtils.synthesizeMouseAtCenter(tab1, {});
   setTimeout(step4, 0);
 }
 
 function step4() {
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_keyboard.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_keyboard.js
@@ -7,16 +7,28 @@ function test() {
 
   ok(PopupNotifications, "PopupNotifications object exists");
   ok(PopupNotifications.panel, "PopupNotifications panel exists");
 
   // Force tabfocus for all elements on OSX.
   SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]}).then(setup);
 }
 
+// Focusing on notification icon buttons is handled by the ToolbarKeyboardNavigator
+// component and arrow keys (see browser/base/content/browser-toolbarKeyNav.js).
+function focusNotificationAnchor(anchor) {
+  let urlbarContainer = anchor.closest("#urlbar-container");
+  urlbarContainer.querySelector("toolbartabstop").focus();
+  const identityBox = urlbarContainer.querySelector("#identity-box");
+  is(document.activeElement, identityBox, "Identity box is focused.");
+  while (document.activeElement !== anchor) {
+    EventUtils.synthesizeKey("ArrowRight");
+  }
+}
+
 var tests = [
   // Test that for persistent notifications,
   // the secondary action is triggered by pressing the escape key.
   { id: "Test#1",
     run() {
       this.notifyObj = new BasicNotification(this.id);
       this.notifyObj.options.persistent = true;
       showNotification(this.notifyObj);
@@ -63,18 +75,17 @@ var tests = [
       this.notifyObj.addOptions({
         persistent: true,
       });
       this.notification = showNotification(this.notifyObj);
     },
     onShown(popup) {
       checkPopup(popup, this.notifyObj);
       let anchor = document.getElementById(this.notifyObj.anchorID);
-      anchor.focus();
-      is(document.activeElement, anchor);
+      focusNotificationAnchor(anchor);
       EventUtils.sendString(" ");
       is(document.activeElement, popup.children[0].closebutton);
       this.notification.remove();
     },
     onHidden(popup) { },
   },
   // Test that you can switch between active notifications with the space key
   // and that the notification is focused on selection.
@@ -104,28 +115,28 @@ var tests = [
       let notification2 = showNotification(notifyObj2);
       let popup = await opened;
 
       // Make sure notification 2 is visible
       checkPopup(popup, notifyObj2);
 
       // Activate the anchor for notification 1 and wait until it's shown.
       let anchor = document.getElementById(notifyObj1.anchorID);
-      anchor.focus();
+      focusNotificationAnchor(anchor);
       is(document.activeElement, anchor);
       opened = waitForNotificationPanel();
       EventUtils.sendString(" ");
       popup = await opened;
       checkPopup(popup, notifyObj1);
 
       is(document.activeElement, popup.children[0].checkbox);
 
       // Activate the anchor for notification 2 and wait until it's shown.
       anchor = document.getElementById(notifyObj2.anchorID);
-      anchor.focus();
+      focusNotificationAnchor(anchor);
       is(document.activeElement, anchor);
       opened = waitForNotificationPanel();
       EventUtils.sendString(" ");
       popup = await opened;
       checkPopup(popup, notifyObj2);
 
       is(document.activeElement, popup.children[0].closebutton);
 
--- a/browser/base/content/test/siteIdentity/browser_identityBlock_focus.js
+++ b/browser/base/content/test/siteIdentity/browser_identityBlock_focus.js
@@ -31,34 +31,36 @@ add_task(async function testWithoutNotif
   await BrowserTestUtils.withNewTab(PERMISSIONS_PAGE, async function(browser) {
     let popupshown = BrowserTestUtils.waitForEvent(PopupNotifications.panel, "popupshown");
     // Request a permission;
     BrowserTestUtils.synthesizeMouseAtCenter("#geo", {}, browser);
     await popupshown;
 
     await synthesizeKeyAndWaitForFocus(gURLBar, "l", {accelKey: true});
     is(document.activeElement, gURLBar.inputField, "urlbar should be focused");
-    let geoIcon = document.getElementById("geo-notification-icon");
-    await synthesizeKeyAndWaitForFocus(geoIcon, "VK_TAB", {shiftKey: true});
-    is(document.activeElement, geoIcon, "notification anchor should be focused");
     await synthesizeKeyAndWaitForFocus(gIdentityHandler._identityBox, "VK_TAB", {shiftKey: true});
     is(document.activeElement, gIdentityHandler._identityBox,
-       "identity block should be focused");
+      "identity block should be focused");
+    let geoIcon = document.getElementById("geo-notification-icon");
+    await synthesizeKeyAndWaitForFocus(geoIcon, "ArrowRight");
+    is(document.activeElement, geoIcon, "notification anchor should be focused");
   });
 });
 
 // Checks that with invalid pageproxystate the identity block is ignored.
 add_task(async function testInvalidPageProxyState() {
   await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});
   await BrowserTestUtils.withNewTab("about:blank", async function(browser) {
     // Loading about:blank will automatically focus the urlbar, which, however, can
     // race with the test code. So we only send the shortcut if the urlbar isn't focused yet.
     if (document.activeElement != gURLBar.inputField) {
       await synthesizeKeyAndWaitForFocus(gURLBar, "l", {accelKey: true});
     }
     is(document.activeElement, gURLBar.inputField, "urlbar should be focused");
+    await synthesizeKeyAndWaitForFocus(document.getElementById("home-button"),
+      "VK_TAB", {shiftKey: true});
     await synthesizeKeyAndWaitForFocus(gBrowser.getTabForBrowser(browser), "VK_TAB", {shiftKey: true});
     isnot(document.activeElement, gIdentityHandler._identityBox,
           "identity block should not be focused");
     // Restore focus to the url bar.
     gURLBar.focus();
   });
 });
--- a/browser/base/content/test/siteIdentity/browser_identityPopup_focus.js
+++ b/browser/base/content/test/siteIdentity/browser_identityPopup_focus.js
@@ -1,59 +1,65 @@
 /* Tests the focus behavior of the identity popup. */
 
+// Focusing on the identity box is handled by the ToolbarKeyboardNavigator
+// component (see browser/base/content/browser-toolbarKeyNav.js).
+async function focusIdentityBox() {
+  gURLBar.inputField.focus();
+  is(document.activeElement, gURLBar.inputField, "urlbar should be focused");
+  const focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityBox, "focus");
+  EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
+  await focused;
+}
+
 // Access the identity popup via mouseclick. Focus should not be moved inside.
 add_task(async function testIdentityPopupFocusClick() {
   await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});
   await BrowserTestUtils.withNewTab("https://example.com", async function() {
     let shown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
     EventUtils.synthesizeMouseAtCenter(gIdentityHandler._identityBox, {});
     await shown;
     isnot(Services.focus.focusedElement, document.getElementById("identity-popup-security-expander"));
   });
 });
 
 // Access the identity popup via keyboard. Focus should be moved inside.
 add_task(async function testIdentityPopupFocusKeyboard() {
   await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});
   await BrowserTestUtils.withNewTab("https://example.com", async function() {
-    let focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityBox, "focus");
-    gIdentityHandler._identityBox.focus();
-    await focused;
+    await focusIdentityBox();
     let shown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
     EventUtils.sendString(" ");
     await shown;
     is(Services.focus.focusedElement, document.getElementById("identity-popup-security-expander"));
   });
 });
 
 // Access the Site Security panel, then move focus with the tab key.
 // Tabbing should be able to reach the More Information button.
 add_task(async function testSiteSecurityTabOrder() {
   await SpecialPowers.pushPrefEnv({"set": [["accessibility.tabfocus", 7]]});
   await BrowserTestUtils.withNewTab("https://example.com", async function() {
     // 1. Access the identity popup.
-    let focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityBox, "focus");
-    gIdentityHandler._identityBox.focus();
-    await focused;
+    await focusIdentityBox();
     let shown = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popupshown");
     EventUtils.sendString(" ");
     await shown;
     is(Services.focus.focusedElement, document.getElementById("identity-popup-security-expander"));
 
     // 2. Access the Site Security section.
     let securityView = document.getElementById("identity-popup-securityView");
     shown = BrowserTestUtils.waitForEvent(securityView, "ViewShown");
     EventUtils.sendString(" ");
     await shown;
 
     // 3. First press of tab should focus the Back button.
     let backButton = gIdentityHandler._identityPopup.querySelector(".subviewbutton-back");
     // Wait for focus to move somewhere. We use focusin because focus doesn't bubble.
-    focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "focusin");
+    let focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "focusin");
     EventUtils.sendKey("tab");
     await focused;
     is(Services.focus.focusedElement, backButton);
 
     // 4. Second press of tab should move to the More Information button.
     let moreInfoButton = document.getElementById("identity-popup-more-info");
     focused = BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "focusin");
     EventUtils.sendKey("tab");
--- a/browser/base/content/test/tabs/browser_multiselect_tabs_using_keyboard.js
+++ b/browser/base/content/test/tabs/browser_multiselect_tabs_using_keyboard.js
@@ -37,21 +37,24 @@ add_task(async function changeSelectionU
   const tab2 = await addTab("http://mochi.test:8888/2");
   const tab3 = await addTab("http://mochi.test:8888/3");
   const tab4 = await addTab("http://mochi.test:8888/4");
   const tab5 = await addTab("http://mochi.test:8888/5");
 
   await BrowserTestUtils.switchTab(gBrowser, tab3);
   info("Move focus to location bar using the keyboard");
   await synthesizeKeyAndWaitForFocus(gURLBar, "l", {accelKey: true});
-  ok(document.activeElement, "urlbar should be focused");
+  is(document.activeElement, gURLBar.inputField, "urlbar should be focused");
 
   info("Move focus to the selected tab using the keyboard");
   let identityBox = document.querySelector("#identity-box");
   await synthesizeKeyAndWaitForFocus(identityBox, "VK_TAB", {shiftKey: true});
+  is(document.activeElement, identityBox, "identity box should be focused");
+  await synthesizeKeyAndWaitForFocus(document.getElementById("reload-button"),
+    "VK_TAB", {shiftKey: true});
   await synthesizeKeyAndWaitForFocus(tab3, "VK_TAB", {shiftKey: true});
   is(document.activeElement, tab3, "Tab3 should be focused");
 
   info("Move focus to tab 1 using the keyboard");
   await synthesizeKeyAndWaitForTabToGetKeyboardFocus(tab2, "KEY_ArrowLeft", {accelKey: true});
   await synthesizeKeyAndWaitForTabToGetKeyboardFocus(tab1, "KEY_ArrowLeft", {accelKey: true});
   is(gBrowser.tabContainer.ariaFocusedItem, tab1, "Tab1 should be the ariaFocusedItem");
 
--- a/browser/components/search/test/browser/browser_searchbar_openpopup.js
+++ b/browser/components/search/test/browser/browser_searchbar_openpopup.js
@@ -302,16 +302,18 @@ add_task(async function contextmenu_clos
 });
 
 // Tabbing to the search box should open the popup if it contains text.
 add_task(async function tab_opens_popup() {
   gURLBar.focus();
   textbox.value = "foo";
 
   let promise = promiseEvent(searchPopup, "popupshown");
+  // Extra tab stop for url buttons.
+  EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Tab");
   await promise;
   isnot(searchPopup.getAttribute("showonlysettings"), "true", "Should show the full popup");
 
   is(Services.focus.focusedElement, textbox.inputField, "Should have focused the search bar");
   is(textbox.selectionStart, 0, "Should have selected all of the text");
   is(textbox.selectionEnd, 3, "Should have selected all of the text");
 
@@ -322,16 +324,18 @@ add_task(async function tab_opens_popup(
   textbox.value = "";
 });
 
 // Tabbing to the search box should not open the popup if it doesn't contain text.
 add_no_popup_task(function tab_doesnt_open_popup() {
   gURLBar.focus();
   textbox.value = "foo";
 
+  // Extra tab stop for url buttons.
+  EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Tab");
 
   is(Services.focus.focusedElement, textbox.inputField, "Should have focused the search bar");
   is(textbox.selectionStart, 0, "Should have selected all of the text");
   is(textbox.selectionEnd, 3, "Should have selected all of the text");
 
   textbox.value = "";
 });
@@ -374,16 +378,18 @@ add_task(async function refocus_window_d
 });
 
 // Switching back to the window when the search box has focus from keyboard should not open the popup.
 add_task(async function refocus_window_doesnt_open_popup_keyboard() {
   gURLBar.focus();
   textbox.value = "foo";
 
   let promise = promiseEvent(searchPopup, "popupshown");
+  // Extra tab stop for url buttons.
+  EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Tab");
   await promise;
   isnot(searchPopup.getAttribute("showonlysettings"), "true", "Should show the full popup");
 
   is(Services.focus.focusedElement, textbox.inputField, "Should have focused the search bar");
   is(textbox.selectionStart, 0, "Should have selected all of the text");
   is(textbox.selectionEnd, 3, "Should have selected all of the text");
 
@@ -538,16 +544,18 @@ add_task(async function dont_rollup_onca
 });
 
 // Entering customization mode shouldn't open the popup.
 add_task(async function dont_open_in_customization() {
   gURLBar.focus();
   textbox.value = "foo";
 
   let promise = promiseEvent(searchPopup, "popupshown");
+  // Extra tab stop for url buttons.
+  EventUtils.synthesizeKey("KEY_Tab");
   EventUtils.synthesizeKey("KEY_Tab");
   await promise;
   isnot(searchPopup.getAttribute("showonlysettings"), "true", "Should show the full popup");
 
   info("Entering customization mode");
   let sawPopup = false;
   function listener() {
     sawPopup = true;
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -257,21 +257,16 @@ menuitem.bookmark-item {
 %include ../shared/urlbarSearchSuggestionsNotification.inc.css
 
 #search-container {
   min-width: calc(54px + 11ch);
 }
 
 /* identity box */
 
-#identity-box:not(:active):-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -3px;
-}
-
 %include ../shared/identity-block/identity-block.inc.css
 
 %include ../shared/notification-icons.inc.css
 %include ../shared/addon-notification.inc.css
 
 /* Notification icon box */
 
 .notification-anchor-icon:-moz-focusring {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -262,19 +262,17 @@ html|input.urlbar-input {
 .searchbar-textbox[focused="true"] {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
 %include ../shared/identity-block/identity-block.inc.css
 
 #identity-box:not(:active):-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
   border-inline-end-style: none;
-  padding-inline-end: 5px;
 }
 
 /* ::::: URL Bar Zoom Reset Button ::::: */
 @keyframes urlbar-zoom-reset-pulse {
   0% {
     transform: scale(0);
   }
   75% {
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -33,16 +33,22 @@
 }
 
 #identity-box:hover:active:not(.no-hover),
 #identity-box[open=true] {
   background-color: hsla(0,0%,70%,.3);
   fill-opacity: .8;
 }
 
+#identity-box:not(:active):-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: -2px;
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+}
+
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
   color: #058B00;
 }
 
 :root[lwt-toolbar-field-brighttext] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
   color: #30e60b;
 }
 
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -3,16 +3,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-transition-duration: 150ms;
 
   --toolbarbutton-outer-padding: 2px;
   --toolbarbutton-inner-padding: 6px;
 
+  --toolbarbutton-focus-outline: 2px solid currentColor;
+
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4));
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.6));
 
   --backbutton-background: hsla(0,100%,100%,.8);
   --backbutton-hover-background: var(--backbutton-background);
@@ -192,16 +194,47 @@ toolbar .toolbarbutton-1:not([disabled=t
   color: inherit;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 
+/* Keyboard focus styling */
+#PersonalToolbar .toolbarbutton-1:-moz-focusring,
+.findbar-button:-moz-focusring,
+findbar toolbarbutton.tabbable:-moz-focusring,
+toolbarbutton.bookmark-item:not(.subviewbutton):-moz-focusring,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,
+toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-badge-stack {
+  color: inherit;
+  outline: var(--toolbarbutton-focus-outline);
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+  outline-offset: unset;
+}
+
+:root[uidensity=compact] .findbar-button:-moz-focusring,
+:root[uidensity=compact] findbar toolbarbutton.tabbable:-moz-focusring,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,
+:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-badge-stack {
+  outline-offset: -1px;
+}
+
+#PersonalToolbar .toolbarbutton-1:-moz-focusring,
+toolbarbutton.bookmark-item:not(.subviewbutton):-moz-focusring {
+  outline-offset: -2px;
+}
+
+toolbar .toolbarbutton-1:-moz-focusring {
+  outline: none;
+}
+
 :root:not([uidensity=compact]) #back-button {
   padding-top: 3px;
   padding-bottom: 3px;
   padding-inline-start: 3px;
   padding-inline-end: 0;
   position: relative !important;
   z-index: 1 !important;
   border-radius: 0 10000px 10000px 0;
@@ -223,16 +256,24 @@ toolbar .toolbarbutton-1[checked]:not(:a
   border-radius: 10000px;
   width: 34px;
   height: 34px;
   padding: 8px;
   transition-property: box-shadow;
   transition-duration: var(--toolbarbutton-hover-transition-duration);
 }
 
+:root:not([uidensity=compact]) #back-button:-moz-focusring > .toolbarbutton-icon {
+  -moz-outline-radius: 10000px;
+}
+
+:root[uidensity=touch] #back-button:-moz-focusring > .toolbarbutton-icon {
+  outline-offset: -2px;
+}
+
 :root[uidensity=touch] #back-button {
   padding-top: 1px;
   padding-bottom: 1px;
   padding-inline-start: 1px;
 }
 
 :root[uidensity=touch] #back-button > .toolbarbutton-icon {
   width: 38px;
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -314,16 +314,23 @@
 }
 
 .urlbar-icon-wrapper[open] > .urlbar-icon,
 .urlbar-icon-wrapper > .urlbar-icon:hover,
 .urlbar-icon-wrapper > .urlbar-icon:hover:active {
   background-color: transparent;
 }
 
+.urlbar-icon:-moz-focusring,
+.urlbar-icon-wrapper:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: -2px;
+  -moz-outline-radius: var(--toolbarbutton-border-radius);
+}
+
 .urlbar-go-button,
 .search-go-button {
   list-style-image: url("chrome://browser/skin/forward.svg");
 }
 
 .urlbar-go-button:-moz-locale-dir(rtl),
 .search-go-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
@@ -693,16 +700,22 @@
 :root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 :root[lwt-toolbar-field-brighttext] #urlbar-zoom-button:hover:active {
   background-color: rgba(255,255,255,.3);
 }
 
+#urlbar-zoom-button:-moz-focusring {
+  outline: var(--toolbarbutton-focus-outline);
+  outline-offset: unset;
+  -moz-outline-radius: 1em;
+}
+
 #urlbar-zoom-button > .toolbarbutton-text {
   display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
   display: none;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -622,21 +622,16 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 %include ../shared/urlbarSearchSuggestionsNotification.inc.css
 
 #search-container {
   min-width: calc(54px + 11ch);
 }
 
 /* identity box */
 
-#identity-box:not(:active):-moz-focusring {
-  outline: 1px dotted;
-  outline-offset: -3px;
-}
-
 %include ../shared/identity-block/identity-block.inc.css
 
 /* autocomplete */
 
 %include ../shared/autocomplete.inc.css
 %include ../shared/urlbar-autocomplete.inc.css
 
 #urlbarView-results {