tor-browser

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

Bug 1990891 - Fix New Tab Shortcuts context menu focus outline. r=home-newtab-reviewers,reemhamz

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

Diffstat:
M
browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss
 | 
22
+++++++++++++++++++++-
M
browser/extensions/newtab/css/activity-stream.css
 | 
14
+++++++++++++-

2 files changed, 34 insertions(+), 2 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss b/browser/extensions/newtab/content-src/components/TopSites/_TopSites.scss
@@ -265,8 +265,20 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width;
 
     &:focus-visible {
       background-color: var(--newtab-button-focus-background);
-      border-color: var(--newtab-button-focus-border);
+      outline: var(--focus-outline); // Backup for when wallpaper is not set
       opacity: 1;
+
+      .lightWallpaper &,
+      .darkWallpaper & {
+        &::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: var(--border-radius-small);
+          outline: var(--focus-outline);
+          color-scheme: initial; // Override wallpaper-contrast-fix for focus outline color
+        }
+      }
     }
   }
 
@@ -287,6 +299,14 @@ $calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width;
     &:focus + div .context-menu-button {
       opacity: 1;
     }
+
+    &:focus .tile {
+      .lightWallpaper &,
+      .darkWallpaper & {
+        outline: var(--focus-outline);
+        color-scheme: initial;
+      }
+    }
   }
 
   .title {
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -955,9 +955,17 @@ main section {
 }
 .top-site-outer .context-menu-button:focus-visible {
   background-color: var(--newtab-button-focus-background);
-  border-color: var(--newtab-button-focus-border);
+  outline: var(--focus-outline);
   opacity: 1;
 }
+.lightWallpaper .top-site-outer .context-menu-button:focus-visible::after, .darkWallpaper .top-site-outer .context-menu-button:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--border-radius-small);
+  outline: var(--focus-outline);
+  color-scheme: initial;
+}
 .top-site-outer .context-menu {
   inset-block-start: calc(var(--space-large) + var(--space-xlarge));
 }
@@ -973,6 +981,10 @@ main section {
 .top-site-outer .top-site-button:focus + div .context-menu-button {
   opacity: 1;
 }
+.lightWallpaper .top-site-outer .top-site-button:focus .tile, .darkWallpaper .top-site-outer .top-site-button:focus .tile {
+  outline: var(--focus-outline);
+  color-scheme: initial;
+}
 .top-site-outer .title {
   color: var(--newtab-contextual-text-primary-color);
   padding-block-start: var(--space-small);