Associate template name heading with article card as accessible label

withastro · Nov 22, 2024 · 84fa9b4 · 84fa9b4
1 parent 8fb3905
commit 84fa9b4
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/components/RepoCard.astro b/src/components/RepoCard.astro
@@ -15,17 +15,20 @@ const {
 	createAstroTemplate,
 	previewImage = '/previews/minimal.webp',
 } = Astro.props;
+
+const headingId = `template-${createAstroTemplate}`;
 ---
 
 <article
 	class="relative bg-astro-gray-600 outline outline-1 -outline-offset-1 outline-astro-gray-100/10"
+	aria-labelledby={headingId}
 >
 	<div class="noise z-0"></div>
 	<div class="aspect-video bg-astro-gray-700">
 		<img src={previewImage} alt="" class="object-cover object-left-top s-full" />
 	</div>
 	<div class="flex flex-col gap-4 p-5">
-		<h2 class="heading-4">{title}</h2>
+		<h2 class="heading-4" id={headingId}>{title}</h2>
 		<p class="flex flex-wrap gap-2">
 			<RepoCardLink as="a" href={sourceUrl} icon="github">Source code</RepoCardLink>
 			<CopyButton {createAstroTemplate} />