Focusability of `<dialog>` itself

[jpzwarte]

What is the issue with the HTML Standard?

Is a <dialog> focusable?

Codepen: https://codepen.io/jpzwarte/pen/oNRKWGz

Both Chromium and Firefox seem to think so: click inside the dialog and you can see the :focus style being applied. Safari on the other hand doesn't focus the dialog.

However, once you've focused the dialog and press TAB to focus the next element and then shift-TAB to go back, different things happen:

• Chromium skips the dialog
• Firefox focuses the dialog

So using the keyboard, you can never refocus the dialog in Chromium.

MDN is also not consistent:

"Do not add the tabindex property to the element as it is not interactive and does not receive focus." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes

"particularly for instances where a dialog's content is dynamically rendered when invoked, the element itself may provide the best initial focus placement." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#accessibility

So which browser has it right? My guess is Firefox?

[jpzwarte]

If i read https://html.spec.whatwg.org/#dialog-focusing-steps correctly, then the dialog itself should receive focus in step 4.

A few lines down though it says this: "If control is not focusable, this will do nothing. This would only happen if subject had no focus delegate, and the user agent decided that dialog elements were not generally focusable. In that case, any earlier modifications to the focused area of the document will apply."

Does that mean that the Safari behavior is correct as well?

[scottaohara]

the dialog is not supposed to be included in the tab order of a web page.

it is meant to be focusable in the instance that there is no better place to place initial focus within a dialog, or in the rare instance that the dialog container was deemed to be the best initial focus placement by the author.

of the two, chrome is behaving more as i would have expected

[domenic]

Individual user agents make various different decisions about what is focusable, and what is not. That is not something prescribed by the standard. For example, buttons are not tab-focusable in Safari (without toggling an OS setting), but are in Chrome/Firefox.

So there's not much the standard can do here.