fix: alignment and a11y issues for icons

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}

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"

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"

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"

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
+			<button class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center">
-				aria-label="Back to top"
-				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
-			>
 				<ArrowUp class="icon h-icon w-icon" />
 			</button>
 		</Link>