Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add a skip nav link to improve keyboard navigation #212

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: add a skip nav link to improve keyboard navigation #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adb21f7
feat: add a skip nav link to all pages
chrisvogt Jul 25, 2024
a64a53c
SQUASHME: update snapshot tests
chrisvogt Jul 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions theme/gatsby-browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,13 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
import './src/styles/global.css'

export { default as wrapRootElement } from './wrapRootElement'

// See https://fossies.org/linux/gatsby/examples/using-reach-skip-nav/README.md
export const onRouteUpdate = ({ location, prevLocation }) => {
if (prevLocation !== null) {
const skipLink = document.querySelector('[data-reach-skip-link]') // Ccomes with the <SkipNavLink> component.
if (skipLink) {
skipLink.focus()
}
}
}
1 change: 1 addition & 0 deletions theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"@mdx-js/loader": "3.0.1",
"@mdx-js/mdx": "3.0.1",
"@mdx-js/react": "3.0.1",
"@reach/skip-nav": "^0.18.0",
"@reduxjs/toolkit": "^2.2.6",
"@theme-ui/color": "^0.16.0",
"@theme-ui/components": "^0.16.0",
Expand Down
125 changes: 69 additions & 56 deletions theme/src/components/__snapshots__/layout.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,85 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Layout matches the snapshot 1`] = `
<div
className="css-tvtok6-Layout"
>
[
<a
data-reach-skip-link=""
data-reach-skip-nav-link=""
href="#reach-skip-nav"
>
Skip to content
</a>,
<div
style={
{
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
className="css-tvtok6-Layout"
>
<canvas
style={
{
"display": "block",
"height": "100%",
"left": 0,
"position": "absolute",
"top": 0,
"width": "100%",
}
}
/>
<div
style={
{
"WebkitBackdropFilter": "blur(100px)",
"backdropFilter": "blur(100px)",
"backgroundColor": "rgba(75, 0, 130, 0.02)",
"height": "100%",
"bottom": 0,
"left": 0,
"pointerEvents": "none",
"position": "absolute",
"right": 0,
"top": 0,
"width": "100%",
}
}
/>
</div>
<header
className="css-1jqf6qp-Layout"
role="banner"
>
<div
className="MOCK__TopNavigation"
/>
</header>
<main
role="main"
>
<div
className="fake-website"
>
<h1>
Fake Website
</h1>
<p>
Lorum ipsum dolor sit amet.
</p>
<canvas
style={
{
"display": "block",
"height": "100%",
"left": 0,
"position": "absolute",
"top": 0,
"width": "100%",
}
}
/>
<div
style={
{
"WebkitBackdropFilter": "blur(100px)",
"backdropFilter": "blur(100px)",
"backgroundColor": "rgba(75, 0, 130, 0.02)",
"height": "100%",
"left": 0,
"pointerEvents": "none",
"position": "absolute",
"top": 0,
"width": "100%",
}
}
/>
</div>
</main>
<div
className="MOCK__Footer"
/>
</div>
<header
className="css-1jqf6qp-Layout"
role="banner"
>
<div
className="MOCK__TopNavigation"
/>
</header>
<main
role="main"
>
<div
data-reach-skip-nav-content=""
id="reach-skip-nav"
/>
<div
className="fake-website"
>
<h1>
Fake Website
</h1>
<p>
Lorum ipsum dolor sit amet.
</p>
</div>
</main>
<div
className="MOCK__Footer"
/>
</div>,
]
`;
55 changes: 31 additions & 24 deletions theme/src/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
/** @jsx jsx */
import { jsx } from 'theme-ui'
import React from 'react';
import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
import '@reach/skip-nav/styles.css' //this will show/hide the link on focus

import BackgroundPattern from './animated-background'
import Footer from './footer'
Expand All @@ -13,33 +16,37 @@ import TopNavigation from './top-navigation'
* to extend this component and attach additional contexts and providers.
*/
const Layout = ({ children, disableMainWrapper, hideHeader, hideFooter }) => (
<div sx={{
backgroundColor: 'background',
position: 'relative', // stretch to full height
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
color: theme => theme?.colors?.text
}}>
<BackgroundPattern />
<>
<SkipNavLink />
<div sx={{
backgroundColor: 'background',
position: 'relative', // stretch to full height
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
color: theme => theme?.colors?.text
}}>
<BackgroundPattern />

{/* NOTE(chrisvogt): hide the top navigation on the home and 404 pages */}
{!hideHeader && (
<header role='banner' sx={{ position: 'relative' }}>
<TopNavigation />
</header>
)}
{/* NOTE(chrisvogt): hide the top navigation on the home and 404 pages */}
{!hideHeader && (
<header role='banner' sx={{ position: 'relative' }}>
<TopNavigation />
</header>
)}

{
disableMainWrapper ? children : (
<main role='main'>
{children}
</main>
)
}
{
disableMainWrapper ? children : (
<main role='main'>
<SkipNavContent />
{children}
</main>
)
}

{!hideFooter && <Footer />}
</div>
{!hideFooter && <Footer />}
</div>
</>
)

export default Layout
2 changes: 2 additions & 0 deletions theme/src/templates/home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/** @jsx jsx */
import { jsx, Container, Grid } from 'theme-ui'
import { graphql } from 'gatsby'
import { SkipNavContent } from '@reach/skip-nav'

import Footer from '../components/footer'
import HomeHeaderContent from '../components/home-header-content'
Expand Down Expand Up @@ -33,6 +34,7 @@ const HomeTemplate = props => {
<HomeNavigation />
</aside>
<main role='main'>
<SkipNavContent />
<div
sx={{
position: 'relative',
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2598,6 +2598,18 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

"@reach/[email protected]":
version "0.18.0"
resolved "https://registry.yarnpkg.com/@reach/polymorphic/-/polymorphic-0.18.0.tgz#2fe42007a774e06cdbc8e13e0d46f2dc30f2f1ed"
integrity sha512-N9iAjdMbE//6rryZZxAPLRorzDcGBnluf7YQij6XDLiMtfCj1noa7KyLpEc/5XCIB/EwhX3zCluFAwloBKdblA==

"@reach/skip-nav@^0.18.0":
version "0.18.0"
resolved "https://registry.yarnpkg.com/@reach/skip-nav/-/skip-nav-0.18.0.tgz#9f72ba7ffcd8231c5d3aa10829ef68806e5bf759"
integrity sha512-7XKHX0NNTz9VJw1d+ZRuu3KhKSOZTIHSbHUuv7qKKPwSNApDa+dVGqR/I7dKwyB/CDFMXO4iEz4XLtOmvi0FEg==
dependencies:
"@reach/polymorphic" "0.18.0"

"@reduxjs/toolkit@^2.2.6":
version "2.2.6"
resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.2.6.tgz#4a8356dad9d0c1ab255607a555d492168e0e3bc1"
Expand Down
Loading