From 550fcde0fcc3a6cd5fcd8672dd1c4892c6b93978 Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Wed, 4 Dec 2024 00:53:23 -0600
Subject: [PATCH] refactor: Fix lighthouse accessibility issue in footer links
 (#1203)

---
 src/components/footer/style.module.css | 18 ++++++++++++++++++
 src/style/markdown.css                 |  2 +-
 src/style/variables.css                |  1 +
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/footer/style.module.css b/src/components/footer/style.module.css
index f71615f6b..7e426d43d 100644
--- a/src/components/footer/style.module.css
+++ b/src/components/footer/style.module.css
@@ -12,7 +12,25 @@
 		margin-left: 0.625rem;
 	}
 
+	/**
+	 * Ideally kept sync'd with the markdown links:
+	 * https://github.com/preactjs/preact-www/blob/f68e65aadbd19b042921cc175aa256f3aa248768/src/style/markdown.css#L18
+   */
 	a {
 		color: var(--color-footer-link);
+		text-decoration-skip-ink: auto;
+		text-decoration: underline;
+		text-decoration-color: var(--color-table-border);
+		text-decoration-thickness: 1px;
+
+		&:hover,
+		&:focus {
+			text-decoration-color: currentColor;
+		}
+
+		&:hover,
+		&:focus {
+			color: var(--color-link-hover);
+		}
 	}
 }
diff --git a/src/style/markdown.css b/src/style/markdown.css
index 1b95776d4..0ac9258af 100644
--- a/src/style/markdown.css
+++ b/src/style/markdown.css
@@ -29,7 +29,7 @@
 
 		&:hover,
 		&:focus {
-			color: #ff89ff;
+			color: var(--color-link-hover);
 		}
 	}
 
diff --git a/src/style/variables.css b/src/style/variables.css
index 489346634..1bf2b5e2f 100644
--- a/src/style/variables.css
+++ b/src/style/variables.css
@@ -13,6 +13,7 @@
 	--color-brand-triplet: 103, 58, 184;
 	--color-brand-light: #8f61e1;
 	--color-link: #673ab8;
+	--color-link-hover: #ff89ff;
 	--color-btn: #673ab8;
 	--color-btn-secondary: #673ab8;
 	--color-btn-background: #eee;