From 6914009ecfd44f0dd830b839bf7565f33e59b03a Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Wed, 14 Jun 2023 17:34:30 +0200
Subject: [PATCH] feat: add focus states

---
 src/components/DownloadLink.astro   |  2 +-
 src/components/EmailLink.astro      |  2 +-
 src/components/JournalList.astro    | 55 ++++++++++++++++-------------
 src/components/MainNavigation.astro |  2 +-
 src/components/MoreLink.astro       |  2 +-
 src/components/RSSLink.astro        |  2 +-
 src/components/Subnavigation.astro  |  4 +--
 src/components/Tag.tsx              |  2 +-
 src/styles/global.css               | 44 ++++++++++++++++-------
 9 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/src/components/DownloadLink.astro b/src/components/DownloadLink.astro
index e5cbe9e..3e43717 100644
--- a/src/components/DownloadLink.astro
+++ b/src/components/DownloadLink.astro
@@ -17,7 +17,7 @@ const { href, text, ...props } = Astro.props;
 		<Sprite
 			name="ri:download-line"
 			aria-hidden="true"
-			class="h-icon w-icon group-hover:translate-y-1 transition-transform duration-500 ease-in-out"
+			class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-y-1 group-focus:translate-y-1"
 		/>
 	</span>
 </TextLink>
diff --git a/src/components/EmailLink.astro b/src/components/EmailLink.astro
index 775715e..4a9fdb3 100644
--- a/src/components/EmailLink.astro
+++ b/src/components/EmailLink.astro
@@ -19,7 +19,7 @@ const { text = 'Email', icon = true, ...props } = Astro.props;
 				<Sprite
 					name="ri:mail-send-line"
 					aria-hidden="true"
-					class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1"
+					class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
 				/>
 			</span>
 		)
diff --git a/src/components/JournalList.astro b/src/components/JournalList.astro
index 48a5c9a..64fd19a 100644
--- a/src/components/JournalList.astro
+++ b/src/components/JournalList.astro
@@ -20,32 +20,39 @@ const { entries } = Astro.props;
 	{
 		entries.map(({ slug, data }) => (
 			<li class="journal-card image-shadow group" {...animation}>
-				<Link title={data.title} href={`/${slug}/`} class="relative block h-full w-full">
-					<div class="absolute z-10 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
+				<Link
+					class="journal-card-link group relative block h-full w-full group-hover:scale-100"
+					href={`/${slug}/`}
+					tabIndex={0}
+					title={data.title}
+				>
+					<div class="absolute z-10 h-full w-full">
+						{data.cover ? (
+							<>
+								{data.cover.endsWith('.svg') ? (
+									<img src={data.cover} alt={data.title} />
+								) : (
+									<Picture
+										alt={data.title}
+										aspect={0.6}
+										breakpoints={[300, 500, 1000]}
+										format={['avif']}
+										src={data.cover}
+									/>
+								)}
+							</>
+						) : (
+							<div
+								class="h-full w-full bg-gray-800 transition duration-300 ease-in-out group-hover:brightness-[90%] group-focus:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%] dark:group-focus:brightness-[100%]"
+								style={`background-image: linear-gradient(to bottom left, ${
+									pickTwoRandomColors()[0]
+								} 0%, ${pickTwoRandomColors()[1]} 100%)`}
+							/>
+						)}
+					</div>
+					<div class="absolute z-20 flex h-full w-full flex-col items-center justify-center p-10 text-center leading-tight text-white">
 						<Subsubheadline class="!m-0 leading-tight">{data.title}</Subsubheadline>
 					</div>
-					{data.cover ? (
-						<>
-							{data.cover.endsWith('.svg') ? (
-								<img src={data.cover} alt={data.title} />
-							) : (
-								<Picture
-									alt={data.title}
-									aspect={0.6}
-									breakpoints={[300, 500, 1000]}
-									format={['avif']}
-									src={data.cover}
-								/>
-							)}
-						</>
-					) : (
-						<div
-							class="h-full w-full scale-105 bg-gray-800 blur-sm brightness-[80%] filter transition duration-300 ease-in-out group-hover:brightness-[90%] dark:brightness-[50%] dark:group-hover:brightness-[100%]"
-							style={`background-image: linear-gradient(to bottom left, ${
-								pickTwoRandomColors()[0]
-							} 0%, ${pickTwoRandomColors()[1]} 100%)`}
-						/>
-					)}
 				</Link>
 			</li>
 		))
diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro
index 0c0489a..ed71f10 100644
--- a/src/components/MainNavigation.astro
+++ b/src/components/MainNavigation.astro
@@ -14,7 +14,7 @@ import navigation from '../data/navigation.json';
 			navigation.map(({ title, url }) => (
 				<li class="mie-[10px] xs:mie-[15px]">
 					<Link
-						class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
+						class="text-3 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"
 						href={url}
 					>
 						{title}
diff --git a/src/components/MoreLink.astro b/src/components/MoreLink.astro
index 1db9f32..3ad1f9e 100644
--- a/src/components/MoreLink.astro
+++ b/src/components/MoreLink.astro
@@ -17,7 +17,7 @@ const { href, text, ...props } = Astro.props;
 		<Sprite
 			name="ri:arrow-right-line"
 			aria-hidden="true"
-			class="h-icon w-icon group-hover:translate-x-1 transition-transform duration-500 ease-in-out"
+			class="h-icon w-icon transition-transform duration-500 ease-in-out group-hover:translate-x-1 group-focus:translate-x-1"
 		/>
 	</span>
 </TextLink>
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro
index 6d908a4..b99c7e4 100644
--- a/src/components/RSSLink.astro
+++ b/src/components/RSSLink.astro
@@ -9,7 +9,7 @@ import { Link, Subsubheadline } from '.';
 	<p>
 		<Sprite name="ri:rss-fill" class="inline h-icon w-icon" />
 		<Link
-			class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
+			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"
 			href="/rss.xml"
 			target="_blank"
 		>
diff --git a/src/components/Subnavigation.astro b/src/components/Subnavigation.astro
index 00367e5..3a916ea 100644
--- a/src/components/Subnavigation.astro
+++ b/src/components/Subnavigation.astro
@@ -11,7 +11,7 @@ import { Link } from '.';
 				<li>
 					<Link
 						href={url}
-						class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
+						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"
 					>
 						{title}
 					</Link>
@@ -25,7 +25,7 @@ import { Link } from '.';
 				<li>
 					<Link
 						href={url}
-						class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
+						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"
 					>
 						{title}
 					</Link>
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 2f03694..05f585e 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -21,7 +21,7 @@ export const Tag: FunctionalComponent<Props> = ({
 	const classes = cx(
 		'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden',
 		{
-			'!bg-shibui-500 !text-white hover:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400':
+			'!bg-shibui-500 !text-white hover:!bg-shibui-700 focus:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400 focus:dark:!bg-shibui-400':
 				href,
 			'active [&.active]:!border-black/25 !text-white [&.active]:!bg-accent': active,
 		},
diff --git a/src/styles/global.css b/src/styles/global.css
index d7d25a2..744794e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -163,6 +163,11 @@
 	img.image-no-border {
 		@apply border-0 bg-transparent shadow-none;
 	}
+
+	/** Swup */
+	main[tabindex='-1'] {
+		outline: none;
+	}
 }
 
 @layer components {
@@ -187,21 +192,36 @@
 		}
 	}
 
-	.journal-card {
-		@apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 hover:scale-105 dark:border-white/25 md:row-span-5;
+	.journal-card,
+	.journal-card-link {
+		@apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 outline outline-2 outline-offset-2 outline-transparent hover:scale-105 focus:scale-105 dark:border-white/25 md:row-span-5;
+	}
 
-		& img,
-		& picture {
-			@apply !h-full w-full object-cover;
-		}
+	.journal-card-link {
+		@apply relative block h-full w-full focus:scale-100;
+	}
 
-		& img {
-			@apply !h-full scale-100 blur-0 brightness-[80%] filter transition duration-300 ease-in-out dark:brightness-[50%];
-		}
+	.journal-card:focus-within {
+		@apply outline-current;
+	}
 
-		&:hover img {
-			@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
-		}
+	.journal-card img,
+	.journal-card picture,
+	.journal-card-link img,
+	.journal-card-link picture {
+		@apply !h-full w-full object-cover;
+	}
+
+	.journal-card img,
+	.journal-card-link img {
+		@apply !h-full scale-100 blur-0 brightness-[80%] filter transition duration-300 ease-in-out dark:brightness-[50%];
+	}
+
+	.journal-card:hover img,
+	.journal-card:focus img,
+	.journal-card-link:hover img,
+	.journal-card-link:focus img {
+		@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
 	}
 
 	/** YouTube Lite */