Skip to content

v1.8.2 — close-button focus-ring fix

Choose a tag to compare

@dbreck dbreck released this 01 Jul 11:54
· 1 commit to main since this release

Fix

Close button no longer shows a stray focus ring when a popup is opened by mouse. The circular "border" that appeared once the lazy-loaded body arrived and the modal grew to full height was actually the close button's :focus-visible outline — the modal focused the close button on open, and the layout shift made the browser re-evaluate :focus-visible and paint the ring (it vanished on the next interaction).

  • modal.js: on open, focus now moves to the labeled dialog container (role="dialog", tabindex="-1") — the recommended ARIA pattern, so screen readers still announce the dialog — instead of the close button. The close button's keyboard focus ring is preserved (it only shows when a keyboard user Tabs to it).
  • modal.css: suppresses the programmatically-focused dialog container's own default outline (it is not Tab-reachable, so no keyboard affordance is lost).

No other behavior changes.