Page navigation is not announced by screen readers

[toolness]

I was just watching the react a11y talk and realized that we might not be announcing page transitions when the user navigates on the site. I just verified that indeed, we are not: when the user enters a search term on the homepage, or navigates to a policy's detail from the search results, a loading indicator is shown and the new page is eventually navigated-to without any feedback whatsoever from the screen reader.

Note that this is related to #699, as we probably want the new page's title to be announced when navigation is complete (which necessitates having different titles for different pages).

[cmc333333]

Miiiiight have resolved this with #776 . We'll need to test.

[cmc333333]

Having Next swap the page title does not trigger a new announcement.

[yowill]

(776 did not fix it)

[toolness]

The library mentioned in the React a11y talk (around 33 minutes in) is react-aria-live.

[toolness]

Hmm, so I am attempting to work on this now and am finding some oddities:

1. The page title is actually announced on Chrome+NVDA, though not on Edge+NVDA (and likely not on other browser/screen reader combinations). This is actually a bit unfortunate because it means that on browsers where the page title is announced by default, we risk announcing the page title twice if we also announce it via an ARIA live region. Bleargh!

2. I had some problems integrating react-aria-live, and upon further investigation, it seems like common page elements are being fully unmounted and re-mounted on page transitions. To learn this, I created a trivial new class-based component called Boop:

   import React from 'react';
   
   export default class Boop extends React.Component {
       componentDidMount() {
           if (!window.boop) {
               window.boop = 1;
           }
           console.log("COMPONENT DID MOUNT", window.boop);
           window.boop += 1;
       }
   
       render() {
           return <div>SUUUUP</div>;
       }
   }

   I then added <Boop/> to header-footer.js above the <Disclaimer/> and noticed that as I navigated from the homepage to the search results page, the text COMPONENT DID MOUNT was logged with an incrementing number after it. This was surprising, since the component itself did not change between the two pages, and part of the benefit of a single-page app is being able to perform page transitions without having to rebuild the entire DOM from scratch. In any case, it's likely also the cause of my difficulties with react-aria-live, because ARIA live regions are extremely finicky and really need to exist on initial page load and never be torn down and re-created during the page's lifetime.

   @cmc333333 do you have any insight into this? I'm unclear on whether it's a bug in our app, or whether it's an intentional feature of Next.js, or if I'm just doing something very noobish, or something else.

[toolness]

Um, I ended up creating two very simple pages and navigating between them, and it seems like the component is always re-mounted at least once, which is surprising. This seems to be documented at vercel/next.js#1966.

Because the ARIA live region really needs to be there and remain there all the time, unmodified during existing, we may need to add a live region in the document template thingy at pages/_document.js.