From 6920007cbcb34cc01153d405da682bf5cfce6d60 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 14 Mar 2024 17:25:07 +0100
Subject: [PATCH] fix: alignment and a11y issues for icons

---
 src/components/Backlink.tsx     | 3 +--
 src/components/DownloadLink.tsx | 2 +-
 src/components/MoreLink.tsx     | 2 +-
 src/components/SearchLink.astro | 5 +++--
 src/components/UpLink.tsx       | 8 +++-----
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Backlink.tsx b/src/components/Backlink.tsx
index 839d017..db94fa6 100644
--- a/src/components/Backlink.tsx
+++ b/src/components/Backlink.tsx
@@ -19,9 +19,8 @@ export const Backlink: FunctionalComponent<Props> = ({ backLink, class: classNam
 	return (
 		<>
 			{backLink && (
-				<Link class={classes} href={backLink} {...props}>
+				<Link aria-label="Back to overview" class={classes} href={backLink} {...props}>
 					<button
-						aria-label="Back to overview"
 						class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
 						type="button"
 						tabIndex={-1}
diff --git a/src/components/DownloadLink.tsx b/src/components/DownloadLink.tsx
index c7ae6ee..dd07657 100644
--- a/src/components/DownloadLink.tsx
+++ b/src/components/DownloadLink.tsx
@@ -11,7 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
 export const DownloadLink: FunctionalComponent<Props> = ({ href, text, ...props }) => (
 	<TextLink class="group" href={href} {...props}>
 		{text}
-		<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
+		<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.4em]">
 			<Download
 				aria-hidden="true"
 				class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"
diff --git a/src/components/MoreLink.tsx b/src/components/MoreLink.tsx
index e3bf755..a121aff 100644
--- a/src/components/MoreLink.tsx
+++ b/src/components/MoreLink.tsx
@@ -11,7 +11,7 @@ interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {
 export const MoreLink: FunctionalComponent<Props> = ({ href, text, ...props }) => (
 	<TextLink class="group" href={href} {...props}>
 		{text}
-		<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.2em]">
+		<span class="more-icon relative inline-flex mis-[0.2em] block-start-[0.4em]">
 			<ArrowRight
 				aria-hidden="true"
 				class="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
diff --git a/src/components/SearchLink.astro b/src/components/SearchLink.astro
index 81cc640..4eb4bb2 100644
--- a/src/components/SearchLink.astro
+++ b/src/components/SearchLink.astro
@@ -5,12 +5,13 @@ import { Link } from '.';
 ---
 
 <Link
-	class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 print:hidden md:col-span-1"
+	aria-label="Search the website (/)"
+	class="col-span-2 col-start-1 h-clickarea w-clickarea scale-75 items-center justify-center self-center justify-self-center transition-transform duration-500 ease-in-out hover:scale-90 focus:scale-90 md:col-span-1 print:hidden"
+	href="#search"
 	id="search-link"
 	title="Search the website (/)"
 >
 	<button
-		aria-label="Search the website (/)"
 		class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center border-none text-[0]"
 		tabindex={-1}
 		type="button"
diff --git a/src/components/UpLink.tsx b/src/components/UpLink.tsx
index 62413f3..24d462a 100644
--- a/src/components/UpLink.tsx
+++ b/src/components/UpLink.tsx
@@ -6,14 +6,12 @@ import { ArrowUp } from './icons';
 export const UpLink: FunctionalComponent = ({ ...props }) => (
 	<div class="flex flex-1 justify-end" {...props}>
 		<Link
-			id="up-link"
+			aria-label="Back to top"
 			class="transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
 			href="#top"
+			id="up-link"
 		>
-			<button
-				aria-label="Back to top"
-				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
-			>
+			<button class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center">
 				<ArrowUp class="icon h-icon w-icon" />
 			</button>
 		</Link>