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

pieh · 2019-04-07T12:29:02Z

This is work in progress to assert that focus management is working as expected on navigation.

Right now we are misusing @reach/router and don't take full advantage of its focus management feature because we have with single catch-all route - which means that this route never change and focus is never triggered.

Initially I'll try to push just failing test (to verify correctness), with actual changes following that

marcysutton · 2019-04-08T17:32:59Z

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

@@ -33,3 +33,7 @@ Cypress.Commands.add(`shouldNotMatchScrollPosition`, id =>
    expect(scrollPosition).not.to.be.closeTo(storedScrollPositions[id], 100)
  })
 )
+
+Cypress.Commands.add(`assertRouterWrapperFocus`, () =>


This is dope! 👍

marcysutton · 2019-04-08T17:40:35Z

packages/gatsby/src/utils/webpack.config.js

+    const target =
+      stage === `build-html` || stage === `develop-html` ? `node` : `web`
+    if (target === `web`) {
+      // force to use es modules when importing internals of @reach.router


Should we open an issue on @reach/router to make any changes?

We do import internal match function (to match those parameterized / wildcarderded paths like /app/:someParam or /app/*). If @reach/router exported that from entry point, we wouldn't need this part, but I'm not sure if Ryan would really want that - as this is lower level function. Worth asking at least ;)

~~@pieh are you sure we need this? https://github.com/reach/router/blob/master/package.json#L6 should take care of it.~~

Nvm I see what you did there, it's because we require @reach/router/lib/utils

pieh · 2019-05-16T01:05:47Z

finally got unblocked on this, next step here is to adjust gatsby develop to use similar technique (right now only production builds are handled)

pieh · 2019-05-16T01:09:52Z

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

+          dangerouslySetInnerHTML={{ __html: `` }}
+          suppressHydrationWarning
+        />
+      )


@davidbailey00 I would like sanity check here:
this seems to do similar thing (preventing react from cleaning up ___gatsby div) and it works in more scenarios than throwing (in case we throw before any parent component "renders" any DOM element, react will wipe ___gatsby div). It seems like we were "lucky" with this, because
was always there coming from above . My change moves below so no DOM element is above, which was causing issues.

this means we will do a full client rehydration if something goes wrong, right? maybe add a comment about it?

It's partial hydration - things above the actual page will be hydrated - so if users use wrapRootElement/wrapPageElement or gatsby-plugin-layout those will be actually hydrated, but the content of the page itself (in case template chunk or query results can't be loaded) won't be trully hydrated, but content from static html will be there

This is a neat trick that you can do when using:

<div dangerouslySetInnerHTML={{ __html: `` }} suppressHydrationWarning />

during hydration, as it won't try to actually change DOM nodes under it.

But yeah, I should add more context there for sure

wardpeet · 2019-05-16T10:07:37Z

so the fix is actually bringing all routes under the as separate pages? This way Reach router knows about all paths and can do its magic tricks?

pieh · 2019-05-16T13:09:01Z

so the fix is actually bringing all routes under the as separate pages? This way Reach router knows about all paths and can do its magic tricks?

We still have one route, but it's dynamic - see <PageRenderer> path prop under <Router>. This should make sure that @reach/router detect that route has actually changed and will properly trigger focusing router's wrapper div (which should tell assistive tech that something happened on navigation)

edit:
See e2e tests I added and result for those without any code changes in https://circleci.com/gh/gatsbyjs/gatsby/102743?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link (so right now in master, router wrapper is not being focused on navigation)

…anagment tests

navigating from and to 404 doesn't focus router wrapper correctly. This is because 404 in development is special case (see notes before skipped e2e-tests/development-runtime accessibility tests). This can be fixed but require a lot of changes which would be out of scope of this PR and would potentially make it harder to merge page manifest changes, so for now lets ship fixes that are already here.

pieh · 2019-05-19T23:55:47Z

This should be ready to review. Here's demo with voiceover for production build https://www.dropbox.com/s/tbrt2uczih2jolk/Kapture%202019-05-18%20at%2017.21.45.mp4?dl=0 - page content is being announced properly (I think). To live check it, you can use for example https://deploy-preview-13197--using-remark.netlify.com/ which is build with changes from this PR

Notes:

There is problematic scenario that I didn't fix in development (see skipped tests in development-runtime). Problematic scenario is navigating in development from or to 404 page - this is because 404 in development is pretty special case and we have 2 code paths that it's pretty difficult to properly use router there. This code may also significantly change for page manifest changes so I chose to not spend too much time on it and focus on shipping this as this fixes majority of issues with focus management
I duplicated some code in production and runtime e2e tests - not sure if extra effort to keep it DRY is worth the time investment? It might be more worth if we have more duplicated tests across those two?

pieh · 2019-06-25T10:43:47Z

Merge conflicts after per-page-manifest merge are resolved and this is ready for review

sidharthachatterjee · 2019-06-25T13:50:30Z

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" />


sidharthachatterjee

🌮🌮🌮

sidharthachatterjee · 2019-07-03T13:18:14Z

Published in gatsby@2.13.2

pieh added 3 commits April 7, 2019 14:25

add probably failing test

c783437

rename custom command to make it clear it's assertion

4379722

first find page, then use router + import from @reach/router/es

571aa10

pieh requested a review from a team as a code owner April 7, 2019 12:52

pieh added 3 commits April 7, 2019 16:20

revert grabbing @reach/router/es directly

d4147e4

use webpack alias to use @reach/router es build for browser bundles

39a0e10

update snapshots to cover added id to focus wrapper

d7d1e80

pieh changed the title ~~[wip] tests(gatsby): test focus management on navigation~~ [wip] fix(gatsby): fix not focusing router wrapper after navigation Apr 7, 2019

DSchau added the status: WIP label Apr 8, 2019

marcysutton reviewed Apr 8, 2019

View reviewed changes

pieh added 2 commits April 14, 2019 20:46

Merge remote-tracking branch 'upstream/master' into reach-focus

b0818f2

testing

ac4f22e

marcysutton mentioned this pull request Apr 18, 2019

[feature request] export match function from utils reach/router#263

Open

pieh mentioned this pull request Apr 29, 2019

Loader use page data #13409

Merged

pieh added 4 commits May 15, 2019 16:37

Merge remote-tracking branch 'origin/master' into reach-focus

335b3e6

mind blown

b69e3df

Merge remote-tracking branch 'origin/master' into reach-focus

8af2517

use BASE_PATH and PATH_PREFIX

15740ee

pieh commented May 16, 2019

View reviewed changes

pieh added 3 commits May 20, 2019 00:50

fix focusing on navigation from 404 to different 404, improve focus m…

06b3114

…anagment tests

remove stray console.log

30df94c

pieh changed the title ~~[wip] fix(gatsby): fix not focusing router wrapper after navigation~~ fix(gatsby): fix not focusing router wrapper after navigation May 19, 2019

pieh added status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response and removed status: WIP labels May 19, 2019

pieh added 2 commits June 24, 2019 23:33

Merge remote-tracking branch 'origin/master' into reach-focus

f84e41e

update dev runtime

5996d80

pieh force-pushed the reach-focus branch from 99357f1 to 5996d80 Compare June 25, 2019 09:45

pieh added 2 commits June 25, 2019 11:51

update snapshot

ef89046

use nested route

931c911

pieh added the status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response label Jun 25, 2019

sidharthachatterjee reviewed Jun 25, 2019

View reviewed changes

marcysutton mentioned this pull request Jul 1, 2019

a11y issues: page nav doesn't trigger assistive tech #5581

Closed

pieh added 2 commits July 3, 2019 13:16

Merge remote-tracking branch 'origin/master' into reach-focus

2868637

add matchPath to pageResources object

43bc8b4

sidharthachatterjee self-assigned this Jul 3, 2019

sidharthachatterjee removed the status: awaiting reviewer response A pull request that is currently awaiting a reviewer's response label Jul 3, 2019

pieh added 2 commits July 3, 2019 13:38

update snapshot

dfacf88

remove stray console.log

498337e

sidharthachatterjee self-requested a review July 3, 2019 12:11

sidharthachatterjee approved these changes Jul 3, 2019

View reviewed changes

sidharthachatterjee added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Jul 3, 2019

gatsbybot merged commit b8e2adc into gatsbyjs:master Jul 3, 2019

pieh mentioned this pull request Jul 4, 2019

Gatsby@2.13.2 - Client-only routes broken #15401

Closed

aldegoeij mentioned this pull request Jul 4, 2019

Client only routes - Query not run warning #15398

Closed

pieh mentioned this pull request Jul 4, 2019

fix(gatsby): restore client-only-paths behaviour #15408

Closed

pieh deleted the reach-focus branch July 4, 2019 13:34

pieh mentioned this pull request Jul 5, 2019

fix(gatsby): restore client-only-paths behaviour #15457

Merged

d4rekanguok mentioned this pull request Jul 8, 2019

[gatsby] CJK characters in pathname stop working since 2.13.2 #15500

Closed

blainekasten mentioned this pull request Nov 8, 2019

Accessibility Issues and Ongoing Maintenance reach/router#322

Closed

pieh restored the reach-focus branch May 17, 2020 20:45

cometkim mentioned this pull request Jul 6, 2020

Unexpected identifier? cometkim/gatsby-plugin-linaria#19

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pieh commented Apr 7, 2019

marcysutton Apr 8, 2019

marcysutton Apr 8, 2019

pieh Apr 8, 2019

wardpeet May 16, 2019 •

edited

Loading

pieh commented May 16, 2019

pieh May 16, 2019

wardpeet May 16, 2019

pieh May 16, 2019

wardpeet commented May 16, 2019 •

edited

Loading

pieh commented May 16, 2019 •

edited

Loading

pieh commented May 19, 2019

pieh commented Jun 25, 2019

sidharthachatterjee Jun 25, 2019

sidharthachatterjee left a comment

sidharthachatterjee commented Jul 3, 2019

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

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

Conversation

pieh commented Apr 7, 2019

marcysutton Apr 8, 2019

Choose a reason for hiding this comment

marcysutton Apr 8, 2019

Choose a reason for hiding this comment

pieh Apr 8, 2019

Choose a reason for hiding this comment

wardpeet May 16, 2019 • edited Loading

Choose a reason for hiding this comment

pieh commented May 16, 2019

pieh May 16, 2019

Choose a reason for hiding this comment

wardpeet May 16, 2019

Choose a reason for hiding this comment

pieh May 16, 2019

Choose a reason for hiding this comment

wardpeet commented May 16, 2019 • edited Loading

pieh commented May 16, 2019 • edited Loading

pieh commented May 19, 2019

pieh commented Jun 25, 2019

sidharthachatterjee Jun 25, 2019

Choose a reason for hiding this comment

sidharthachatterjee left a comment

Choose a reason for hiding this comment

sidharthachatterjee commented Jul 3, 2019

wardpeet May 16, 2019 •

edited

Loading

wardpeet commented May 16, 2019 •

edited

Loading

pieh commented May 16, 2019 •

edited

Loading