v145 · Web APIs · Dialog Restorer

Dialog focus restorer

A dialog that remembers exactly how it was opened — click vs. keyboard — and restores focus to the trigger with focusVisible set the same way. The user never sees an unexpected ring or a missing one.

triggers

Last opener: none · opened-by signal: —

focus log

Confirm action

Click OK to close the dialog. Focus will return to the trigger that opened me, with the focus ring matching how you opened me.

code

let openerEl, openerVisible;
trigger.addEventListener('click', (e) => {
  openerEl = e.currentTarget;
  // Keyboard activation surfaces as click with detail === 0
  openerVisible = e.detail === 0;
  dialog.showModal();
});
dialog.addEventListener('close', () => {
  openerEl.focus({ focusVisible: openerVisible });
});

see also