Focus
Un indicatore immediato e condiviso, additivo agli stati reali e governato da Base UI quando il focus si trasferisce tra superfici.
@qoovex/ui/styles/base.cssLifecycle canonico
Il focus non è un’animazione. Segui il percorso con Tab, Shift+Tab, Enter, Spazio ed Escape: ogni fase usa focus DOM reale.
01
Unfocused
Lo stato resta completo senza dipendere dall’indicatore visivo.
02
Focus-visible
Tab o navigazione da tastiera mostrano subito l’outline canonico a 2px.
03
Interaction
Enter, Spazio e frecce agiscono senza rimuovere selection o validation.
04
Transfer
Un overlay (dialog o menu) riceve il focus secondo il lifecycle Base UI.
05
Restoration
Chiusura ed Escape riportano il focus al trigger stabile di origine.
Percorso tastiera reale
Outline opaco da 2px con offset 2px. Non cambia la box geometry, non transiziona e resta separato da hover, pressed e stato persistente.
Inserisci il codice completo.
QV
Lo stato open resta indipendente dal focus.
Composizione e precedenza
Focus-visible è sempre additivo quando l’elemento resta focusabile; availability e semantica sottostante non vengono riscritte.
selected + focus
La selezione resta leggibile; l’outline si aggiunge senza mascherarla.
checked + focus
Indicatore checked e focus-visible convivono nello stesso controllo.
invalid + focus
Bordo e messaggio invalid non vengono sostituiti dall'anello di focus.
readonly + focus
Il contenuto resta selezionabile e il focus localizzabile.
destructive + focus
Il tono semantico distruttivo resta distinto dall’outline neutro.
open + focus
Lo stato open resta indipendente dal focus della tastiera.
Transfer e restoration (Overlay)
Quando si apre un dialog, Base UI cattura il focus, lo indirizza al primo controllo interno e impedisce la fuoriuscita da tastiera (Focus Trap). Alla chiusura o premendo Escape, il focus viene ripristinato sul trigger.
Regole di trasferimento
Ciclo di vita del focus gestito da Base UI
1
Trigger StabileL'utente preme Enter o Spazio sul pulsante trigger.
2
Focus Trap & Initial FocusIl focus si sposta al primo campo interattivo nel dialog.
3
Ciclo Tab RistrettoLa navigazione con Tab circola solo all'interno dell'overlay.
4
Restoration AutomaticaEscape o chiusura restituiscono il focus al trigger originario.
Specimen Interattivo: Dialog Transfer
Clicca o premi Enter sul pulsante sopra per testare il transfer
Focus not obscured (WCAG 2.2 SC 2.4.11 / 2.4.12)
Gli elementi sticky (come topbar o intestazioni di sezione) non devono coprire o nascondere i controlli quando ricevono il focus da tastiera. La combinazione di scroll-padding-top sul contenitore e scroll-margin-top sul target riserva lo spazio visivo necessario.
Meccanica Focus Not Obscured
Come Qoovex previene l'occlusione del focus
Scrollport Padding: Il contenitore con scroll definisce scroll-py-14 con spazio sufficiente per la barra sticky di questo specimen.
Target Margin: L'elemento interattivo possiede scroll-m-14. Quando l'utente naviga con Tab, il browser calcola la posizione arrestando lo scroll prima che il controllo finisca sotto l'header.
<div className="scroll-py-14 overflow-y-auto">
<header className="sticky top-0 z-10">...</header>
<button className="scroll-m-14">Azione</button>
</div>Specimen Interattivo: Scrollport con Sticky Header
Filtri & Lavorazioni Cantiere
01. Tracciamento muri divisoriFase strutturale attiva
Primo target02. Posa canalizzazioni impianto elettrico
Verifica quote di altezza scatole di derivazione secondo schema esecutivo.
03. Collaudo tubazioni idrauliche sottotraccia
Prova di pressione a 6 bar registrata nel registro di cantiere.
PUNTO DI ARRESTO SCROLL (NAVIGA CON TAB)