fix(A11Y): hide icons with aria labels

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>
 	)

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"

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>

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>

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>

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">
+		<button
-			<ArrowUp class="icon h-icon w-icon" />
+			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>