fix(gatsby): fix not focusing router wrapper after navigation

e2e-tests/development-runtime/cypress/integration/functionality/accessibility.js

@@ -0,0 +1,85 @@
+describe(`focus managment`, () => {
+  it(`Focus router wrapper after navigation to regular page (from index)`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/page-2/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation to regular page (to index)`, () => {
+    cy.visit(`/page-2/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  // Navigating to 404 and from 404 doesn't properly trigger focusing
+  // router wrapper. That's because dev 404 is special case and new router
+  // is being used when transitioning to/from 404 page and @reach/router
+  // doesn't meddle with focus on initial router component mount.
+
+  it.skip(`Focus router wrapper after navigation to 404`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/broken-path/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it.skip(`Focus router wrapper after navigation from 404`, () => {
+    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation from one 404 path to another 404 path`, () => {
+    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
+
+    // navigating to different not existing page should also trigger
+    // router wrapper focus as this is different page
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/another-broken-path/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation to client-only page`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/client-only-paths/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation from client-only page`, () => {
+    cy.visit(`/client-only-paths/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus subrouter inside client-only page`, () => {
+    cy.visit(`/client-only-paths`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/client-only-paths/profile`)
+
+    // inner paths are handled by router instance defined in client-only-paths page
+    // which means that navigating inside those should be handled by that router
+    // (not main router provided by gatsby)
+    cy.assertRouterWrapperFocus(false)
+    cy.focused().should(`have.attr`, `id`, `client-only-paths-sub-router`)
+  })
+})

e2e-tests/development-runtime/cypress/support/commands.js

@@ -10,3 +10,40 @@ Cypress.Commands.add(`lifecycleCallCount`, action =>
         ).length
     )
 )
+
+Cypress.Commands.add(`assertRouterWrapperFocus`, (shouldBeFocused = true) =>
+  cy
+    .focused()
+    .should(
+      shouldBeFocused ? `have.attr` : `not.have.attr`,
+      `id`,
+      `gatsby-focus-wrapper`
+    )
+)
+
+Cypress.Commands.add(
+  `navigateAndWaitForRouteChange`,
+  {
+    prevSubject: `optional`,
+  },
+  (subject, pathname) => {
+    cy.window().then(win => {
+      win.___navigate(pathname)
+    })
+
+    return cy.waitForAPI(`onRouteUpdate`).then(() => subject)
+  }
+)
+
+Cypress.Commands.add(
+  `changeFocus`,
+  {
+    prevSubject: `optional`,
+  },
+  subject => {
+    cy.get(`a`)
+      .first()
+      .focus()
+      .then(() => subject)
+  }
+)

e2e-tests/development-runtime/gatsby-node.js

@@ -84,7 +84,9 @@ exports.onCreatePage = async ({ page, actions }) => {
 
   if (page.path.match(/^\/paths/)) {
     page.matchPath = `/paths/*`
+    createPage(page)
+  } else if (page.path.match(/^\/client-only-paths/)) {
+    page.matchPath = `/client-only-paths/*`
+    createPage(page)
   }
-
-  createPage(page)
 }

e2e-tests/development-runtime/package.json

@@ -25,11 +25,11 @@
   "license": "MIT",
   "scripts": {
     "build": "gatsby build",
-    "develop": "cross-env ENABLE_GATSBY_REFRESH_ENDPOINT=true gatsby develop",
+    "develop": "cross-env ENABLE_GATSBY_REFRESH_ENDPOINT=true CYPRESS_SUPPORT=y gatsby develop",
     "serve": "gatsby serve",
     "start": "npm run develop",
     "format": "prettier --write \"src/**/*.js\"",
-    "test": "CYPRESS_SUPPORT=y npm run start-server-and-test || (npm run reset && exit 1)",
+    "test": "npm run start-server-and-test || (npm run reset && exit 1)",
     "posttest": "npm run reset",
     "reset": "node scripts/reset.js",
     "reset:preview": "node plugins/gatsby-source-fake-data/reset.js && npm run update:preview",

e2e-tests/development-runtime/src/pages/client-only-paths.js

@@ -0,0 +1,38 @@
+import React from "react"
+import { Router } from "@reach/router"
+import { Link } from "gatsby"
+
+import Layout from "../components/layout"
+import InstrumentPage from "../utils/instrument-page"
+
+const Page = props => (
+  <pre data-testid="dom-marker">[client-only-path] {props.page}</pre>
+)
+
+const routes = [`/`, `/profile`, `/dashboard`]
+
+const basePath = `/client-only-paths`
+
+const ClientOnlyPathPage = props => (
+  <Layout>
+    <Router
+      location={props.location}
+      basepath={basePath}
+      id="client-only-paths-sub-router"
+    >
+      <Page path="/" page="index" />
+      <Page path="/:page" />
+    </Router>
+    <ul>
+      {routes.map(route => (
+        <li key={route}>
+          <Link to={`${basePath}${route}`} data-testid={route}>
+            {route}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </Layout>
+)
+
+export default InstrumentPage(ClientOnlyPathPage)

e2e-tests/development-runtime/src/pages/paths.js

@@ -7,7 +7,7 @@ const NotFound = () => <h1>Not Found in App</h1>
 
 const AppPage = () => (
   <Router>
-    <App path="/paths/app" />
+    <App path="/app" />
     <NotFound default />
   </Router>
 )

e2e-tests/production-runtime/cypress/integration/accessibility.js

@@ -0,0 +1,80 @@
+describe(`focus managment`, () => {
+  it(`Focus router wrapper after navigation to regular page (from index)`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/page-2/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation to regular page (to index)`, () => {
+    cy.visit(`/page-2/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation to 404`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/broken-path/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation from 404`, () => {
+    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation from one 404 path to another 404 path`, () => {
+    cy.visit(`/broken-path`, { failOnStatusCode: false }).waitForRouteChange()
+
+    // navigating to different not existing page should also trigger
+    // router wrapper focus as this is different page
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/another-broken-path/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation to client-only page`, () => {
+    cy.visit(`/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/client-only-paths/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus router wrapper after navigation from client-only page`, () => {
+    cy.visit(`/client-only-paths/`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/`)
+    cy.assertRouterWrapperFocus(true)
+  })
+
+  it(`Focus subrouter inside client-only page`, () => {
+    cy.visit(`/client-only-paths`).waitForRouteChange()
+
+    cy.changeFocus()
+    cy.assertRouterWrapperFocus(false)
+    cy.navigateAndWaitForRouteChange(`/client-only-paths/profile`)
+
+    // inner paths are handled by router instance defined in client-only-paths page
+    // which means that navigating inside those should be handled by that router
+    // (not main router provided by gatsby)
+    cy.assertRouterWrapperFocus(false)
+    cy.focused().should(`have.attr`, `id`, `client-only-paths-sub-router`)
+  })
+})

e2e-tests/production-runtime/cypress/support/commands.js

@@ -33,3 +33,40 @@ Cypress.Commands.add(`shouldNotMatchScrollPosition`, id =>
     expect(scrollPosition).not.to.be.closeTo(storedScrollPositions[id], 100)
   })
 )
+
+Cypress.Commands.add(`assertRouterWrapperFocus`, (shouldBeFocused = true) =>
+  cy
+    .focused()
+    .should(
+      shouldBeFocused ? `have.attr` : `not.have.attr`,
+      `id`,
+      `gatsby-focus-wrapper`
+    )
+)
+
+Cypress.Commands.add(
+  `navigateAndWaitForRouteChange`,
+  {
+    prevSubject: `optional`,
+  },
+  (subject, pathname) => {
+    cy.window().then(win => {
+      win.___navigate(pathname)
+    })
+
+    return cy.waitForAPI(`onRouteUpdate`).then(() => subject)
+  }
+)
+
+Cypress.Commands.add(
+  `changeFocus`,
+  {
+    prevSubject: `optional`,
+  },
+  subject => {
+    cy.get(`a`)
+      .first()
+      .focus()
+      .then(() => subject)
+  }
+)

e2e-tests/production-runtime/src/pages/client-only-paths.js

@@ -15,7 +15,11 @@ const basePath = `/client-only-paths`
 
 const ClientOnlyPathPage = props => (
   <Layout>
-    <Router location={props.location} basepath={basePath}>
+    <Router
+      location={props.location}
+      basepath={basePath}
+      id="client-only-paths-sub-router"
+    >
       <Page path="/" page="index" />
       <Page path="/:page" />
     </Router>

e2e-tests/production-runtime/src/pages/paths.js

@@ -7,7 +7,7 @@ const NotFound = () => <h1>Not Found in App</h1>
 
 const AppPage = () => (
   <Router>
-    <App path="/paths/app" />
+    <App path="/app" />
     <NotFound default />
   </Router>
 )

packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap

@@ -6,8 +6,8 @@ exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyCom
 
 exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div> div3 </div><div> div2 </div><div> div1 </div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"></div><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/></head><body><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><div> div3 </div><div> div2 </div><div> div1 </div></body></html>"`;
 
-exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
+exports[`static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"use-credentials\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><noscript id=\\"gatsby-noscript\\">This app works best with JavaScript enabled.</noscript><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" role=\\"group\\" id=\\"gatsby-focus-wrapper\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";window.webpackCompilationHash=\\"1234567890abcdef1234\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;

packages/gatsby/cache-dir/ensure-resources.js

@@ -169,8 +169,17 @@ class EnsureResources extends React.Component {
     if (!this.hasResources(this.state.pageResources) && isInitialRender) {
       window.___failedResources = true
 
-      // prevent hydrating
-      throw new Error(`Missing resources for ${this.state.location.pathname}`)
+      console.error(`Missing resources for ${this.state.location.pathname}`)
+      // Code below cause partial hydration. Anything above will be properly hydrated,
+      // but there's really not much other than LocationHandler and any wrappers
+      // added by wrapRootElement. <div> will mount in place of @reach/router's wrapper
+      // and preserve DOM elements from static html.
+      return (
+        <div
+          dangerouslySetInnerHTML={{ __html: `` }}
+          suppressHydrationWarning
+        />
+      )
     }
 
     isInitialRender = false

packages/gatsby/cache-dir/loader.js

@@ -308,6 +308,7 @@ const queue = {
           const page = {
             componentChunkName: pageData.componentChunkName,
             path: pageData.path,
+            matchPath: pageData.matchPath,
             webpackCompilationHash: pageData.webpackCompilationHash,
           }
 

packages/gatsby/cache-dir/page-renderer.js

@@ -20,7 +20,7 @@ class PageRenderer extends React.Component {
       replacementElement ||
       createElement(this.props.pageResources.component, {
         ...props,
-        key: this.props.pageResources.page.path,
+        key: this.props.path || this.props.pageResources.page.path,
       })
 
     const wrappedPage = apiRunner(