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/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 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'frontend/src/lib')

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