Mithril modal component: focus not trapped and screen reader announces nothing on open

Answer

The modal should declare its ARIA role and name once (in the vnode attrs or oncreate) and manage focus entirely in lifecycle hooks. Re‑asserting static ARIA attributes on every onupdate is unnecessary and can cause extra screen‑reader announcements.

Confirmed facts (based on established Mithril 2.x behavior)

• role="dialog" and aria-modal="true" are static HTML attributes; they need only be set once when the element is first created.
• An accessible name (aria-label or aria-labelledby) must also be set once; changing it dynamically requires an update, but otherwise it stays constant.
• Focus trapping is implemented by adding a keydown listener in oncreate that intercepts Tab, Shift+Tab and Escape, moving focus to the first/last focusable child or closing the dialog.
• On open, store the element that triggered the modal (e.g., event.target or a passed reference) and call focus() on the first focusable inner element (or the dialog itself with tabindex="-1").
• On close (triggered by Escape, backdrop click, or external action), restore focus to the stored trigger element in onbeforeremove or onremove after any exit animation.
• Listeners added in oncreate must be removed in onbeforeremove/onremove to avoid duplicates if the component is remounted.

Likely explanation & steps for your case

1. In the modal’s view, add the static attributes directly:

   m('div.dialog', { role: 'dialog', 'aria-modal': 'true', 'aria-label': modalTitle }, innerContent)

2. In oncreate(vnode):
   • Save the trigger element: vnode.dom.triggerEl = opts.triggerEl;
   • Find the first focusable child (e.g., vnode.dom.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')) and call focus() on it.
   • Attach a keydown listener to vnode.dom that:
     • On Tab: if focus is on the last focusable child, preventDefault and focus the first.
     • On Shift+Tab: if focus is on the first focusable child, preventDefault and focus the last.
     • On Escape: call your close handler.
3. In onbeforeremove(vnode) (or onremove if no exit animation):
   • Remove the keydown listener.
   • If vnode.dom.triggerEl still exists, call vnode.dom.triggerEl.focus().
4. Ensure the trigger element reference is captured each time the modal opens (e.g., pass it as a prop or store it in a closure that survives redraws). If the modal’s content is redrawn via m.route or state changes while open, the stored reference must be refreshed on open; otherwise focus may be restored to a stale element.

Missing diagnostic detail

Are you storing the triggering element reference in a way that survives redraws (e.g., passed as a prop or kept in a closure)? If not, please confirm how you retain that reference so we can advise on the exact placement.