feat(uat-batch-21): a11y — auth-page link contrast bumped past AA

`text-[#007bff] hover:underline` (light blue, 12-14px) was falling
below WCAG 1.4.3 AA contrast against the auth shell's white card.
Bumped to `text-[#0058b3]` (darker variant of the same hue) and
added `underline underline-offset-2 hover:no-underline` so the link
is always visibly underlined as a backup affordance.

Affects: /login, /reset-password, /set-password, /portal/login,
/portal/forgot-password, portal password-set-form. Button bg colors
(white-text on the same blue) are unchanged — those pass AA at
button sizes.

tsc clean. 1419/1419 vitest pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-21 18:47:33 +02:00
parent 28eb76a9d8
commit ae8867d832
6 changed files with 27 additions and 9 deletions

View File

@@ -133,7 +133,10 @@ export default function LoginPage() {
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label htmlFor="password">Password</Label> <Label htmlFor="password">Password</Label>
<Link href="/reset-password" className="text-xs text-[#007bff] hover:underline"> <Link
href="/reset-password"
className="text-xs text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Forgot password? Forgot password?
</Link> </Link>
</div> </div>

View File

@@ -88,7 +88,10 @@ export default function ResetPasswordPage() {
If an account exists for that email address, we have sent a password reset link. Please If an account exists for that email address, we have sent a password reset link. Please
check your inbox and spam folder. check your inbox and spam folder.
</p> </p>
<Link href="/login" className="inline-block text-sm text-[#007bff] hover:underline"> <Link
href="/login"
className="inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Back to sign in Back to sign in
</Link> </Link>
</div> </div>
@@ -118,7 +121,10 @@ export default function ResetPasswordPage() {
<p className="text-center text-sm text-gray-500"> <p className="text-center text-sm text-gray-500">
Remember your password?{' '} Remember your password?{' '}
<Link href="/login" className="text-[#007bff] hover:underline"> <Link
href="/login"
className="text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Sign in Sign in
</Link> </Link>
</p> </p>

View File

@@ -120,7 +120,10 @@ function SetPasswordInner() {
Please use the link from the email we sent you. If the link is broken, ask your Please use the link from the email we sent you. If the link is broken, ask your
administrator for a new one. administrator for a new one.
</p> </p>
<Link href="/login" className="inline-block text-sm text-[#007bff] hover:underline"> <Link
href="/login"
className="inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Back to sign in Back to sign in
</Link> </Link>
</div> </div>

View File

@@ -44,7 +44,7 @@ export default function PortalForgotPasswordPage() {
</p> </p>
<Link <Link
href="/portal/login" href="/portal/login"
className="mt-6 inline-block text-sm text-[#007bff] hover:underline" className="mt-6 inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
> >
Back to sign in Back to sign in
</Link> </Link>
@@ -95,7 +95,10 @@ export default function PortalForgotPasswordPage() {
<p className="text-center text-sm text-gray-500"> <p className="text-center text-sm text-gray-500">
Remember your password?{' '} Remember your password?{' '}
<Link href="/portal/login" className="text-[#007bff] hover:underline"> <Link
href="/portal/login"
className="text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Sign in Sign in
</Link> </Link>
</p> </p>

View File

@@ -91,7 +91,10 @@ export default function PortalLoginPage() {
<div className="space-y-1.5"> <div className="space-y-1.5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<Label htmlFor="password">Password</Label> <Label htmlFor="password">Password</Label>
<Link href="/portal/forgot-password" className="text-xs text-[#007bff] hover:underline"> <Link
href="/portal/forgot-password"
className="text-xs text-[#0058b3] underline-offset-2 underline hover:no-underline"
>
Forgot password? Forgot password?
</Link> </Link>
</div> </div>

View File

@@ -128,7 +128,7 @@ export function PasswordSetForm({
</p> </p>
<Link <Link
href="/portal/forgot-password" href="/portal/forgot-password"
className="inline-block text-sm text-[#007bff] hover:underline" className="inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
> >
Request a new link Request a new link
</Link> </Link>
@@ -148,7 +148,7 @@ export function PasswordSetForm({
<p className="text-gray-500 text-sm">{successDescription}</p> <p className="text-gray-500 text-sm">{successDescription}</p>
<Link <Link
href="/portal/login" href="/portal/login"
className="mt-6 inline-block text-sm text-[#007bff] hover:underline" className="mt-6 inline-block text-sm text-[#0058b3] underline-offset-2 underline hover:no-underline"
> >
Sign in Sign in
</Link> </Link>