fix(ux-audit): CRITICAL + HIGH fixes — a11y, reduced-motion, forms, keyboard nav
All checks were successful
CI / Lint, Unit Tests & Build (push) Successful in 6m24s
CI / Deploy production (on server) (push) Successful in 23s

Global (globals.css):
- prefers-reduced-motion: désactive toutes les animations/transitions
- focus-visible:ring global sur tous les éléments interactifs

Search modal:
- role="dialog" + aria-modal="true" + aria-label
- onClick backdrop ferme la modale

Insights peek:
- DOMPurify.sanitize() sur dangerouslySetInnerHTML (XSS fix)

Login form:
- autoComplete="email" / "current-password"
- htmlFor sur tous les labels

Register form:
- autoComplete="name" / "email" / "new-password"
- htmlFor sur tous les labels

GridCard (notes-list-views):
- Actions visibles sur mobile (opacity-100 sm:opacity-0)
- aria-sort sur colonne triable
- role="button" + tabIndex + onKeyDown sur lignes table

Editorial view:
- role="button" + tabIndex + onKeyDown sur articles
- Menu trigger aria-label + visible mobile

Toolbar:
- aria-label voice i18n
This commit is contained in:
Antigravity
2026-07-04 21:37:56 +00:00
parent cf5d6a202b
commit e72ca26f97
8 changed files with 52 additions and 12 deletions

View File

@@ -66,7 +66,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
<form action={dispatch} className="space-y-4">
<div className="space-y-1.5">
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
<label htmlFor="name" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
{t('auth.name')}
</label>
<div className="relative group">
@@ -78,6 +78,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
id="name"
type="text"
name="name"
autoComplete="name"
placeholder={t('auth.namePlaceholder')}
required
/>
@@ -85,7 +86,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
</div>
<div className="space-y-1.5">
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
<label htmlFor="email" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
{t('auth.email')}
</label>
<div className="relative group">
@@ -97,6 +98,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
id="email"
type="email"
name="email"
autoComplete="email"
placeholder={t('auth.emailPlaceholder')}
required
/>
@@ -104,7 +106,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
</div>
<div className="space-y-1.5">
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
<label htmlFor="password" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
{t('auth.password')}
</label>
<div className="relative group">
@@ -116,6 +118,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
id="password"
type="password"
name="password"
autoComplete="new-password"
placeholder={t('auth.passwordMinChars')}
required
minLength={6}
@@ -124,7 +127,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
</div>
<div className="space-y-1.5">
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
<label htmlFor="confirmPassword" className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
{t('auth.confirmPassword')}
</label>
<div className="relative group">
@@ -136,6 +139,7 @@ export function RegisterForm({ googleAuthEnabled = false }: { googleAuthEnabled?
id="confirmPassword"
type="password"
name="confirmPassword"
autoComplete="new-password"
placeholder={t('auth.confirmPasswordPlaceholder')}
required
minLength={6}