madalynrose

gatsbyjs/gatsby#21059

Update! I'm actively working on a solution for this and have a working bare-bones prototype that gives developers control around client-side routing behavior that Gatsby can hook into.

As it stands we have two components. They are based heavily on @reach/skip-nav and their current implementation is fairly simplistic.

RouteAnnouncement

Gatsby looks for this element when it navigates to a new page in cache-dir/navigation.js and outputs its contents to Gatsby's Route Announcer.

This component can be used multiple times in a site (e.g. implemented to always use page title in a general Layout.js file and then overridden in specific pages or posts for custom announcements) and Gatsby will use the most specific instance. If the announcement should be different from the title of the page, Gatsby makes it easy to change without visually displaying that custom text with the visuallyHidden flag.

madalynrose

Keybase proof

I hereby claim:

• I am madalynrose on github.
• I am madalyn (https://keybase.io/madalyn) on keybase.
• I have a public key ASDl591xCmyfF3ICNnOu39gXgXPOqiqFpQ-TbsSFl0aWxQo

To claim this, I am signing this object:

madalynrose

jsdom = require('jsdom').jsdom

module.exports = class DOMContext

  constructor: ->
    @document = jsdom('')

  getDocument: ->
    return @document

madalynrose

React = require 'react'
{ findDOMNode, render } = require 'react-dom'
{ mount, shallow } = require 'enzyme'
axeCore = require 'axe-core'
assert = require('assert')
DOMContext = require('./helpers')

module.exports = class a11yHelper

  testRawComponent: (component) =>

madalynrose

### Keybase proof

I hereby claim:

  * I am madalynrose on github.
  * I am madalyn (https://keybase.io/madalyn) on keybase.
  * I have a public key ASBdB2VEzEizp7kDOkJvUP341oD4TBPv19g15k7l2AKIBQo

To claim this, I am signing this object: