From 84fa9b42acbd6e6ba54239ff8a230471d267476a Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Fri, 22 Nov 2024 13:16:07 +0100
Subject: [PATCH] Associate template name heading with article card as
 accessible label

---
 src/components/RepoCard.astro | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/RepoCard.astro b/src/components/RepoCard.astro
index c8453fd..bcef30e 100644
--- 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} />