From 9de098c3ef9f6182920e8bfc15d52cab89e38da8 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Wed, 9 Oct 2024 11:55:49 +0200
Subject: [PATCH] fix(A11Y): hide icons with aria labels

---
 src/components/Backlink.astro    | 3 ++-
 src/components/RSSLink.astro     | 2 +-
 src/components/SearchLink.astro  | 3 ++-
 src/components/SocialLinks.astro | 8 ++++----
 src/components/ThemeToggle.astro | 1 +
 src/components/UpLink.astro      | 7 +++++--
 6 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Backlink.astro b/src/components/Backlink.astro
index 0e8f6b4..a09b8f7 100644
--- a/src/components/Backlink.astro
+++ b/src/components/Backlink.astro
@@ -24,11 +24,12 @@ const { backLink, class: className, ...props } = Astro.props;
 			{...props}
 		>
 			<button
+				aria-hidden="true"
 				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
 				type="button"
 				tabindex={-1}
 			>
-				<ArrowLeft class="icon h-icon w-icon" />
+				<ArrowLeft aria-hidden="true" class="icon h-icon w-icon" />
 			</button>
 		</Link>
 	)
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro
index ed23087..57bd4e0 100644
--- a/src/components/RSSLink.astro
+++ b/src/components/RSSLink.astro
@@ -8,7 +8,7 @@ import Subsubheadline from './Subsubheadline.astro';
 <aside class="grow mbe-5 sm:mbe-0">
 	<Subsubheadline as="h2">Stay up to date.</Subsubheadline>
 	<p>
-		<Rss class="icon inline h-icon w-icon" />{' '}
+		<Rss aria-hidden="true" class="icon inline h-icon w-icon" />{' '}
 		<Link
 			class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 focus:underline focus:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 dark:focus:decoration-shibui-100/20"
 			data-umami-event="RSS"
diff --git a/src/components/SearchLink.astro b/src/components/SearchLink.astro
index fdd54e0..9bdd6ac 100644
--- a/src/components/SearchLink.astro
+++ b/src/components/SearchLink.astro
@@ -12,11 +12,12 @@ import Link from './Link.astro';
 	title="Search the website (/)"
 >
 	<button
+		aria-hidden="true"
 		class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
 		data-umami-event="Search"
 		tabindex={-1}
 		type="button"
 	>
-		<Search class="icon h-icon w-icon" />
+		<Search aria-hidden="true" class="icon h-icon w-icon" />
 	</button>
 </Link>
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index be8b6e6..5f80fb2 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -16,7 +16,7 @@ import Link from '../components/Link.astro';
 		data-tld="de"
 		onclick="window.open(`mailto:${this.dataset.name}@${this.dataset.domain}.${this.dataset.tld}`, '_blank')"
 	>
-		<Mail class="icon h-icon-small w-icon-small" />
+		<Mail aria-hidden="true" class="icon h-icon-small w-icon-small" />
 	</Link>
 	<Link
 		aria-label="𝕏"
@@ -25,7 +25,7 @@ import Link from '../components/Link.astro';
 		href="https://x.com/kogakure"
 		title="𝕏"
 	>
-		<TwitterX class="icon h-icon-small w-icon-small" />
+		<TwitterX aria-hidden="true" class="icon h-icon-small w-icon-small" />
 	</Link>
 	<Link
 		aria-label="Instagram"
@@ -34,7 +34,7 @@ import Link from '../components/Link.astro';
 		href="https://instagram.com/kogakure"
 		title="Instagram"
 	>
-		<Instagram class="icon h-icon-small w-icon-small" />
+		<Instagram aria-hidden="true" class="icon h-icon-small w-icon-small" />
 	</Link>
 	<Link
 		aria-label="GitHub"
@@ -43,6 +43,6 @@ import Link from '../components/Link.astro';
 		href="https://github.com/kogakure"
 		title="GitHub"
 	>
-		<Github class="icon h-icon-small w-icon-small" />
+		<Github aria-hidden="true" class="icon h-icon-small w-icon-small" />
 	</Link>
 </nav>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index d082c29..5f5962a 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -12,6 +12,7 @@ import { Circle } from './icons';
 		data-umami-event="Switch color theme"
 	>
 		<Circle
+			aria-hidden="true"
 			class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125"
 		/>
 	</button>
diff --git a/src/components/UpLink.astro b/src/components/UpLink.astro
index f62e25a..8d37a39 100644
--- a/src/components/UpLink.astro
+++ b/src/components/UpLink.astro
@@ -18,8 +18,11 @@ const { ...props } = Astro.props;
 		href="#top"
 		id="up-link"
 	>
-		<button class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center">
-			<ArrowUp class="icon h-icon w-icon" />
+		<button
+			aria-hidden="true"
+			class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+		>
+			<ArrowUp aria-hidden="true" class="icon h-icon w-icon" />
 		</button>
 	</Link>
 </div>