Accessible Routing

packages/gatsby/cache-dir/navigation.js

@@ -43,7 +43,6 @@ const onPreRouteUpdate = (location, prevLocation) => {
 const onRouteUpdate = (location, prevLocation) => {
   if (!maybeRedirect(location.pathname)) {
     apiRunner(`onRouteUpdate`, { location, prevLocation })
-
     // Temp hack while awaiting https://github.com/reach/router/issues/119
     window.__navigatingToLink = false
   }
@@ -159,6 +158,55 @@ function init() {
   maybeRedirect(window.location.pathname)
 }
 
+class RouteAnnouncer extends React.Component {
+  constructor(props) {
+    super(props)
+    this.announcementRef = React.createRef()
+  }
+
+  componentDidUpdate(prevProps, nextProps) {
+    requestAnimationFrame(() => {
+      let pageName = `new page at ${this.props.location.pathname}`
+      if (document.title) {
+        pageName = document.title
+      }
+      const pageHeadings = document
+        .getElementById(`gatsby-focus-wrapper`)
+        .getElementsByTagName(`h1`)
+      if (pageHeadings && pageHeadings.length) {
+        pageName = pageHeadings[0].textContent
+      }
+      const newAnnouncement = `Navigated to ${pageName}`
+      const oldAnnouncement = this.announcementRef.current.innerText
+      if (oldAnnouncement !== newAnnouncement) {
+        this.announcementRef.current.innerText = newAnnouncement
+      }
+    })
+  }
+
+  render() {
+    return (
+      <div
+        id="gatsby-announcer"
+        style={{
+          position: `absolute`,
+          width: 1,
+          height: 1,
+          padding: 0,
+          overflow: `hidden`,
+          clip: `rect(0, 0, 0, 0)`,
+          whiteSpace: `nowrap`,
+          border: 0,
+        }}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        ref={this.announcementRef}
+      ></div>
+    )
+  }
+}
+
 // Fire on(Pre)RouteUpdate APIs
 class RouteUpdates extends React.Component {
   constructor(props) {
@@ -186,7 +234,12 @@ class RouteUpdates extends React.Component {
   }
 
   render() {
-    return this.props.children
+    return (
+      <React.Fragment>
+        {this.props.children}
+        <RouteAnnouncer location={location} />
+      </React.Fragment>
+    )
   }
 }
 

packages/gatsby/cache-dir/production-app.js

@@ -94,12 +94,6 @@ apiRunnerAsync(`onClientEntry`).then(() => {
     }
   }
 
-  const { pagePath, location: browserLoc } = window
-
-  // Explicitly call navigate if the canonical path (window.pagePath)
-  // is different to the browser path (window.location.pathname). But
-  // only if NONE of the following conditions hold:
-  //
   // - The url matches a client side route (page.matchPath)
   // - it's a 404 page
   // - it's the offline plugin shell (/offline-plugin-app-shell-fallback/)
@@ -142,7 +136,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
       }
     ).pop()
 
-    let NewRoot = () => WrappedRoot
+    const NewRoot = () => WrappedRoot
 
     const renderer = apiRunner(
       `replaceHydrateFunction`,

packages/gatsby/cache-dir/root.js

@@ -52,15 +52,19 @@ const RouteHandler = props => (
   </BaseContext.Provider>
 )
 
+let locationListener
 class LocationHandler extends React.Component {
   render() {
-    let { location } = this.props
+    const { location } = this.props
 
     if (!loader.isPageNotFound(location.pathname)) {
       return (
         <EnsureResources location={location}>
           {locationAndPageResources => (
-            <RouteUpdates location={location}>
+            <RouteUpdates
+              location={location}
+              locationListener={locationListener}
+            >
               <ScrollContext
                 location={location}
                 shouldUpdateScroll={shouldUpdateScroll}
@@ -96,7 +100,7 @@ class LocationHandler extends React.Component {
     }
 
     return (
-      <RouteUpdates location={location}>
+      <RouteUpdates location={location} locationListener={locationListener}>
         <Router
           basepath={__BASE_PATH__}
           location={location}