MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(autocomplete) : anneau focus clavier + navigation clavier APG

Browse Source 
- Anneau de focus clavier (clavier-only) ; quand la liste est ouverte,
  l'anneau entoure tout le bloc input + liste d'un seul tenant
  (utilitaires CSS .m-combo-ring-top / .m-combo-ring-bottom)
- Navigation clavier aux normes WAI-ARIA APG : scroll auto de l'option
  active dans la vue, ArrowUp ouvre sur la dernière option, Home/End,
  Tab ferme la liste

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-06-09 16:51:42 +02:00
parent 88c2a00d89
commit 379f4a2d6f
2 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/malio.css
+17
View File
@@ -18,6 +18,23 @@
outline: 2px solid rgb(var(--m-primary) / 1);
outline-offset: 2px;
}
/* Anneau de focus clavier pour un combobox ouvert (input + liste) : l'anneau
entoure le bloc entier d'un seul tenant. L'input porte le contour haut+côtés,
la liste le contour côtés+bas ; la jonction (bas de l'input / haut de la liste)
reste sans contour pour un raccord sans couture. */
.m-combo-ring-top {
box-shadow:
-2px 0 0 0 rgb(var(--m-primary) / 1),
2px 0 0 0 rgb(var(--m-primary) / 1),
0 -2px 0 0 rgb(var(--m-primary) / 1);
}
.m-combo-ring-bottom {
box-shadow:
-2px 0 0 0 rgb(var(--m-primary) / 1),
2px 0 0 0 rgb(var(--m-primary) / 1),
0 2px 0 0 rgb(var(--m-primary) / 1);
}
}
@layer base {