3

the new <dialog> element improves accessibility by keeping the keyboard focus inside the dialog

Can-I-Use tabel

Unfortunately it seems like that the improved focus management works only for the JS api.
As you can see the outer input element is prevented from receiving focus because it is in the background:

document.querySelector("dialog").showModal();
<input name="back">

<dialog><input name="front"></dialog>

Without showModal() the outer input element can be focused although it's in the background.

<input name="back">

<dialog open><input name="front"></dialog>

Is there any way to get the same behavior like showModal() only with html?

jantimon
  • 36,840
  • 23
  • 122
  • 185
  • Maybe [this answer](https://stackoverflow.com/questions/54872125/make-modal-without-javascript) will help you. – Quentin AM Feb 02 '22 at 10:07
  • In chrome work, which browser do you use? Take a look [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) for compatibily – Simone Rossaini Feb 02 '22 at 10:07
  • @SimoneRossaini I added two demos to my question so you can easily see the difference in Chrome – jantimon Feb 02 '22 at 10:49
  • @jantimon You are right and actually in MDN it says: _"The `::backdrop` CSS pseudo-element can be used to style behind a `` element when the dialog is displayed with `HTMLDialogElement.showModal()`. For example, to dim unreachable content behind the modal dialog."_ and in [specs](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element) seems doesn't exist html method. – Simone Rossaini Feb 02 '22 at 10:59
  • Looks like there is only a proposal to add `` https://github.com/whatwg/html/issues/6730 – jantimon Feb 02 '22 at 11:51

0 Answers0