From c98335e4e5046383767cc0494389acd0a3c78998 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 28 Nov 2024 16:55:13 +0000
Subject: [PATCH] UX: Drop post-background highlighting on navigation (#29986)

Animating the background-color property like this is not compositable for the browser, which means the animation is not smooth, and can contribute to the Cumulative Layout Shift web vital.

For now, we're removing this, and may consider re-introducing an alternative version in future based on user feedback.
---
 .../discourse/app/lib/utilities.js            | 17 +++++------
 .../common/base/personal-message.scss         | 30 -------------------
 .../stylesheets/common/base/topic-post.scss   | 11 -------
 3 files changed, 7 insertions(+), 51 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/utilities.js b/app/assets/javascripts/discourse/app/lib/utilities.js
index 6a6d7129247..b4f19db82e5 100644
--- a/app/assets/javascripts/discourse/app/lib/utilities.js
+++ b/app/assets/javascripts/discourse/app/lib/utilities.js
@@ -80,23 +80,20 @@ export function highlightPost(postNumber) {
   }
 
   const element = container.querySelector(".topic-body, .small-action-desc");
-  if (!element || element.classList.contains("highlighted")) {
+  if (!element) {
     return;
   }
 
-  element.classList.add("highlighted");
-
   if (postNumber > 1) {
+    // Transport screenreader to correct post by focusing it
     element.setAttribute("tabindex", "0");
+    element.addEventListener(
+      "focusin",
+      () => element.removeAttribute("tabindex"),
+      { once: true }
+    );
     element.focus();
   }
-
-  const removeHighlighted = function () {
-    element.classList.remove("highlighted");
-    element.removeAttribute("tabindex");
-    element.removeEventListener("animationend", removeHighlighted);
-  };
-  element.addEventListener("animationend", removeHighlighted);
 }
 
 export function emailValid(email) {
diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss
index 9a4f2b256cb..f6d30f14b4b 100644
--- a/app/assets/stylesheets/common/base/personal-message.scss
+++ b/app/assets/stylesheets/common/base/personal-message.scss
@@ -2,26 +2,6 @@
   --pm-border-radius: 0;
   --pm-padding: 1.25em;
 
-  @keyframes current-user-background-fade-highlight {
-    0% {
-      background-color: var(--secondary);
-      border-color: var(--primary-low);
-    }
-    100% {
-      background-color: var(--tertiary-very-low);
-      border-color: transparent;
-    }
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .topic-body.highlighted {
-      animation: none;
-      .regular.contents {
-        animation: background-fade-highlight 2.5s ease-out;
-      }
-    }
-  }
-
   .topic-post {
     margin-bottom: 0.5em;
     &:last-child {
@@ -159,13 +139,6 @@
       background: var(--tertiary-very-low);
       border-color: var(--tertiary-very-low);
     }
-    @media (prefers-reduced-motion: no-preference) {
-      .topic-body.highlighted {
-        .regular.contents {
-          animation: current-user-background-fade-highlight 2.5s ease-out;
-        }
-      }
-    }
     .embedded-posts {
       .topic-body .cooked {
         background: transparent;
@@ -197,9 +170,6 @@
 
     &.current-user-post .topic-body .regular.contents {
       border: 2px dashed var(--tertiary-low);
-      @media (prefers-reduced-motion: no-preference) {
-        animation: background-fade-highlight 2.5s ease-out;
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 45eba080f96..c0b1387c2d0 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -834,17 +834,6 @@ aside.quote {
   }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .topic-body.highlighted,
-  .small-action-desc.highlighted {
-    animation: background-fade-highlight 2.5s ease-out;
-  }
-  // Disable animation so deleted status is visible immediately
-  .deleted .topic-body.highlighted {
-    animation: none;
-  }
-}
-
 .small-action-desc,
 .topic-body {
   &:focus-visible {