From 2648650c12471a24a29e4e9a4e2ac77940cd96ff Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Fri, 14 Feb 2025 16:33:13 +0100
Subject: frontend: Further improve highlight focus

---
 frontend/src/app.css                        | 38 ++++++-----------------------
 frontend/src/lib/components/Card.svelte     |  2 +-
 frontend/src/lib/components/Titlebar.svelte |  2 +-
 frontend/src/lib/gallery/GalleryPage.svelte |  2 +-
 frontend/src/lib/navigation/Link.svelte     | 10 ++++++--
 frontend/src/lib/tabs/Tabs.svelte           |  2 +-
 6 files changed, 19 insertions(+), 37 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app.css b/frontend/src/app.css
index ea2f05a..a7126c5 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -14,7 +14,7 @@
 }
 
 @utility btn {
-	@apply focus-thick focus-slate flex items-center justify-center rounded-xs p-2 text-white transition-colors disabled:opacity-40;
+	@apply flex items-center justify-center rounded-xs p-2 text-white transition-colors focus-visible:outline disabled:opacity-40;
 }
 
 @utility btn-xs {
@@ -22,19 +22,15 @@
 }
 
 @utility btn-blue {
-	@apply btn bg-blue-700 hover:bg-blue-600 disabled:bg-blue-900;
+	@apply btn bg-blue-700 hover:bg-blue-600 focus:outline-blue-400 focus-visible:outline-blue-400 disabled:bg-blue-900;
 }
 
 @utility btn-rose {
-	@apply btn bg-rose-700 hover:bg-rose-600 disabled:bg-rose-900;
+	@apply btn bg-rose-700 hover:bg-rose-600 focus:outline-rose-400 focus-visible:outline-rose-400 disabled:bg-rose-900;
 }
 
 @utility btn-slate {
-	@apply btn bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800;
-}
-
-@utility btn-indigo {
-	@apply btn bg-indigo-700 hover:bg-indigo-600 disabled:bg-indigo-800;
+	@apply btn bg-slate-700 hover:bg-slate-600 focus:outline-slate-400 focus-visible:outline-slate-400 disabled:bg-slate-800;
 }
 
 @utility icon-xs {
@@ -125,26 +121,6 @@
 	grid-template-rows: 500px 1fr;
 }
 
-@utility focus-thin {
-	@apply focus:isolate focus:outline;
-}
-
-@utility focus-thick {
-	@apply focus-visible:isolate focus-visible:outline;
-}
-
-@utility focus-background {
-	@apply focus-visible:bg-indigo-600 focus-visible:outline-hidden;
-}
-
-@utility focus-slate {
-	@apply focus:outline-slate-400 focus-visible:outline-slate-400;
-}
-
-@utility focus-blue {
-	@apply focus:outline-blue-600 focus-visible:outline-blue-600;
-}
-
 @layer base {
 	body {
 		display: grid;
@@ -161,15 +137,15 @@
 	input,
 	textarea,
 	select {
-		@apply focus-thin focus-slate;
+		@apply focus:isolate focus:outline focus:outline-slate-400 focus-visible:isolate focus-visible:outline-slate-400;
 	}
 
 	button {
-		@apply focus-thick focus-slate;
+		@apply focus:outline-slate-400 focus-visible:isolate focus-visible:outline focus-visible:outline-slate-400;
 	}
 
 	a {
-		@apply focus-thick focus-blue;
+		@apply focus-visible:isolate focus-visible:outline-2 focus-visible:outline-blue-600;
 	}
 
 	label {
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index 8066b42..b8e8ecf 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -49,7 +49,7 @@
 
 <a
 	{href}
-	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30"
+	class="grid-card-v sm:grid-card-h relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30 focus-visible:outline-4 focus-visible:outline-blue-600"
 	class:compact
 	class:grid-card-cover-only={coverOnly}
 	{onclick}
diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte
index fe28cfe..bb36d8f 100644
--- a/frontend/src/lib/components/Titlebar.svelte
+++ b/frontend/src/lib/components/Titlebar.svelte
@@ -17,7 +17,7 @@
 		{#if favourite !== undefined}
 			<button
 				type="button"
-				class="focus-background mr-1 flex items-center"
+				class="mr-1 flex items-center focus-visible:bg-yellow-400/20 focus-visible:outline-hidden"
 				title="Toggle favourite"
 				onclick={onfavourite}
 			>
diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte
index f8a81a6..cca8ff3 100644
--- a/frontend/src/lib/gallery/GalleryPage.svelte
+++ b/frontend/src/lib/gallery/GalleryPage.svelte
@@ -56,7 +56,7 @@
 	class:dim
 	role="button"
 	tabindex="0"
-	class="{span} focus-thick focus-blue relative overflow-hidden rounded-sm"
+	class="{span} relative overflow-hidden rounded-sm focus-visible:outline-4 focus-visible:outline-blue-600"
 	onclick={press}
 	onkeydown={press}
 >
diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte
index 9c7e218..d18fe3e 100644
--- a/frontend/src/lib/navigation/Link.svelte
+++ b/frontend/src/lib/navigation/Link.svelte
@@ -22,8 +22,14 @@
 	});
 </script>
 
-<li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700">
-	<a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}>
+<li class:active class="items-center hover:bg-slate-600 [&.active]:bg-indigo-700">
+	<a
+		class="flex items-center focus-visible:bg-slate-600 focus-visible:outline-hidden"
+		{target}
+		{title}
+		{href}
+		use:accelerator={accel}
+	>
 		<div class="flex p-3">
 			{@render children?.()}
 		</div>
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index 3c5611e..c2b12af 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -36,7 +36,7 @@
 					<button
 						type="button"
 						class:active={context.current === id}
-						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 [&.active]:border-b-2 [&.active]:border-indigo-500"
+						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200 focus-visible:border-b-2 focus-visible:!border-slate-200 focus-visible:outline-hidden [&.active]:border-b-2 [&.active]:border-indigo-500"
 						onclick={() => (context.current = id)}
 					>
 						{#if badges[id]}
-- 
cgit v1.2.3-2-gb3c3