tor-browser

commit 07492a8fa5736b8378d3c7f8e6d8699e2b1ac715
parent a26f82cb399235f563f0ef1592ce8fa58fe5f3e3
Author: Irene Ni <ini@mozilla.com>
Date:   Fri, 24 Oct 2025 17:35:41 +0000

Bug 1994545: HCM improvements for story cards on HNT. r=ayeddi,home-newtab-reviewers,accessibility-frontend-reviewers,reemhamz

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

Diffstat:
M
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
 | 
32
++++++++++++++++++++++++++++++++
M
browser/extensions/newtab/content-src/styles/_mixins.scss
 | 
6
++----
M
browser/extensions/newtab/css/activity-stream.css
 | 
65
+++++++++++++++++++++++++++++++++++++++++------------------------

3 files changed, 75 insertions(+), 28 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -432,6 +432,29 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
       }
     }
 
+    @media (forced-colors: active) {
+      &:not(.placeholder) {
+        border: var(--border-width) solid var(--border-color-card);
+      }
+
+      &:not(.placeholder):hover {
+        --newtab-background-color-secondary: SelectedItemText;
+        --newtab-text-secondary-color: SelectedItem;
+
+        color: SelectedItem;
+        border-color: var(--border-color-interactive-hover);
+
+        .meta .title {
+          color: var(--link-color-hover);
+        }
+      }
+
+      .meta .title {
+        text-decoration: underline;
+        color: var(--link-color);
+      }
+    }
+
     .meta {
       padding: var(--space-large);
 
@@ -662,6 +685,10 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
 
   .context-menu-button {
     background-color: var(--button-background-color-ghost);
+
+    @media (forced-colors: active) {
+      border: var(--border-width) solid var(--button-border-color-ghost);
+    }
   }
 
   &:hover,
@@ -673,6 +700,11 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
     .context-menu-button:hover {
       background-color: var(--button-background-color-ghost-hover);
 
+      @media (forced-colors: active) {
+        border-color: var(--button-border-color-ghost-hover);
+        fill: var(--button-text-color-ghost-hover);
+      }
+
       &:active {
         background-color: var(--button-background-color-ghost-active);
       }
diff --git a/browser/extensions/newtab/content-src/styles/_mixins.scss b/browser/extensions/newtab/content-src/styles/_mixins.scss
@@ -80,9 +80,7 @@
   background: var(--newtab-background-card);
   transition: opacity 0.2s ease;
 
-  @media (prefers-reduced-motion: no-preference) {
-    &:hover {
-      background: var(--newtab-background-color-secondary);
-    }
+  &:hover {
+    background: var(--newtab-background-color-secondary);
   }
 }
diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css
@@ -4455,10 +4455,8 @@ dialog::after {
   display: flex;
   flex-direction: column;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .lists:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+.lists:hover {
+  background: var(--newtab-background-color-secondary);
 }
 .lists .confetti-canvas {
   position: absolute;
@@ -4677,10 +4675,8 @@ dialog::after {
   align-items: center;
   box-shadow: var(--box-shadow-card);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .focus-timer:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+.focus-timer:hover {
+  background: var(--newtab-background-color-secondary);
 }
 
 .focus-timer-tabs {
@@ -7505,10 +7501,8 @@ dialog::after {
   background: var(--newtab-background-card);
   transition: opacity 0.2s ease;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .ds-card-grid .sections-card-ui:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+.ds-card-grid .sections-card-ui:hover {
+  background: var(--newtab-background-color-secondary);
 }
 .ds-card-grid .sections-card-ui:not(.placeholder) {
   box-shadow: 0 1px 2px 0 rgba(58, 57, 68, 0.2);
@@ -7524,6 +7518,24 @@ dialog::after {
 .ds-card-grid .sections-card-ui:not(.placeholder) .img-wrapper > .ds-image.img > img {
   border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
 }
+@media (forced-colors: active) {
+  .ds-card-grid .sections-card-ui:not(.placeholder) {
+    border: var(--border-width) solid var(--border-color-card);
+  }
+  .ds-card-grid .sections-card-ui:not(.placeholder):hover {
+    --newtab-background-color-secondary: SelectedItemText;
+    --newtab-text-secondary-color: SelectedItem;
+    color: SelectedItem;
+    border-color: var(--border-color-interactive-hover);
+  }
+  .ds-card-grid .sections-card-ui:not(.placeholder):hover .meta .title {
+    color: var(--link-color-hover);
+  }
+  .ds-card-grid .sections-card-ui .meta .title {
+    text-decoration: underline;
+    color: var(--link-color);
+  }
+}
 .ds-card-grid .sections-card-ui .meta {
   padding: var(--space-large);
 }
@@ -7629,11 +7641,9 @@ dialog::after {
   background: var(--newtab-background-card);
   transition: opacity 0.2s ease;
 }
-@media (prefers-reduced-motion: no-preference) {
-  .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover,
+.ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover,
 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+  background: var(--newtab-background-color-secondary);
 }
 .ds-card-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img,
 .ds-section-grid .ds-card.ds-spoc-rectangle.ds-spoc-rectangle.refined-cards .img-wrapper .ds-image img {
@@ -7724,12 +7734,23 @@ dialog::after {
 .ds-card-grid .refined-cards .context-menu-button {
   background-color: var(--button-background-color-ghost);
 }
+@media (forced-colors: active) {
+  .ds-card-grid .refined-cards .context-menu-button {
+    border: var(--border-width) solid var(--button-border-color-ghost);
+  }
+}
 .ds-card-grid .refined-cards:hover h3, .ds-card-grid .refined-cards.active h3 {
   color: var(--color-accent-primary);
 }
 .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover {
   background-color: var(--button-background-color-ghost-hover);
 }
+@media (forced-colors: active) {
+  .ds-card-grid .refined-cards:hover .context-menu-button:hover, .ds-card-grid .refined-cards.active .context-menu-button:hover {
+    border-color: var(--button-border-color-ghost-hover);
+    fill: var(--button-text-color-ghost-hover);
+  }
+}
 .ds-card-grid .refined-cards:hover .context-menu-button:hover:active, .ds-card-grid .refined-cards.active .context-menu-button:hover:active {
   background-color: var(--button-background-color-ghost-active);
 }
@@ -8905,10 +8926,8 @@ dialog::after {
   box-shadow: var(--box-shadow-card);
   border-radius: var(--border-radius-large);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .ad-banner-wrapper .ad-banner-inner:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+.ad-banner-wrapper .ad-banner-inner:hover {
+  background: var(--newtab-background-color-secondary);
 }
 .ad-banner-wrapper .ad-banner-inner:hover {
   box-shadow: var(--box-shadow-card-hover);
@@ -9033,10 +9052,8 @@ dialog::after {
   position: relative;
   padding: var(--space-large);
 }
-@media (prefers-reduced-motion: no-preference) {
-  .promo-card-wrapper:hover {
-    background: var(--newtab-background-color-secondary);
-  }
+.promo-card-wrapper:hover {
+  background: var(--newtab-background-color-secondary);
 }
 .promo-card-wrapper .promo-card-title {
   display: block;