From 872f17b5f6a5d7a7e34d479bb72fe564e862b598 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Mon, 3 Feb 2025 17:13:00 +0100
Subject: [PATCH] feat(a11y): improve accessibility

---
 src/components/JournalList.astro    | 1 +
 src/components/ProjectContent.astro | 1 +
 src/components/ProjectImage.astro   | 1 +
 src/components/RSSLink.astro        | 2 +-
 src/components/SocialLinks.astro    | 2 +-
 src/layouts/AboutLayout.astro       | 6 +++++-
 src/pages/index.astro               | 8 +++++++-
 src/pages/journal.astro             | 2 +-
 8 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro
index 395fcdd..68f1699 100644
--- a/src/components/JournalList.astro
+++ b/src/components/JournalList.astro
@@ -32,6 +32,7 @@ const { entries } = Astro.props;
 								alt={data.title}
 								formats={['avif', 'webp']}
 								height="937"
+								role="presentation"
 								src={data.cover}
 								width="1500"
 							/>
diff --git a/src/components/ProjectContent.astro b/src/components/ProjectContent.astro
index ffde45f..a5c610d 100644
--- a/src/components/ProjectContent.astro
+++ b/src/components/ProjectContent.astro
@@ -14,6 +14,7 @@ const { project } = Astro.props;
 ---
 
 <small
+	aria-label="Categories"
 	class="project-categories dark:text-white/0.2 text-black/0.8 block text-3 leading-4 small-caps md:p-0"
 >
 	{project.data.categories.join(' / ')}
diff --git a/src/components/ProjectImage.astro b/src/components/ProjectImage.astro
index 8a227de..c833f2e 100644
--- a/src/components/ProjectImage.astro
+++ b/src/components/ProjectImage.astro
@@ -19,6 +19,7 @@ const { project } = Astro.props;
 		) : (
 			<Image
 				alt={project.data.title}
+				aria-label={project.data.title}
 				class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
 				noMargin
 				src={project.data.image.src}
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro
index 8de6a61..2581ca1 100644
--- a/src/components/RSSLink.astro
+++ b/src/components/RSSLink.astro
@@ -5,7 +5,7 @@ import Link from './Link.astro';
 import Subsubheadline from './Subsubheadline.astro';
 ---
 
-<aside class="grow mbe-5 sm:mbe-0">
+<aside class="grow mbe-5 sm:mbe-0" aria-label="Subscribe to RSS">
 	<Subsubheadline as="h2">Stay up to date.</Subsubheadline>
 	<p>
 		<Rss aria-hidden="true" className="icon inline h-icon w-icon" />{' '}
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index 5292436..4b7c614 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -19,7 +19,7 @@ import Link from '../components/Link.astro';
 		<Mail aria-hidden="true" className="icon h-icon-small w-icon-small" />
 	</Link>
 	<Link
-		aria-label="𝕏"
+		aria-label="Twitter/X"
 		class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center transition-transform duration-500 ease-in-out hover:scale-125 focus:scale-125"
 		data-umami-event="𝕏"
 		href="https://x.com/kogakure"
diff --git a/src/layouts/AboutLayout.astro b/src/layouts/AboutLayout.astro
index ca7d80f..6b5ad27 100644
--- a/src/layouts/AboutLayout.astro
+++ b/src/layouts/AboutLayout.astro
@@ -37,7 +37,11 @@ const schema = JSON.stringify({
 		slot="before-content"
 		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 xl:-scale-x-100 3xl:col-start-14 3xl:col-end-17"
 	>
-		<Image alt="Stefan Imhoff" src="/assets/images/portrait-stefan-imhoff-2025.webp" />
+		<Image
+			alt="Stefan Imhoff"
+			role="presentation"
+			src="/assets/images/portrait-stefan-imhoff-2025.webp"
+		/>
 	</div>
 	<slot />
 	{
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 493922d..6bd88ef 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -50,7 +50,12 @@ rssPosts.sort(sortMarkdownByDate);
 	<div
 		class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"
 	>
-		<Image alt="Bonsai" loading="eager" src="/assets/images/cover/bonsai.webp" />
+		<Image
+			alt="Bonsai"
+			loading="eager"
+			role="presentation"
+			src="/assets/images/cover/bonsai.webp"
+		/>
 	</div>
 
 	<article
@@ -82,6 +87,7 @@ rssPosts.sort(sortMarkdownByDate);
 	<article
 		class="min-[1794px]:[&_li:block col-start-2 col-end-18 grid w-full grid-cols-18 gap-y-gap mbe-12 min-[1097px]:[&_li:nth-child(n+5)]:hidden min-[1410px]:[&_li:nth-child(n+5)]:block min-[1411px]:[&_li:nth-child(n+6)]:hidden min-[1793px]:[&_li:nth-child(n+6)]:block"
 		data-pagefind-ignore
+		aria-label="Latest essays"
 	>
 		<JournalList entries={formattedLatest} />
 	</article>
diff --git a/src/pages/journal.astro b/src/pages/journal.astro
index 722d08b..09b458a 100644
--- a/src/pages/journal.astro
+++ b/src/pages/journal.astro
@@ -34,7 +34,7 @@ const description = 'I am writing essays about various topics in this Journal.';
 	>
 		<Intro components={mapping} />
 	</article>
-	<aside class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
+	<aside aria-label="Filter by tags" class="col-start-1 col-end-18 flex flex-wrap gap-y-3">
 		{uniqueTags.map((tag) => <Tag href={`/tag/${tag}/`}>{tag}</Tag>)}
 	</aside>
 	<nav class="col-start-1 col-end-18" aria-label="Journal">