tor-browser

commit 09686b83a63debd8b73d2c8984d4ae8b9c56e0ab
parent a3e0f470619270b114bb33647e6680522713d80f
Author: Irene Ni <ini@mozilla.com>
Date:   Wed,  1 Oct 2025 19:26:09 +0000

Bug 1990890 - Fix New Tab Weather widget context menu focus color. r=home-newtab-reviewers,reemhamz

Differential Revision: https://phabricator.services.mozilla.com/D266222

Diffstat:
M
browser/extensions/newtab/content-src/components/Weather/_Weather.scss
 | 
13
++++++++-----
M
browser/extensions/newtab/css/activity-stream.css
 | 
13
++++++++-----

2 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Weather/_Weather.scss b/browser/extensions/newtab/content-src/components/Weather/_Weather.scss
@@ -367,10 +367,6 @@ dialog::after {
     }
   }
 
-  &:focus-visible {
-    outline: var(--focus-outline);
-  }
-
   // Bug 1908010 - This overwrites the design system color because of a
   // known transparency issue with color-mix syntax when a wallpaper is set
   .lightWallpaper &,
@@ -417,6 +413,8 @@ dialog::after {
 
   &:focus-visible {
     border-radius: var(--border-radius-medium);
+    outline: var(--focus-outline);
+    z-index: 1;
 
     ~ .weatherButtonContextMenuWrapper {
       &::after {
@@ -473,8 +471,9 @@ dialog::after {
     }
   }
 
-  &:focus-visible {
+  &:has(:focus-visible) {
     border-radius: var(--border-radius-medium);
+    outline: var(--focus-outline);
 
     &::after {
       background-color: transparent
@@ -496,6 +495,10 @@ dialog::after {
   border: 0;
   appearance: none;
   min-width: var(--size-item-large);
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .weatherText {
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -3037,9 +3037,6 @@ dialog::after {
 .weatherInfoLink:hover:active, .weatherButtonContextMenuWrapper:hover:active {
   background-color: var(--button-background-color-ghost-active);
 }
-.weatherInfoLink:focus-visible, .weatherButtonContextMenuWrapper:focus-visible {
-  outline: var(--focus-outline);
-}
 .lightWallpaper .weatherInfoLink, .darkWallpaper .weatherInfoLink, .lightWallpaper .weatherButtonContextMenuWrapper, .darkWallpaper .weatherButtonContextMenuWrapper {
   background-color: var(--newtab-weather-background-color);
 }
@@ -3079,6 +3076,8 @@ dialog::after {
 }
 .weatherInfoLink:focus-visible {
   border-radius: var(--border-radius-medium);
+  outline: var(--focus-outline);
+  z-index: 1;
 }
 .weatherInfoLink:focus-visible ~ .weatherButtonContextMenuWrapper::after {
   background-color: transparent;
@@ -3122,10 +3121,11 @@ dialog::after {
 .weatherButtonContextMenuWrapper:hover::after {
   background-color: transparent;
 }
-.weatherButtonContextMenuWrapper:focus-visible {
+.weatherButtonContextMenuWrapper:has(:focus-visible) {
   border-radius: var(--border-radius-medium);
+  outline: var(--focus-outline);
 }
-.weatherButtonContextMenuWrapper:focus-visible::after {
+.weatherButtonContextMenuWrapper:has(:focus-visible)::after {
   background-color: transparent;
 }
 
@@ -3144,6 +3144,9 @@ dialog::after {
   appearance: none;
   min-width: var(--size-item-large);
 }
+.weatherButtonContextMenu:focus {
+  outline: none;
+}
 
 .weatherText {
   height: min-content;