Change DoDs to be spans instead of links

They don't link to anything and should not be rendered as links in HTML for cases like an Atom feed.
owid · Jul 26, 2024 · aa0766a · aa0766a
1 parent ee8dcaf
commit aa0766a
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 33 deletions.
diff --git a/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx b/packages/@ourworldindata/components/src/MarkdownTextWrap/MarkdownTextWrap.tsx
@@ -316,10 +316,13 @@ export class IRDetailOnDemand extends IRElement {
     }
     toHTML(key?: React.Key): React.ReactElement {
         return (
-            <span key={key}>
-                <a className="dod-span" data-id={this.term}>
-                    {this.children.map((child, i) => child.toHTML(i))}
-                </a>
+            <span
+                key={key}
+                className="dod-span"
+                data-id={this.term}
+                tabIndex={0}
+            >
+                {this.children.map((child, i) => child.toHTML(i))}
             </span>
         )
     }

diff --git a/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx b/packages/@ourworldindata/components/src/SimpleMarkdownText.tsx
@@ -24,9 +24,11 @@ function transformDodLinks() {
                     // to capture the term
                     const match = node.properties.href.match(/#dod:(?<term>.+)/)
                     if (match) {
+                        node.tagName = "span"
                         node.properties.class = "dod-span"
                         node.properties["data-id"] = match.groups?.term
                         node.properties["aria-expanded"] = "false"
+                        node.properties["tabindex"] = 0
                         delete node.properties.href
                     }
                     //node.children.push(

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -242,13 +242,4 @@ $zindex-controls-drawer: 150;
     .markdown-text-wrap__line:last-child {
         margin-bottom: 2px;
     }
-
-    a.dod-span {
-        border-bottom: 1px dotted #666;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: none;
-        }
-    }
 }
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.scss b/packages/@ourworldindata/grapher/src/footer/Footer.scss
@@ -18,7 +18,7 @@
     }
 
     .sources a.learn-more-about-data,
-    .note a:not(.dod-span) {
+    .note a {
         text-decoration: underline;
 
         &:hover {

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss b/packages/@ourworldindata/grapher/src/modal/SourcesKeyDataTable.scss
@@ -31,11 +31,6 @@
         color: inherit;
         text-decoration: underline;
 
-        // DoD spans should be dotted via the border, not underlined
-        &.dod-span {
-            text-decoration: none;
-        }
-
         &:hover {
             text-decoration: none;
         }

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -142,11 +142,6 @@
             &:hover {
                 text-decoration: none;
             }
-
-            // DoD spans should be dotted via the border, not underlined
-            &.dod-span {
-                text-decoration: none;
-            }
         }
 
         .heading {

diff --git a/site/KeyDataTable.scss b/site/KeyDataTable.scss
@@ -8,11 +8,6 @@
     a {
         @include owid-link-90;
         color: inherit;
-
-        // DoD spans should be dotted via the border, not underlined
-        &.dod-span {
-            text-decoration: none;
-        }
     }
 }
 

diff --git a/site/detailsOnDemand.scss b/site/detailsOnDemand.scss
@@ -18,6 +18,7 @@
 .dod-span {
     color: inherit;
     border-bottom: 1px dotted #1d3d63;
+    cursor: help;
 
     span {
         pointer-events: none;

diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.tsx
@@ -191,10 +191,13 @@ export function renderSpan(
             </a>
         ))
         .with({ spanType: "span-dod" }, (span) => (
-            <span key={key}>
-                <a data-id={`${span.id}`} className="dod-span">
-                    {renderSpans(span.children)}
-                </a>
+            <span
+                key={key}
+                className="dod-span"
+                data-id={`${span.id}`}
+                tabIndex={0}
+            >
+                {renderSpans(span.children)}
             </span>
         ))
         .with({ spanType: "span-newline" }, () => <br key={key} />)