SPA Accessibility - focus not reset when route changed

[LpmRaven]

I am using a screen reader to interact with my application.

Moving between routes does not reset the focus, which would occur on a server-side render. Is there a fix to reset the focus on route changes?

[pshrmn]

Just to make sure that we're on the same page, you're referring to the same thing as this article discusses, correct? https://sarbbottam.github.io/blog/2016/10/22/focus-reset-and-guided-focus-management Whenever the location changes, you want to reset the focus to some initial position (like a full page refresh would produce).

I think that what you would want to do is to have a root component (inside of your <Router>) that uses a ref to focus after the component updates.

class Refocus extends React.Component {

  componentDidUpdate() {
    if (this.node) {
      this.node.focus();
    }
  }

  render() {
    return <div ref={n => this.node = n} tabIndex={-1}>{this.props.children}</div>;
  }
}

// usage
ReactDOM.render((
  <BrowserRouter>
    <Refocus>
      <App />
    </Refocus>
  </BrowserRouter>
), holder);

If I'm completely off, please let me know.

[LpmRaven]

Yes focus management for SPAs using react is what I am looking for, thanks for the suggestion @pshrmn! I did some extra digging myself, Angular seems to focus on the first h1 on a client side change, which is a pretty nice user experience. Testing the problem, the issue is not just the focus management but letting an assistive technology (screen reader) user know when a page has changed.

My current solution:

An aria-live div at the top of page (only re-renders on server side) which will announce to AT when I change its contents. (Visually hidden class, non-focusable)

<div aria-live="polite" className="gs-u-vh" id="accessibility-message"></div>

Then to control the contents of the aria-live div, I have a function that changes its contents when my h1 changes. (As the aria-live div is not re-rendered client side, it will announce its new contents)

export function pageChangeAnnouncement() {
	let accessibilityHookMessage;
	let myH1;
	if (typeof window !== 'undefined') {
		myH1 = document.getElementsByTagName("h1")[0].innerHTML;
		accessibilityHookMessage = `${myH1} , View loaded`;
		document.getElementById("accessibility-message").innerHTML = accessibilityHookMessage;
	} else {
		accessibilityHookMessage = `page change, View loaded`;
	}
}

I appreciate your suggestion @pshrmn, it sent my down the right path but when I tested it, it did not behave as expected. This way does look a bit old school JS, but it works.

let ignoreFirstLoad = true;

if (ignoreFirstLoad) {
	ignoreFirstLoad = false;
} else {
	let resetFocusItem = document.getElementsByTagName("h1")[0];
	resetFocusItem.setAttribute("tabindex", "-1");
	resetFocusItem.style.outline = "none";
	resetFocusItem.focus();
}

A few notes to anyone else trying to manage focus:

1. Your focus element should not be a landmark (main, footer etc.)
2. If you set your element to a container div, it will read the contents. (Confusing to users)
3. You need to give your focus element a tabindex of -1. (To allow focus)
4. You should not focus on a link or button (as that will remote it from the default focus order when you give it a tabindex of -1).

[bmancini42]

This seems like a great idea, but not working for me for some reason. I have tried a number of variations of focus, blur, etc. and it doesn't seem to be taking effect. I can see that the document.activeElement is changing, but the 'outline' / tab position in the page remains the same as it was.

[bmancini42]

Nevermind. My problem was that I was doing it in componentWillReceiveProps. I was blurring and focusing on a DOM that was about to disappear. Moving it into componentWillUpdate fixed it. (the updating field here was withRouter's location.pathname.

[marcysutton]

I'd like to see more emphasis on an easy-to-use focus management solution in React Router instead of a live region, because functionally it is helpful to put the user's focus in a specific part of the page rather than leaving it where it is (on a Router link). I can use an onClick on each router link and send focus to a ref, but it would be super repetitive. There has to be a better way! I'm thinking of trying event delegation bound to a wrapper element and triggered by each individual link.

The problem with focusing automatically when a component renders is you might be focusing at the wrong time, especially if components get reused. Setting focus when the user initiates the action by activating a link is a better approach, I've found.

[LpmRaven]

@marcysutton I agree, setting focus when the user initiates an action seems the correct approach. In my approach, I reset focus to the h1 when the page changes and announce the new page name.
${myH1} , View loaded;
I wasn't completely sure where to reset focus to. What I have done is quite basic but I would quite like to see something hooked into the router link. Any solution you come up with would be great to see. 👍

[jimthedev]

@LpmRaven are you still using the h1 solution and being explicit with regards to the action?

[LpmRaven]

@jimthedev still using this, I haven't seen any other solutions since opening this issue. If anyone has any new information it would be great to hear.

[sladiri]

@LpmRaven Hi, could you point me to information or explain shortly your advice about focus managment please?

1. Your focus element should not be a landmark (main, footer etc.)
2. If you set your element to a container div, it will read the contents. (Confusing to users)

What would be a good focus target instead? I think you are using a heading inside the landmark, but are not sure about it? Why is a landmark a bad idea (edit: Maybe you mean the iOS bug, where dynamic content inside a focussed landmark is not re-read)? I tried out NVDA briefly, and focussing on a heading element seemed OK, but I am not a screen reader user..

[krivaten]

In the land of Ember we have an addon called Ember A11y, which on route change focuses the browser on a div that wraps the main content (There is more to it but that's the gist). Example:

<div class="ember-view focusing-outlet" tabindex="-1" role="group">
    <h1>About Page</h1>
    ...
</div>

As I just started really digging in to React I am hoping to find or create a similar solution as it works rather nicely for the Ember apps I work on.

[pshrmn]

A <Focus> component could be added (for reference, I wrote one for my router and the code would pretty similar for React Router).

Whether this exists as part of core React Router DOM is mostly up to @mjackson. Arguments for including it in RRD would be to extend its reach (:wink:). Arguments for having it in its own package would be that it isn't core functionality and that different packages could choose different implementations (render-invoked props to pass refs, <Focus component="div">, etc.).

[afeld]

My solution (simplified example):

class App extends React.Component {
  constructor(props) {
    super(props)
    this.sectionFocusEl = React.createRef()
  }

  componentDidUpdate(prevProps) {
    // https://stackoverflow.com/a/44410281/358804
    if (this.props.location.pathname !== prevProps.location.pathname) {
      this.sectionFocusEl.focus()
    }
  }

  render() {
    return <div ref={this.sectionFocusEl}/>;
  }
}

export default withRouter(App)