Final touches

Author: Josh-Cena

project-words.txt

@@ -9,6 +9,7 @@ joshcena
 luo
 mdast
 mdxjs
+noninteractive
 pipeable
 saturationl
 scrolly

src/global.css

@@ -119,3 +119,11 @@ p {
   padding: 0 1em;
   font-weight: normal;
 }
+
+.term {
+  font-style: normal;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 0.2em;
+  cursor: help;
+}

src/pages/about/index.tsx

@@ -89,10 +89,10 @@ export default function About(): JSX.Element {
       <div className={styles.profileRow}>
         <img src={profile} alt="" className={styles.profile} />
         <div>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a
-            href="#"
-            className={styles.zhName}
+          <span
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
+            className={clsx(styles.zhName, "term")}
             lang="zh-Hans-CN"
             data-tooltip-id={nameId}>
             <ruby>
@@ -105,7 +105,7 @@ export default function About(): JSX.Element {
               <rt>dá</rt>
               <rp>)</rp>
             </ruby>
-          </a>
+          </span>
           <br />
           Joshua Chen
         </div>

src/pages/index.tsx

@@ -10,7 +10,12 @@ export default function Home(): JSX.Element {
       <Scrolly />
       <blockquote className={styles.quote}>
         <p>
-          I care about <dfn data-tooltip-id={id}>languages</dfn>!
+          I care about{" "}
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+          <span tabIndex={0} data-tooltip-id={id} className="term">
+            languages
+          </span>
+          !
         </p>
       </blockquote>
       <Tooltip id={id} className="tooltip" disableStyleInjection clickable>