feat: auto-focus on the login buttons (#647)

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}

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}

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>