feat(input) : anneau de focus clavier sur InputText et InputEmail

Anneau outline m-primary affiché uniquement à la navigation clavier (Tab),
pas au clic souris. Composable partagé useKbdFocusRing (détection de modalité
clavier/souris) + utilitaire CSS .m-focus-ring-kbd. Le visuel existant
(grossissement, label flottant, bordure bleue) reste inchangé.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 16:16:31 +02:00
parent 092b50afee
commit 4802f23b72
4 changed files with 78 additions and 4 deletions
+18
View File
@@ -2,6 +2,24 @@
@tailwind components;
@tailwind utilities;
@layer components {
/* Anneau de focus clavier standard (navigation au Tab), invisible à la souris.
Deux déclencheurs, même rendu :
- .m-focus-ring → s'appuie sur :focus-visible natif. Pour les éléments
où :focus-visible se limite déjà au clavier (boutons,
onglets, tuiles, checkbox/radio…).
- .m-focus-ring-kbd → classe ajoutée en JS (via useKbdFocusRing) uniquement
quand le focus vient du clavier. Pour les champs texte,
où :focus-visible natif se déclenche aussi à la souris.
Le `:focus` sur .m-focus-ring-kbd élève la spécificité pour passer devant le
`outline-none` des inputs. */
.m-focus-ring:focus-visible,
.m-focus-ring-kbd:focus {
outline: 2px solid rgb(var(--m-primary) / 1);
outline-offset: 2px;
}
}
@layer base {
:root {
/* ── Globales ── */