javascript - VoiceOver does not parse DOM in React SPA?

Question

I am using VoiceOver with Google Chrome and trying to figure out why moving from Page A -> Page B in a React SPA application (no hard page refresh, using HTML5 Push API via react-router) does not trigger a DOM parsing refresh for VoiceOver.

I checked using the Accessibility Inspector but when loading Page B the whole application is just considered as one big group with no children. If I turn off VoiceOver and turn it back on while on Page B then it magically becomes parsed.

This is not an issue on Safari.

Any ideas how I could nudge VoiceOver to parse the tree?

question from:https://stackoverflow.com/questions/66055235/voiceover-does-not-parse-dom-in-react-spa

Answer 1

Adding an aria-live="polite" attribute to the wrapper around the changing content should notify assistive technology whenever its contents has been changed.

For example adding that attribute to the parent surrounding of the <Switch> component will notify VoiceOver whenever any components is rendered by a <Route> component after navigation.

const Main = () => {
  <main aria-live="polite">
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/about' component={About}/>
      <Route path='/contact' component={Contact}/>
    </Switch>
  </main>
};

ARIA live regions - MDN