fix(settings): fix security and accessibility issues

- Add autoComplete attrs to password inputs (current-password, new-password)
  to fix browser autofill warnings
- Add autoComplete="new-password" to delete dialog password input to
  prevent browser from pre-filling password and leaking email to search bar
- Replace VAPID key env var name in user-facing error with generic message
- Remove hardcoded 'Checkbox' aria-label fallback from checkbox component;
  let native label association provide accessible name instead

Fixes: Settings bugs #7, #8, #10, #11, #12, #13

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke 2026-03-25 23:42:00 +01:00
parent 2309a6d7d5
commit d840414673
4 changed files with 6 additions and 6 deletions

View file

@ -96,11 +96,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
className="peer sr-only"
onChange={handleChange}
// CRITIQUE FIX #37: Ajouter aria-label si aucun label n'est fourni
aria-label={
!label && !props['aria-label'] && !props['aria-labelledby']
? 'Checkbox'
: undefined
}
aria-label={props['aria-label'] || undefined}
aria-labelledby={label ? labelId : undefined}
{...props}
/>

View file

@ -18,7 +18,7 @@ export function usePushSubscribe() {
const vapidKey = env.FCM_VAPID_KEY;
if (!vapidKey) {
setError('VAPID key non configurée (VITE_FCM_VAPID_KEY)');
setError('Les notifications push ne sont pas disponibles pour le moment.');
return false;
}

View file

@ -98,6 +98,7 @@ export function AccountSettingsDeleteCard({
<Input
id="delete-password"
type="password"
autoComplete="new-password"
value={deletePassword}
onChange={(e) => setDeletePassword(e.target.value)}
required

View file

@ -53,6 +53,7 @@ export function AccountSettingsPasswordCard({
<Input
id="current-password"
type="password"
autoComplete="current-password"
value={currentPassword}
onChange={(e) => setCurrentPassword(e.target.value)}
required
@ -63,6 +64,7 @@ export function AccountSettingsPasswordCard({
<Input
id="new-password"
type="password"
autoComplete="new-password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
required
@ -77,6 +79,7 @@ export function AccountSettingsPasswordCard({
<Input
id="confirm-password"
type="password"
autoComplete="new-password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required