Reach skip nav example #21376
Reach skip nav example #21376
Conversation
| ```javascript:layout.js | ||
| import { SkipNavLink, SkipNavContent } from "@reach/skip-nav" | ||
| import "@reach/skip-nav/styles.css" //this will show/hide the link on focus | ||
| ;<> |
There was a problem hiding this comment.
I wonder if for clarity for users, it would be easier to see this wrapped in a function called App?
|
This is so awesome! A couple quick things. I think the README has important information, but we should also include instructions for running the example. npm install, gatsby develop, etc. |
| @@ -0,0 +1,32 @@ | |||
| # Using @reach/skip-nav | |||
There was a problem hiding this comment.
I still feel like this example needs to describe what it does, and the hook into client-side routing is significant to mention in addition to the "skip-nav" part.
|
Okay I made a couple significant updates. Could I get another once-over from @gatsbyjs/learning? |
|
@marcysutton does this look mergeable? |
There was a problem hiding this comment.
Hey @madalynrose, I did another review of this. let me know what you think!
| path: `${__dirname}/src/images`, | ||
| }, | ||
| }, | ||
| `gatsby-transformer-sharp`, |
There was a problem hiding this comment.
Do these Sharp/image plugins need to be in here?
| * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/ | ||
| */ | ||
|
|
||
| const Image = () => { |
There was a problem hiding this comment.
Should this image component and dependencies be in here?
Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com>
|
Thanks for catching superfluous content @marcysutton! This should be good to go! |
ascorbic
added
the
status: needs docs review
|
I think this example can be merged now, thanks so much for your work on it @madalynrose! |
* add skip link example to simple starter * update README * add comments to gatsby-browser * add gatsby-image to package.json * update announcer live region to be polite * update readme * add cypress tests * Apply language suggestions from code review Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * remove unneccessary image content from example * remove unnecessary test * run prettier on README.md Co-authored-by: Marcy Sutton <marcy@gatsbyjs.com>
Description
Add an example project showcasing how to leverage @reach/skip-nav to create the ideal navigation focus experience based on research done by @marcysutton and Fable Labs. The updated recommendation was recently added to our blog post on client-side routing in PR #20540. Because this isn't achievable at the framework level, we should show users how to implement it in their own projects.
This is a cleaner version of #21107