Come impostare lo stato attivo su una finestra modale javascript?

Question

Il nostro sito Web include alcuni javascript che producono finestre modali di sovrapposizione.

C'è un problema di accessibilità con questo però, una volta attivata la modale, lo focus è ancora sull'elemento trigger e non sulla modale stessa.

Queste mod possono includere tutti i tipi di elementi html, intestazioni, paragrafi e controlli di modulo. Quello che mi piacerebbe è la messa a fuoco sul primo elemento all'interno del modale, quindi molto probabilmente un tag h4.

Ho esplorato utilizzando la funzione focus() tuttavia questo non funziona con un numero di elementi html.

Un pensiero era quello di aggiungere un tag vuoto a nella finestra che potrebbe ottenere lo stato attivo, ma non sono sicuro di questo metodo.

Answer 1

È possibile aggiungere una casella di testo all'inizio del codice HTML modale, impostare lo stato attivo e nascondere la casella di testo. Dovrebbe avere l'effetto desiderato per quanto comprendo i tuoi bisogni.

Answer 2

Si potrebbe provare a sfocare() the element that has the focus.

Answer 3

molto tardi alla festa, ma le risposte esistenti non rispettano l'accessibilità.

Il W3C wiki page on accessible modals offre un quadro più chiaro di ciò che è chiesto nel PO, la parte rilevante sta avendo tabindex=-1 sul contenitore modale (che dovrebbe avere anche un attributo aria-dialog) in modo che possa ottenere :focus.

Questo è il modo più accessibile per mettere a fuoco il modale, c'è anche più documentazione su come mantenerlo nel modale e restituirlo all'elemento che ha attivato il modale - molto da spiegare qui, quindi suggerisco a chiunque sia interessato a controllare il link qui sopra.