El elemento <dialog> recibirá el foco una vez que se abra y sé que este es el comportamiento previsto. Sin embargo, pensé en usar un elemento <dialog> para mostrar un breve aviso en la parte superior de la ventana que desaparecerá después de un rato. Debido al comportamiento bastante discreto de este aviso, tengo la extraña sensación de que el cuadro de diálogo toma el foco durante el tiempo que aparece, especialmente cuando lo devuelve al último elemento que tenía el foco.

Para ilustrar lo que quiero decir, vea este breve ejemplo (diseñé el enfoque del botón rojo para que sea obvio). Sería bueno si el botón mantuviera el foco durante el tiempo que el cuadro de diálogo está abierto:

 const myDialog = document.getElementById('notice'); const myButton = document.getElementById('button'); myButton.focus(); myButton.addEventListener('click', (e) => { e.preventDefault(); myDialog.show(); const hideDialog = setTimeout(() => { myDialog.close(); clearTimeout(hideDialog); }, 5000); });

 #button:focus { outline: 5px solid red; } #notice { position: absolute; margin: 0 auto auto; top: 0; transition: top 1s ease; } #notice:not([open]){ display: block; top: -100% }

 <button id="button">Click me to show notice</button> <dialog id="notice">Just a short notice</dialog>

¿Hay una manera fácil de evitar que un elemento <dialog> tome el foco o sería una mala práctica? ¿Tal vez debería usar un <div> para esto y no usar un elemento <dialog> en absoluto? No estoy muy seguro de qué sería lo mejor, especialmente desde el punto de vista de la accesibilidad.

También me vino a la mente que a menudo puedes cambiar la mayor parte del comportamiento y la apariencia de los elementos a través de CSS o JavaScript. Por lo tanto, me preguntaba si esencialmente podría cambiar el comportamiento de un <dialog> al de un <div> normal.