Una finestra di dialogo modale è un tipo speciale di finestra popup in una pagina web: si tratta di un popup che interrompe l'utente per concentrarsi su se stesso. Esistono alcuni validi casi d'uso per la comparsa di finestre di dialogo, ma prima di farlo è necessario fare molta attenzione. Le finestre di dialogo modali costringono gli utenti a concentrarsi su contenuti specifici e, almeno temporaneamente, a ignorare il resto della pagina.
Le finestre di dialogo possono essere modali (è possibile interagire solo con i contenuti al loro interno) o non modali (è comunque possibile interagire con i contenuti al di fuori della finestra di dialogo). Le finestre di dialogo modali vengono visualizzate nella parte superiore del resto dei contenuti della pagina. Il resto della pagina è inerte e, per impostazione predefinita, è oscurato da uno sfondo semitrasparente.
L'elemento HTML semantico <dialog> per creare una finestra di dialogo
include la semantica, le interazioni da tastiera e tutte le proprietà e i metodi dell'interfaccia HTMLDialogElement.
Finestre di dialogo modali
Ecco un esempio di <dialog> modale. Apri la finestra di dialogo con il pulsante "Apri finestra di dialogo modale". Una volta aperta, la finestra di dialogo può essere chiusa in tre modi: con il tasto Esc, inviando un modulo con un pulsante con formmethod="dialog" impostato (o se per il modulo stesso è impostato method="dialog") e il metodo HTMLDialogElement.close().
HTMLDialogElement prevede tre metodi principali, insieme a tutti quelli ereditati da HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Poiché questo <dialog> è stato aperto con il metodo HTMLDialogElement.showModal(), è una finestra di dialogo modale. L'apertura di una finestra di dialogo modale disattiva e oscura tutto tranne la finestra di dialogo stessa. Passando il mouse sopra l'interfaccia utente al di fuori della finestra di dialogo, noterai che tutti gli elementi si comportano come se fosse impostato pointer-events: none;; anche il pulsante che apre la finestra di dialogo non reagisce alle interazioni.
Quando si apre la finestra di dialogo, lo stato attivo si sposta sulla finestra di dialogo. Lo stato attivo viene impostato sul primo elemento nell'ordine di navigazione sequenziale della tastiera all'interno della finestra di dialogo.
Se premi ripetutamente il tasto tab, noterai che solo i contenuti all'interno della finestra di dialogo possono essere impostati come attivi quando la finestra di dialogo modale è
aperta. Tutto al di fuori della finestra di dialogo modale è inerte finché la finestra di dialogo è aperta.
Quando una finestra di dialogo è chiusa, modale o no, lo stato attivo viene restituito all'elemento che ha aperto la finestra di dialogo. Se apri in modo programmatico una finestra di dialogo non basata sull'azione dell'utente, prova a riconsiderarla. Se necessario, assicurati che lo stato attivo venga riportato dove si trovava prima dell'apertura della finestra di dialogo, specialmente se l'utente ignora la finestra di dialogo senza interagirvi.
Esiste un attributo inert globale che può essere utilizzato per disattivare un elemento e tutti i suoi discendenti, ad eccezione di qualsiasi finestra di dialogo attiva. Quando si apre una finestra di dialogo modale utilizzando showModal(), l'inerzia o la disattivazione sono senza costi; l'attributo non è impostato esplicitamente.
È possibile applicare uno stile allo sfondo che nasconde tutto tranne la finestra di dialogo utilizzando lo pseudo elemento ::backdrop. Lo sfondo viene visualizzato soltanto quando viene visualizzato un <dialog> con il metodo .showModal(). Questo pseudo-elemento corrisponde a tutti gli sfondi, incluso quello visualizzato quando si utilizza l'API FullScreen, ad esempio durante la visualizzazione di un video in modalità a schermo intero che non ha le stesse proporzioni dello schermo o del monitor.
Finestre di dialogo non modali
Analogamente, l'HTMLDialogElement.show() apre una finestra di dialogo, ma senza aggiungere uno sfondo o causare l'inerzia degli elementi.
Il tasto Esc non chiude le finestre di dialogo non modali. Per questo motivo, è ancora più importante includere un metodo per chiudere la finestra di dialogo non modale. In questo modo, se la finestra di dialogo è più vicina all'esterno, ricorda che l'elemento attivo verrà impostato sull'elemento che ha aperto la finestra di dialogo, il che potrebbe non garantire un'esperienza utente ottimale.
Sebbene le specifiche non richiedano ufficialmente un pulsante per chiudere la finestra di dialogo, è consigliabile considerarlo obbligatorio. Il tasto Esc chiude una finestra di dialogo modale, ma non una non modale. Un pulsante visibile in grado di attivare lo stato attivo migliora l'accessibilità e l'esperienza utente.
Chiusura di una finestra di dialogo
Non è necessario il metodo HTMLDialogElement.close() per chiudere una finestra di dialogo. Non hai bisogno di JavaScript. Per chiudere <dialog>
senza JavaScript, includi un modulo con un metodo di dialogo impostando method="dialog" su <form> o formmethod="dialog"
sul pulsante.
Quando un utente invia un messaggio con il metodo dialog, lo stato dei dati inseriti dall'utente viene mantenuto. Quando è presente un evento di invio, il modulo viene sottoposto alla convalida di un vincolo (a meno che non sia impostato novalidate), i dati utente non vengono né cancellati né inviati.
Un pulsante di chiusura senza JavaScript può essere scritto come:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
In questo esempio, potresti aver notato l'attributo autofocus
impostato al <button> di chiusura. Gli elementi con l'attributo autofocus impostato all'interno di un <dialog> non saranno impostati come attivi sul caricamento della pagina (a meno che la pagina non venga caricata con la finestra di dialogo visibile). Tuttavia, lo stato attivo sarà impostato all'apertura della finestra di dialogo.
Per impostazione predefinita, all'apertura di una finestra di dialogo, il primo elemento attivabile al suo interno verrà impostato come attivo, a meno che per un altro elemento all'interno della finestra di dialogo sia impostato l'attributo autofocus. L'impostazione dell'attributo autofocus sul pulsante di chiusura assicura che venga impostato lo stato attivo all'apertura della finestra di dialogo. Tuttavia, l'inclusione di autofocus in un <dialog>
dovrebbe essere effettuata con molta considerazione. Tutti gli elementi della sequenza che precedono l'elemento con focus automatico vengono ignorati.
Approfondiremo questo attributo nella lezione principale.
L'interfaccia HTMLDialogElement include una proprietà returnValue. Se invii un modulo con un method="dialog", il valore returnValue viene impostato sull'eventuale name del pulsante di invio utilizzato per inviare il modulo. Se avessimo scritto <button type="submit" name="toasty">close</button>, returnValue sarebbe toasty.
Quando si apre una finestra di dialogo, è presente l'attributo booleano open, il che significa che la finestra di dialogo è attiva e con cui è possibile interagire. Quando si apre una finestra di dialogo aggiungendo l'attributo open anziché tramite .show() o .showModal(), la finestra di dialogo non sarà modale. La proprietà HTMLDialogElement.open restituisce true o false, a seconda che la finestra di dialogo sia disponibile per l'interazione, non che sia modale o meno.
Sebbene JavaScript sia il metodo preferito per aprire una finestra di dialogo, includere l'attributo open al caricamento della pagina e poi rimuoverlo con .close() può contribuire a garantire che la finestra di dialogo sia disponibile anche quando JavaScript non lo è.
Ulteriori dettagli
Non usare tabindex
L'elemento attivato per aprire la finestra di dialogo e il pulsante di chiusura al suo interno (e possibilmente altri contenuti) possono essere in stato attivo e sono interattivi. L'elemento <dialog> non è interattivo e non è attivo. Non aggiungere la proprietà tabindex
alla finestra di dialogo.
Ruoli ARIA
Il ruolo implicito è dialog. Se la finestra di dialogo è una finestra di conferma che comunica un messaggio importante che richiede una conferma o un'altra risposta dell'utente, imposta role="alertdialog".
Anche la finestra di dialogo deve avere un nome accessibile. Se il testo visibile può fornire il nome accessibile, aggiungi aria-labelledby="idOfLabelingText".
Valori predefiniti CSS
Tieni presente che i browser forniscono stili predefiniti per dialog. Firefox, Chrome ed Edge hanno impostato color: CanvasText; background-color: Canvas;
e Safari imposta color: black; background-color: white; nei rispettivi fogli di stile user agent. color viene ereditato
da dialog e non da body o :root, il che potrebbe essere imprevisto. La proprietà background-color non viene ereditata.
Verifica la tua comprensione
Verifica le tue conoscenze sull'elemento della finestra di dialogo.
Come definisci lo stile dell'area dietro la finestra di dialogo?
::background.::backdrop.background.