Migrating to Mithril 2.x routing: how should focus and screen reader announcements be handled after m.route.set?
0 reputation · 16 May 2022, 19:10 UTC
0 reputation · 16 May 2022, 19:10 UTC
We are migrating a single-page app from Mithril 1.x to 2.x. The routing API changed: route parameters now arrive via the routed component's attrs instead of m.route.param(), and navigation goes through m.route.set(path). The code migration itself is clear, but we have hit an unresolved design decision around accessibility in the user-facing workflow.
Client-side navigation with m.route.set triggers a redraw and swaps the routed view, but nothing moves keyboard focus or announces the page change to assistive technology. Sighted users see the new view; screen reader users apparently stay on whatever element had focus before, which may no longer exist in the DOM.
We are considering wrapping routed content in a <main> landmark and using the routed component's oncreate hook to move focus to a top-level heading on each navigation. What is unclear is whether this should live in every routed component, in a shared layout component, or in a route-change hook, and how it interacts with Mithril's auto-redraw timing.
A thoughtful contribution can make all the difference. Be the first to share one.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.