v145 · DOM · Accessibility · demo

Accessible Modal

A modal dialog that opens two ways — mouse click and keyboard shortcut. Each path calls element.focus() with a different focusVisible option, so the focus ring appears exactly when it should: visible after keyboard activation, hidden after mouse click. See the log to confirm which option fired.

Chrome 145+ — element.focus({ focusVisible: true/false }). In older browsers the option is ignored and the browser heuristic decides; the modal still works but focus ring behavior may differ.

Open the modal by button click (ring suppressed) or by keyboard shortcut Alt+M (ring shown) · close with Escape · check the log

Mouse / click path

Clicking a button is a mouse interaction — the focus ring should not appear on the first focused modal element.

focus({ focusVisible: false })

Keyboard shortcut path

A keyboard shortcut implies keyboard navigation — the focus ring should always be visible on the focused element.

focus({ focusVisible: true })

or press Alt+M

Focus events

— — Waiting for interactions

// focusVisible option — Chrome 145
// Gives JS code explicit control over whether focus({ }) shows a ring.

function openModal(trigger) {
  modal.showModal();

  if (trigger === 'keyboard') {
    // Keyboard intent: always show the focus ring
    firstInput.focus({ focusVisible: true });
  } else {
    // Mouse/click intent: suppress the ring — user knows where they clicked
    firstInput.focus({ focusVisible: false });
  }
}

// Before Chrome 145: the browser guessed, often incorrectly.
// After Chrome 145: JavaScript signals intent explicitly.

// CSS :focus-visible still styles the ring when it IS shown:
input:focus-visible {
  outline: 3px solid cornflowerblue;
  outline-offset: 2px;
}

see also