fix(docs): restore behavior of description term links (#9811)

#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 <[email protected]>
mdn · Oct 13, 2023 · 0cad7f4 · 0cad7f4
1 parent d640774
commit 0cad7f4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git 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
@@ -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)