From da35556eb95f2d397dfce03cc4acfacb0dcf1e89 Mon Sep 17 00:00:00 2001
From: Mayank
Date: Thu, 10 Aug 2023 17:12:05 -0400
Subject: [LinkCard] use only title as the link text (#488)

---
 .changeset/clean-baboons-own.md                   |  5 ++++
 packages/starlight/user-components/LinkCard.astro | 31 +++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/clean-baboons-own.md

diff --git a/.changeset/clean-baboons-own.md b/.changeset/clean-baboons-own.md
new file mode 100644
index 00000000..bb74830e
--- /dev/null
+++ b/.changeset/clean-baboons-own.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Improved accessibility of LinkCard by only including the title as part of the link text, and using a pseudo-element to keep the card clickable.
diff --git a/packages/starlight/user-components/LinkCard.astro b/packages/starlight/user-components/LinkCard.astro
index 683ac749..6dad1c22 100644
--- a/packages/starlight/user-components/LinkCard.astro
+++ b/packages/starlight/user-components/LinkCard.astro
@@ -11,25 +11,36 @@ const { title, description, ...attributes } = Astro.props;
 ---
 
 <div>
-	<a {...attributes}>
-		<span class="flex stack">
+	<span class="flex stack">
+		<a {...attributes}>
 			<span class="title" set:html={title} />
-			{description && <span class="description" set:html={description} />}
-		</span>
-		<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
-	</a>
+		</a>
+		{description && <span class="description" set:html={description} />}
+	</span>
+	<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />
 </div>
 
 <style>
-	a {
+	div {
 		display: grid;
 		grid-template-columns: 1fr auto;
 		gap: 0.5rem;
 		border: 1px solid var(--sl-color-gray-5);
 		border-radius: 0.5rem;
 		padding: 1rem;
-		text-decoration: none;
 		box-shadow: var(--sl-shadow-sm);
+		position: relative;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	/* a11y fix for https://github.com/withastro/starlight/issues/487 */
+	a::before {
+		content: "";
+		position: absolute;
+		inset: 0;
 	}
 
 	.stack {
@@ -54,12 +65,12 @@ const { title, description, ...attributes } = Astro.props;
 	}
 
 	/* Hover state */
-	a:hover {
+	div:hover {
 		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
 		border-color: var(--sl-color-gray-2);
 	}
 
-	a:hover .icon {
+	div:hover .icon {
 		color: var(--sl-color-white);
 	}
 </style>
-- 
cgit