Finestra di dialogo

Una finestra di dialogo modale è un tipo speciale di finestra popup su una pagina web: un popup che interrompe l'attenzione dell'utente su se stessa. Esistono alcuni casi d'uso validi per aprire una finestra di dialogo, ma va bene comunque eseguire prima di effettuare questa operazione. Le finestre di dialogo modali obbligano gli utenti a concentrarsi su contenuti specifici e, almeno temporaneamente, a ignorare nel resto della pagina.

Le finestre di dialogo possono essere modali (con cui è possibile interagire solo con i contenuti della finestra di dialogo) o non modali (è comunque possibile interagire) con contenuti esterni alla finestra di dialogo). Le finestre di dialogo modali vengono visualizzate sopra gli altri contenuti della pagina. Il resto della pagina è inerte e, per impostazione predefinita, oscurata 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 di HTMLDialogElement.

Finestre di dialogo modali

Ecco un esempio di <dialog> modale. Apri la finestra di dialogo con "Apri finestra di dialogo modale" . Una volta aperta, la finestra di dialogo può essere chiusa in tre modi: utilizzando il tasto Esc, inviando un modulo con un pulsante con le formmethod="dialog" (o se nel modulo stesso è impostato method="dialog") e il metodo HTMLDialogElement.close().

HTMLDialogElement prevede tre metodi principali, oltre a tutti i metodi ereditati da HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Perché questa <dialog> è stata aperta tramite HTMLDialogElement.showModal() , si tratta di una finestra di dialogo modale. L'apertura di una finestra di dialogo modale disattiva e oscura tutto tranne la finestra di dialogo stessa. Se passa il mouse sopra l'interfaccia utente al di fuori della finestra di dialogo, noterai che tutti gli elementi si comportano come se pointer-events: none; è stata impostata. anche il pulsante che apre la finestra di dialogo non reagisce alle interazioni.

Quando la finestra di dialogo è aperta, lo stato attivo si sposta all'interno della finestra. 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 attivati, mentre la finestra di dialogo modale è aperta. Tutto ciò che è esterno alla finestra di dialogo modale è inerte finché la finestra di dialogo è aperta.

Quando una finestra di dialogo è chiusa, modale o meno, lo stato attivo viene riportato sull'elemento che ha aperto la finestra di dialogo. Se utilizzi in modo programmatico apri una finestra di dialogo non basata sull'azione dell'utente, riconsidera. Se necessario, assicurati che lo stato attivo venga riportato dove si trovava prima dell'apertura della finestra di dialogo in particolare se l'utente chiude 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 quelli attivi . Quando una finestra di dialogo modale viene aperta utilizzando showModal(), l'inerzia o la disattivazione sono senza costi; l'attributo non sia impostata in modo esplicito.

Per lo sfondo che oscura tutto tranne la finestra di dialogo puoi applicare uno stile utilizzando ::backdrop pseudo-elemento. Lo sfondo viene visualizzato solo quando viene visualizzato un elemento <dialog> con il metodo .showModal(). Questo pseudo-elemento corrisponde a tutti gli sfondi, incluso quello visualizzato quando è in uso l'API FullScreen, ad esempio quando si guarda un video in modalità a schermo intero che non ha le stesse proporzioni dello schermo o del monitor.

Finestre di dialogo non modali

In modo simile, HTMLDialogElement.show() apre una finestra di dialogo, ma senza aggiungere uno sfondo o rendere inerte qualsiasi elemento. Il tasto Esc non chiude le finestre di dialogo non modali. Per questo motivo, è ancora più importante assicurarsi di includere un metodo di chiusura della finestra di dialogo non modale. In questo modo, se più vicino è al di fuori della finestra di dialogo, lo stato attivo verrà impostato sull'elemento. che ha aperto la finestra di dialogo, che potrebbe non essere la migliore esperienza utente.

Sebbene un pulsante per chiudere la finestra di dialogo non sia ufficialmente richiesto dalla specifica, consideralo come obbligatorio. Il tasto Esc chiuderà una finestra di dialogo modale, ma non una non modale. Un pulsante visibile in grado di attivare lo stato attivo migliora l'accessibilità e un'esperienza utente positiva.

Chiusura di una finestra di dialogo

Non è necessario il metodo HTMLDialogElement.close() per chiudere una finestra di dialogo. JavaScript non è necessario. 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 effettua l'invio con il metodo dialog, lo stato dei dati inseriti dall'utente viene mantenuto. Mentre è presente un evento di invio, il modulo viene sottoposto alla convalida del vincolo (a meno che non venga impostato novalidate): i dati utente non vengono né cancellati né inviati. Un pulsante di chiusura senza JavaScript può essere scritto come segue:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Potresti aver notato l'attributo autofocus impostato alla chiusura <button> in questo esempio. Gli elementi con l'attributo autofocus impostato in un elemento <dialog> non verranno ricevuti Imposta lo stato attivo sul caricamento della pagina (a meno che la pagina non venga caricata e la finestra di dialogo sia visibile). Tuttavia, verranno attivati all'apertura della finestra di dialogo.

Per impostazione predefinita, quando viene aperta una finestra di dialogo, viene attivato il primo elemento attivabile all'interno della finestra di dialogo, a meno che non venga impostato un altro elemento nella finestra di dialogo abbia l'attributo autofocus impostato. L'impostazione dell'attributo autofocus sul pulsante di chiusura garantisce viene attivato quando la finestra di dialogo viene aperta. Ma includere autofocus in un <dialog> deve essere fatto con molta considerazione. Tutti gli elementi nella sequenza precedenti all'elemento attivo automaticamente vengono ignorati. Questo attributo verrà approfondito nella lezione principale.

L'interfaccia di HTMLDialogElement include un returnValue proprietà. Se invii un modulo con method="dialog", il valore returnValue viene impostato sul name, se presente, del pulsante di invio utilizzato su invia il modulo. Se avessimo scritto <button type="submit" name="toasty">close</button>, il valore di returnValue sarebbe toasty.

Quando si apre una finestra di dialogo, l'attributo booleano open è presente, il che significa che la finestra di dialogo è attiva e con cui è possibile interagire. Quando viene aperta una finestra di dialogo aggiungendo invece l'attributo open che tramite .show() o .showModal(), la finestra di dialogo sarà senza moda. La HTMLDialogElement.open restituisce true o false, a seconda che la finestra di dialogo sia disponibile per l'interazione, indipendentemente dal fatto che sia modale o meno.

Sebbene JavaScript sia il metodo preferito per aprire una finestra di dialogo, incluso l'attributo open durante il caricamento pagina e poi la rimozione 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 (ed eventualmente altri contenuti) possono ricevere sono coinvolgenti e sono interattivi. L'elemento <dialog> non è interattivo e non riceve lo stato attivo. Non aggiungere la proprietà tabindex al dialogo stesso.

Ruoli ARIA

Il ruolo implicito è dialog. Se la finestra di dialogo è una finestra di conferma in cui viene comunicato un messaggio importante che richiede una conferma o una risposta di un altro utente. Imposta role="alertdialog". Anche la finestra di dialogo deve avere un nome accessibile. Se il nome accessibile può essere fornito da testo visibile, aggiungi aria-labelledby="idOfLabelingText".

Impostazioni predefinite CSS

Tieni presente che i browser forniscono lo stile predefinito per dialog. Impostazione di Firefox, Chrome ed Edge color: CanvasText; background-color: Canvas; e Safari imposta color: black; background-color: white; nei fogli di stile dello user agent. L'elemento color viene ereditato da dialog e non da body o :root, il che potrebbe non essere previsto. La proprietà background-color non viene ereditata.

Verifica le tue conoscenze

Verifica le tue conoscenze dell'elemento della finestra di dialogo.