Prevent HTML dialog from grabbing focus

Question

The <dialog> element will receive focus once it is opened and I know that this is the intended behavior. However, I thought about using a <dialog> element to show a short notice at the top of the window which will slide away after a short while. Because of the quite unobstrusive behavior of this notice, I have an odd feeling about the dialog grabbing the focus during the time it shows up, especially when it gives it back to the last element that had focus.

To illustrate what I mean, see this short example (I styled the focus of the button red to make it obvious). It would be nice if the button would keep the focus for the time the dialog is open:

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>

Is there an easy way to prevent a <dialog> element from grabbing the focus or would this be bad practice? Maybe I should rather use a <div> for this and not use a <dialog> element at all? I am not quite sure what would be best, especially from an accessibility point of view.

It also came to my mind that you often can change most of the behavior and appearance of elements via CSS or JavaScript. So, I was wandering if you could essentially change the behavior of a <dialog> to that of a regular <div>.

Osman

Could you focus on something else right after you show the dialog? – Curkell

So, to catch the focused element right before the dialog opens and focus it right after the dialog has opened. This could work, yes. – Osman

> would this be bad practice? Yes, the dialog handles focus management for accessibility reasons. Changing the intended behavior will harm usability for people who use assistive technology or navigate using the keyboard only. – Khalid

@Khalid True. The idea was to create a notice that pops up and automatically fades away after a few seconds. I am unsure what the right way would be to make this accessible. Maybe a dialog is not the right approach in the first place. – Osman

@JasperHabicht see the answer I just posted. You could use the PopOver API instead. – Khalid

Answer 1

Is there an easy way to prevent a <dialog> element from grabbing the focus or would this be bad practice?

Yes, this would be a bad practice. You should not do this.

The reason the dialog element focuses itself or its first interactive child element when opened is because focus management is part of the accessibility requirements / specification for the dialog user interface pattern. Changing the expected behavior will likely cause confusion and usability problems for people who use assistive technology such as screen reader software and/or people who do not use a mouse.

Alternatively you could use the PopOver API which does not move focus to the pop over element by default.

const closeButton = document.querySelector("button.close");
const popover = document.querySelector("[popover]");

closeButton.addEventListener("click", function() {
  popover.hidePopover();
});

button:focus-visible {
  outline: 3px solid blue;
}

[popover] {
  padding: 12px;
}

<button class="open" popovertarget="some-popover">Open Pop Over</button>

<aside id="some-popover" popover>
  <p>I am a popover</p>
  <button class="close">Close</button>
</aside>

Khalid

Thanks! This is a very good answer. I think that the PopOver API would in fact be best suited for this. Sadly it seems to be quite new with limited support as of this day. But this will likely change. I did have accessibility in mind when I originally asked the question which is why I asked in such a way that it leaves room for alternative approaches. – Osman

@JasperHabicht yes unfortunately according to MDN it is missing from Safari on iOS although it appears to be well supported in up to date desktop browsers: developer.mozilla.org/en-US/docs/Web/API/… In the meantime a 3rd party library such as Floating UI might be a good solution, it has a lot of accessibility features built in depending on what type of pop over pattern you are looking for: floating-ui.com – Khalid

Answer 2

Set the inert property on the dialog to true just before opening it, then set it to false after. This will prevent any autofocus behavior.

my_dialog.inert = true;

my_dialog.show();

my_dialog.inert = false;

Astronomy

Kinda hacky... What's the browser support on this? – Iritis

@Iritis The MDN page I linked to has a compatibility table at the bottom. Also, compatibility is unlikely to be a concern if you're using the <dialog> element in the first place. – Astronomy

Which one's better with simply making the focused element to .blur() after showing it? At least only a single line is needed? – Accuse

Doing this will be detrimental for accessibility, e.g. for users of assistive tech such as screen readers, do not alter the default behavior of the dialog element for this reason. – Khalid

Answer 3

toggling the 'open' attribute might be the way to go about it (instead of using .show() / .close()). however, read the MDN docs to understand the ramifications of this approach.

Extracurricular

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Wb

Answer 4

It seems there is no good way to do this, and neither should you from an accessibility stance. I guess you are expected to always have a close button for dialog-modals.

Hacks not working: The focus will be set to the first nested focusable element, or if you set the autofocus attribute to an other dummy element inside the <dialog>.

Setting visibility: hidden or display: none does not work, as the element will be skipped and the next focusable element will be focused. Only opacity: 0 works.

Toughminded

"Hacking it" will be detrimental for accessibility, e.g. for users of assistive tech such as screen readers, do not alter the default behavior of the dialog element for this reason. – Khalid