mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-16 07:16:12 +00:00
Code Activity

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

Browse Source
This commit is contained in:
Alessandro (Ale) Segala
2025-06-10 12:13:36 -07:00
committed by GitHub
parent fd3c76ffa3
commit d6795300b1
3 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/routes/authorize/+page.svelte
View File

@@ -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}