tor-browser

commit f4010fef6241199bcfdba9cf3f95ad2b23a8585d
parent d615531475fd0ea5649b732527aa85d23310f084
Author: Reem H <42309026+reemhamz@users.noreply.github.com>
Date:   Mon, 10 Nov 2025 00:09:11 +0000

Bug 1996785 - Fix weather opt-in dialog outline color on focus. r=home-newtab-reviewers,npypchenko

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

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

2 files changed, 44 insertions(+), 14 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/Weather/_Weather.scss b/browser/extensions/newtab/content-src/components/Weather/_Weather.scss
@@ -303,6 +303,15 @@
       height: var(--icon-size-xlarge);
       width: var(--icon-size-xlarge);
     }
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+
+      &::after {
+        border-bottom: var(--focus-outline);
+        border-right: var(--focus-outline);
+      }
+    }
   }
 
   dialog .weatherOptInContent {
@@ -332,21 +341,29 @@
 }
 
 // Arrow pointed upwards from the right side of the dialog
-dialog::after {
-  content: '';
-  position: absolute;
-  inset-block-start: calc(var(--space-small) * -1);
-  inset-inline-end: 5%;
-  transform: translateX(-50%) rotate(225deg);
-  height: 16px;
-  width: 16px;
-  background: var(--newtab-background-color-secondary);
-  box-shadow: 4px 4px 6px -2px var(--box-shadow-card);
-  border-inline-end: 1px solid var(--border-color-card);
-  border-block-end: 1px solid var(--border-color-card);
-}
+dialog {
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block-start: -9%;
+    inset-inline-end: 5%;
+    transform: translateX(-50%) rotate(225deg);
+    height: 16px;
+    width: 16px;
+    background: var(--newtab-background-color-secondary);
+    box-shadow: 4px 4px 6px -2px var(--box-shadow-card);
+    border-inline-end: 1px solid var(--border-color-card);
+    border-block-end: 1px solid var(--border-color-card);
+  }
 
+  &:dir(rtl)::after {
+    border-inline-start: 1px solid var(--border-color-card);
+    border-block-end: 1px solid var(--border-color-card);
+    border-inline-end: none;
+    inset-inline-end: 10%;
+  }
 
+}
 
 .weatherInfoLink, .weatherButtonContextMenuWrapper {
   appearance: none;
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -2995,6 +2995,13 @@ main section {
   height: var(--icon-size-xlarge);
   width: var(--icon-size-xlarge);
 }
+.weatherOptIn dialog:focus-visible {
+  outline: var(--focus-outline);
+}
+.weatherOptIn dialog:focus-visible::after {
+  border-bottom: var(--focus-outline);
+  border-right: var(--focus-outline);
+}
 .weatherOptIn dialog .weatherOptInContent {
   display: flex;
   flex-direction: column;
@@ -3021,7 +3028,7 @@ main section {
 dialog::after {
   content: "";
   position: absolute;
-  inset-block-start: calc(var(--space-small) * -1);
+  inset-block-start: -9%;
   inset-inline-end: 5%;
   transform: translateX(-50%) rotate(225deg);
   height: 16px;
@@ -3031,6 +3038,12 @@ dialog::after {
   border-inline-end: 1px solid var(--border-color-card);
   border-block-end: 1px solid var(--border-color-card);
 }
+dialog:dir(rtl)::after {
+  border-inline-start: 1px solid var(--border-color-card);
+  border-block-end: 1px solid var(--border-color-card);
+  border-inline-end: none;
+  inset-inline-end: 10%;
+}
 
 .weatherInfoLink, .weatherButtonContextMenuWrapper {
   appearance: none;