refactor: Fix lighthouse accessibility issue in footer links (#1203)

preactjs · Dec 4, 2024 · 550fcde · 550fcde
1 parent f68e65a
commit 550fcde
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;