Redwood: Router: Focus is not reset to top of DOM on route change

[davidluhr]

Explanation

Route changes with Redwood Router (RR) leave keyboard focus in the same position in the DOM and do not announce a new page has loaded.

To Reproduce

• Use a screen reader (VoiceOver, NVDA, etc.)
• In any Redwood project with more than one route, navigate to a link that points to another route
• Activate the link
• Observe the screen reader does not announce anything, and keyboard focus remains in the position in the DOM.

Expected behavior

For accessibility, RR should reset focus to the top of the DOM on route change and match native browser behavior when navigating to a new URL. Natively, a new URL will announce the new <title> to assistive technology and focus will begin at the top of the DOM so users can navigate through the new page.

Without this functionality, there's no way for screen reader users to know the route changed, or to know where keyboard focus is in the DOM.

One potentially helpful reference for a solution is how Gatsby addressed this by managing focus on route change and creating a live region to announce the new page's title.

Severity

I view this as a critical bug. This has prevented me from using Redwood for my projects, because I cannot exclude a sizable portion of users from being able to use the website. Users who rely on assistive technologies constitute a sizeable global population, and Redwood has an opportunity to lead the way in creating an accessible SPA-like experience that front-end frameworks are lacking.

Thank you for any thoughts and help with this!

[jtoar]

Redwood has an opportunity to lead the way in creating an accessible SPA-like experience that front-end frameworks are lacking.

Redwood absolutely agrees with this sentiment. And just so you know that they haven't ignored this completely, this feature's on the roadmap, albeit, on the not-on-the-calendar section. But it's part of the plan!

The router is something Redwood wanted to own; being able to list your routes flat instead of nested was important for DX. But it does mean we'll have to reinvent some features nested routes had to be on par with their UX.

I'm sending this as a quick response now, but I'll take this up this week and see what I can do.

[davidluhr]

@jtoar This is fantastic news! My apologies for submitting an issue since this is already on the roadmap for RR. Thanks for the prompt reply and for informing me. I'll look out for future updates and I'm really excited for the future of Redwood 🙇🏻‍♂️

Let me know if I should close this issue since it's a known improvement.

[jtoar]

@davidluhr No worries! It's good to know that this is a real and urgent need. And you can leave this one open--it's on the roadmap but not actively being worked on yet, so we can use this issue to start keeping track of where we're at.

[thedavidprice]

Just adding a written emphasis of "yes, please!" 'cause an emoji just doesn't do it justice in this case.

Keep us posted as to how we can help with questions and direction along the way. (And by "we", I'm definitely implying @mojombo 😁)

[jtoar]

@davidluhr Just wanted to let you know that I haven't forgotten about this. I've been busy with the CLI/writing docs. But as soon as I'm done I'll circle back!

[davidluhr]

@jtoar Thank you so much for the update! Looking forward to all the upcoming improvements.