From d6795300b158b85dd9feadd561b6ecd891f5db0d Mon Sep 17 00:00:00 2001
From: "Alessandro (Ale) Segala" <43508+ItalyPaleAle@users.noreply.github.com>
Date: Tue, 10 Jun 2025 12:13:36 -0700
Subject: [PATCH] feat: auto-focus on the login buttons (#647)

---
 .../src/lib/components/ui/button/button.svelte   | 11 +++++++++++
 frontend/src/routes/authorize/+page.svelte       | 16 +++++++++++-----
 frontend/src/routes/login/+page.svelte           |  6 +++---
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index 10f635dc..f4621b4c 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -37,11 +37,13 @@
 			variant?: ButtonVariant;
 			size?: ButtonSize;
 			isLoading?: boolean;
+			autofocus?: boolean;
 		};
 </script>
 
 <script lang="ts">
 	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import { onMount } from 'svelte';
 
 	let {
 		class: className,
@@ -52,9 +54,18 @@
 		type = 'button',
 		disabled,
 		isLoading = false,
+		autofocus = false,
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	onMount(async () => {
+		// Using autofocus can be bad for a11y, but in the case of Pocket ID is only used responsibly in places where there are not many choices, and on buttons only where there's descriptive text
+		if (autofocus) {
+			// Use setTimeout to make sure the element is showing
+			setTimeout(() => ref?.focus(), 100)
+		}
+	});
 </script>
 
 {#if href}
diff --git a/frontend/src/routes/authorize/+page.svelte b/frontend/src/routes/authorize/+page.svelte
index fb5fe5f3..11912df8 100644
--- a/frontend/src/routes/authorize/+page.svelte
+++ b/frontend/src/routes/authorize/+page.svelte
@@ -138,14 +138,20 @@
 				</Card.Root>
 			</div>
 		{/if}
-		<div class="flex w-full max-w-[450px] gap-2">
-			<Button onclick={() => history.back()} class="flex-1" variant="secondary">{m.cancel()}</Button
-			>
+		<!-- Flex flow is reversed so the sign in button, which has auto-focus, is the first one in the DOM, for a11y -->
+		<div class="flex w-full max-w-[450px] gap-2 flex-row-reverse">
 			{#if !errorMessage}
-				<Button class="flex-1" {isLoading} onclick={authorize}>{m.sign_in()}</Button>
+				<Button class="flex-1" {isLoading} onclick={authorize} autofocus={true}>
+					{m.sign_in()}
+				</Button>
 			{:else}
-				<Button class="flex-1" onclick={() => (errorMessage = null)}>{m.try_again()}</Button>
+				<Button class="flex-1" onclick={() => (errorMessage = null)}>
+					{m.try_again()}
+				</Button>
 			{/if}
+			<Button onclick={() => history.back()} class="flex-1" variant="secondary">
+				{m.cancel()}
+			</Button>
 		</div>
 	</SignInWrapper>
 {/if}
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index b097fd7a..46f9a00e 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -52,7 +52,7 @@
 			{m.authenticate_yourself_with_your_passkey_to_access_the_admin_panel()}
 		</p>
 	{/if}
-	<Button class="mt-10" {isLoading} onclick={authenticate}
-		>{error ? m.try_again() : m.authenticate()}</Button
-	>
+	<Button class="mt-10" {isLoading} onclick={authenticate} autofocus={true}>
+		{error ? m.try_again() : m.authenticate()}
+	</Button>
 </SignInWrapper>