1563471 - [accessibility] Reset focus state after page navigation

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, defect, P1)

Description

[Schalk Neethling [:espressive]]

One of the side effects of using client-side navigation is that the header does not change between page loads(as we are just swapping in new content). This means that if your focus was on the "References & Guides" link in the header, it will still be there once the new page content loads.

For people of assistive technologies, this is not an ideal state. They now need to tab in reverse in an attempt to get back to the Skip to... links that are located earlier in the DOM. A solution to this might be to simply move focus to an item before the first skip to link, or perhaps move focus back to the window(window.focus) or remove focus from the current activeElement.

The reason we cannot simply move focus to the first skip to link is that it will then be visible to all users, irrespective of their use case.

Will need to test the various options and use the one that works most predictably between browsers and platforms.

Comment 1

[David Flanagan [:djf]]

This article looks like it has an approach that could work: https://medium.com/scribd-data-science-engineering/common-accessibility-pitfalls-for-single-page-apps-and-how-to-avoid-them-16ecb19dcb71

It uses a class-based component that interacts with react-router, which we don't use, but the basic techniques seem like a good place to start.

I assume that rourter.jsx should be involved in this. There is code in there that sets document.title on each client-side navigation, and that seems like the right place to reset the focus as well. I don't understand how the Skip to... magic works, so I don't have any deeper thoughts about this.

Comment 2

[David Flanagan [:djf]]

Ah! I see in bug 1563511 that you already have an effect function in router.jsx to do the focus reset.