From 0cad7f46a432684f0baabd2cff9725ee3ca54a90 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Fri, 13 Oct 2023 14:55:49 +0200
Subject: [PATCH] fix(docs): restore behavior of description term links (#9811)

https://github.com/mdn/yari/pull/8413 introduced a regression, making it
hard to identify description terms (`<dt>`) that link to another page.

This restores the style of those links, excluding anchor links, and
also makes the hashtag of the anchor links interactive.

Co-authored-by: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com>
---
 client/src/document/index.scss | 39 +++++++++++++++++-----------------
 kumascript/src/api/util.ts     |  5 +++++
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 8d451a360f2c..984ddb87f731 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -145,32 +145,31 @@
       margin-bottom: 0.5rem;
       margin-top: 2rem;
 
-      a {
-        &:link,
-        &:visited {
-          color: inherit;
-          text-decoration: none;
-        }
+      a[href^="#"] {
+        color: inherit;
+        position: relative;
+        text-decoration: none;
 
         &:hover,
         &:focus {
           text-decoration: underline;
         }
 
-        &[href^="#"] {
-          position: relative;
-
-          &:hover::before {
-            color: var(--text-inactive);
-            content: "#";
-            display: inline-flex;
-            font-size: 0.7em;
-            left: -0.75em;
-            line-height: 1;
-            position: absolute;
-            text-decoration: none;
-            top: 0.5em;
-          }
+        &::before {
+          color: var(--text-inactive);
+          content: "#";
+          display: inline-flex;
+          font-size: 0.7em;
+          line-height: 1;
+          margin-left: -0.8em;
+          text-decoration: none;
+          top: 0.5em;
+          visibility: hidden;
+          width: 0.8em;
+        }
+
+        &:hover::before {
+          visibility: visible;
         }
       }
     }
diff --git a/kumascript/src/api/util.ts b/kumascript/src/api/util.ts
index 2116717e116b..0e7f0c2e9cb3 100644
--- a/kumascript/src/api/util.ts
+++ b/kumascript/src/api/util.ts
@@ -224,6 +224,11 @@ export class HTMLTool {
       $element.attr("id", id);
 
       if (isDt) {
+        // Remove empty anchor links.
+        // This happens if the term already links to a page.
+        $element.find("a[data-link-to-id = true]:empty").remove();
+
+        // Link remaining anchor links to the term's ID.
         $element
           .find("a[data-link-to-id = true]")
           .attr("href", "#" + id)