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.

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) {

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;
-      }
     }
   }
 

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 {