till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-25 09:54:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(auth-ui): add focus traps to modals + aria-disabled on all buttons

Browse source 
- Add focus trap (Tab/Shift+Tab cycling) to AuthGateModal and
  GuestWelcomeModal with auto-focus on primary action
- Add aria-disabled to all disabled buttons across 8 components
  for proper screen reader announcements

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 14:22:25 +02:00
parent 201819280e
commit e5c63f65fb
8 changed files with 98 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/shared-auth-ui/src/pages/ForgotPasswordPage.svelte
View file

@ -250,6 +250,7 @@
<button
type="submit"
disabled={loading}
aria-disabled={loading}
class="w-full h-14 border-2 rounded-xl font-medium flex items-center justify-center gap-2 cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed"
style:background-color={primaryColor + '60'}
style:border-color={primaryColor}

5
packages/shared-auth-ui/src/pages/LoginPage.svelte
View file

@ -561,6 +561,7 @@
<button
type="submit"
disabled={loading || !twoFactorCode}
aria-disabled={loading || !twoFactorCode}
class="w-full h-14 border-2 rounded-xl font-medium flex items-center justify-center gap-2 cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed"
style:background-color={primaryColor + '60'}
style:border-color={primaryColor}
@ -636,6 +637,7 @@
type="button"
onclick={handlePasskeySignIn}
disabled={loading || showSuccess}
aria-disabled={loading || showSuccess}
class="w-full h-14 border-2 rounded-xl font-medium flex items-center justify-center gap-2 cursor-pointer transition-opacity bg-transparent hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed"
style:border-color={primaryColor}
style:color={isDark ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.9)'}
@ -726,6 +728,7 @@
class="bg-transparent border-none cursor-pointer font-medium text-sm p-0 text-left underline hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed"
onclick={handleResendVerification}
disabled={resendingVerification}
aria-disabled={resendingVerification}
style:color={primaryColor}
>
{resendingVerification ? t.resendingVerification : t.resendVerification}
@ -842,6 +845,7 @@
<button
type="submit"
disabled={loading || showSuccess || rateLimitCountdown > 0}
aria-disabled={loading || showSuccess || rateLimitCountdown > 0}
class="w-full h-14 border-2 rounded-xl font-medium flex items-center justify-center gap-2 cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed"
style:background-color={showSuccess ? '#22c55e' : primaryColor + '60'}
style:border-color={showSuccess ? '#22c55e' : primaryColor}
@ -892,6 +896,7 @@
type="button"
onclick={handleSendMagicLink}
disabled={sendingMagicLink || !email}
aria-disabled={sendingMagicLink || !email}
class="w-full bg-transparent border-none cursor-pointer font-medium text-sm p-3 text-center transition-opacity hover:opacity-70 disabled:opacity-40 disabled:cursor-not-allowed"
style:color={primaryColor}
>

2
packages/shared-auth-ui/src/pages/RegisterPage.svelte
View file

@ -374,6 +374,7 @@
type="button"
onclick={handleResendVerification}
disabled={resendingVerification}
aria-disabled={resendingVerification}
class="w-full flex items-center justify-center gap-2 h-11 rounded-lg font-medium transition-opacity hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed border-[1.5px]"
style:background-color="{primaryColor}40"
style:border-color={primaryColor}
@ -504,6 +505,7 @@
<button
type="submit"
disabled={loading}
aria-disabled={loading}
class="w-full h-14 border-2 rounded-xl font-medium flex items-center justify-center gap-2 cursor-pointer transition-opacity hover:opacity-85 disabled:opacity-50 disabled:cursor-not-allowed"
style:background-color="{primaryColor}60"
style:border-color={primaryColor}