Accessible Routing (#19290)

* add announcer live region for routing * Update packages/gatsby/cache-dir/production-app.js Co-Authored-By: David Bailey <4248177+davidbailey00@users.noreply.github.com> * refactor announcement updates to happen in lifecycle method instead of hooks, use pathName instead of vague string as default announcement * remove unused imports * move RouteAnnouncer inside of RouteUpdates in navigation.js * remove console.logs * Trying with ref * remove stray console.log * change div for adding announcer to a react fragment * remove commented out code * add accidentally deleted code back in, remove changes in root.js Co-authored-by: David Bailey <4248177+davidbailey00@users.noreply.github.com> Co-authored-by: Mikhail Novikov <freiksenet@gmail.com>
gatsbyjs · Jan 17, 2020 · 701222f · 701222f
1 parent 4944371
commit 701222f
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/packages/gatsby/cache-dir/navigation.js b/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>
+    )
   }
 }
 

diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
@@ -142,7 +142,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
       }
     ).pop()
 
-    let NewRoot = () => WrappedRoot
+    const NewRoot = () => WrappedRoot
 
     const renderer = apiRunner(
       `replaceHydrateFunction`,

diff --git a/packages/gatsby/cache-dir/root.js b/packages/gatsby/cache-dir/root.js
@@ -54,7 +54,7 @@ const RouteHandler = props => (
 
 class LocationHandler extends React.Component {
   render() {
-    let { location } = this.props
+    const { location } = this.props
 
     if (!loader.isPageNotFound(location.pathname)) {
       return (