Test accessibilità slot vuoti
Pagina di test per verificare il comportamento dell’accessibility tree e dei tool di verifica automatica sui web component Dev Kit Italia.
Ogni sezione include un 🔴 errore intenzionale su un web component Dev Kit e lo stesso errore su HTML classico come controllo. Se il tool segnala entrambi, sta verificando dentro il shadow DOM.
A. Slot vuoti — elementi semantici fantasma
Card
Card completa (🟢 controllo ok)
Card senza slot title (🔴 errore intenzionale)
Card completamente vuota (🔴 errore intenzionale)
Card senza slot title con immagine (🔴 errore intenzionale)
Card con slot title vuoto (🔴 errore intenzionale)
Card full-height senza title (🔴 errore intenzionale)
Accordion
Accordion completo (🟢 controllo ok)
Accordion senza slot heading (🔴 errore intenzionale)
Accordion item vuoto (🔴 errore intenzionale)
Input
Input con label (🟢 controllo ok)
Input senza label (🔴 errore intenzionale)
Button
Button con testo (🟢 controllo ok)
Button senza testo (🔴 errore intenzionale)
Callout
Callout completo (🟢 controllo ok)
Testo del callout di esempio.
Callout senza slot title (🔴 errore intenzionale)
Testo del callout senza titolo.
Modal
Modal completa (🟢 controllo ok)
Contenuto della modale.
Modal senza slot header (🔴 errore intenzionale)
Contenuto senza titolo.
Dropdown
Dropdown completo (🟢 controllo ok)
Dropdown senza label (🔴 errore intenzionale)
Select
Select con label (🟢 controllo ok)
Select senza label (🔴 errore intenzionale)
Checkbox
Checkbox con label (🟢 controllo ok)
Checkbox senza label (🔴 errore intenzionale)
Radio button
Radio group completo (🟢 controllo ok)
Radio group senza label (🔴 errore intenzionale)
Breadcrumbs
Breadcrumbs completo (🟢 controllo ok)
Breadcrumbs vuoto (🔴 errore intenzionale)
Chip
Chip con label (🟢 controllo ok)
Chip senza label (🔴 errore intenzionale)
Hero
Hero con contenuto (🟢 controllo ok)
Hero vuoto (🔴 errore intenzionale)
B. Contrasto colori nel shadow DOM
Ogni coppia confronta lo stesso errore di contrasto su un web component e su HTML classico. Se il tool segnala entrambi, sta calcolando il contrasto dentro il shadow DOM.
Card Dev Kit con contrasto 🔴 errato (via style sugli slot)
HTML classico con stesso contrasto 🔴 errato (controllo)
Titolo con contrasto insufficiente
Testo con contrasto insufficiente — grigio chiaro su bianco (#aaa su #fff = ratio 2.32:1).
Card Dev Kit con contrasto corretto (🟢 controllo ok)
Callout con testo su sfondo colorato
Testo su sfondo colorato — il contrasto è verificato dai tool?
Chip varianti colore
B. Contrasto colori test con parts
Verifica se i tool calcolano il contrasto sui testi renderizzati nel shadow DOM.
Il test usa il selettore ::part() per forzare un colore a basso contrasto
sugli elementi dentro il shadow DOM dei web component.
Card Dev Kit con contrasto 🔴 errato (via ::part nel shadow DOM)
HTML classico con stesso contrasto 🔴 errato (controllo)
Titolo con contrasto insufficiente
Testo con contrasto insufficiente — grigio chiaro su bianco (#aaa su #fff = ratio 2.32:1).
Card Dev Kit con contrasto corretto (🟢 controllo ok)
Button Dev Kit con contrasto 🔴 errato (via ::part nel shadow DOM)
Button HTML classico con stesso contrasto 🔴 errato (controllo)
C. Form association cross-shadow-root
Verifica se un <form> nel light DOM riceve i valori degli input nel shadow DOM.
Compilare i campi e cliccare “Invia” — se il riquadro mostra i dati, la form association funziona.
Form Dev Kit dentro form nativo
Clicca "Invia form" per verificare i dati ricevuti dal form nativo.
Form HTML classico (🟢 controllo)
Clicca "Invia form classico" per verificare i dati.
D. ARIA relationships cross-shadow-root
Per spec WCAG, aria-describedby e aria-labelledby non funzionano attraverso
i confini del shadow DOM. Dev Kit usa it-aria-describedby e it-aria-labelledby
che il BaseComponent traduce in attributi ARIA.
Input Dev Kit con aria-describedby che punta a ID esterno (🔴 errore atteso)
Questa descrizione è nel light DOM, fuori dal web component.
Input HTML classico con aria-describedby (🟢 controllo — deve funzionare)
Questa descrizione è nel light DOM.
Input Dev Kit con aria-labelledby che punta a ID esterno (🔴 errore atteso)
Etichetta esterna nel light DOM
Input HTML classico con aria-labelledby (🟢 controllo — deve funzionare)
Etichetta esterna nel light DOM
E. Focus management
Premere Tab dal primo all’ultimo elemento e verificare l’ordine. La sequenza attesa è: 1 → 2 → 3 → 4 → 5 → 6. Verificare se ci sono salti, elementi non raggiungibili, o ordine invertito.
F. Modal: focus trap e ARIA
Modal con focus trap
Aprire la modal, premere Tab ripetutamente. Il focus deve ciclare solo tra gli elementi interni della modale. Premere Escape — la modal deve chiudersi e il focus tornare sul trigger.