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.

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

Creating Skip Navigation Links #29

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
18 changes: 18 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@astrojs/check": "^0.9.4",
"@astrojs/tailwind": "^5.1.2",
"@locomotivemtl/grid-helper": "^1.0.0",
"@swup/a11y-plugin": "^5.0.0",
"@swup/head-plugin": "^2.2.0",
"@swup/preload-plugin": "^3.2.10",
"@swup/scripts-plugin": "^2.1.0",
Expand Down
24 changes: 24 additions & 0 deletions src/components/SkipLink/SkipLink.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
import Button from '@components/Button/Button.astro';

interface Props {
label?: string;
class?: string;
target?: string;
}

const {
label = 'Skip to main content',
target = '#page-heading',
class: propsClass,
...rest
} = Astro.props;

const classes = ['c-skip-link', propsClass];
---

<Button class:list={classes} href={target} {...rest}>{label}</Button>

<style is:global>
@import 'SkipLink.scss';
</style>
27 changes: 27 additions & 0 deletions src/components/SkipLink/SkipLink.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
// ==========================================================================
// Components / Skip Link Button
// ==========================================================================

.c-skip-link {
position: absolute;
top: theme-spacing('fluid-sm');
left: 50%;
opacity: 0;
transform: translate3d(-50%, -100%, 0);
z-index: theme-z('skip');
white-space: nowrap;
pointer-events: none;
transition:
opacity theme-speed() theme-ease(),
transform theme-speed() theme-ease();

@media (prefers-reduced-motion) {
transition: none;
}

&:focus-within {
pointer-events: all;
opacity: 1;
transform: translate3d(-50%, 0, 0);
}
}
5 changes: 4 additions & 1 deletion src/layouts/Layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import '@styles/main.scss';
import { SEO } from 'astro-seo';
import { defaultSeo } from '@data/seo';
import { getSeo } from '@scripts/utils/seo';
import SkipLink from '@components/SkipLink/SkipLink.astro';

interface Props {
title: string;
Expand Down Expand Up @@ -43,6 +44,8 @@ const FONTS: string[] = [
}
</head>
<body>
<SkipLink />

<div class="u-container">
<nav class="u-flex u-gap-gutter u-py-fluid-md">
<a href="/">Index</a>
Expand All @@ -52,7 +55,7 @@ const FONTS: string[] = [
</div>

<main id="swup" class="transition-fade">
<div id="content">
<div id="main">
<slot />
</div>
</main>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/about.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import Wysiwyg from '../components/Wysiwyg/Wysiwyg.astro';

<Layout title="About">
<header class="u-container">
<h1 class="u-heading-h1">About</h1>
<h1 id="page-heading" class="u-sr-only">About</h1>

<p>This is the about page with a hidden title</p>
</header>

<div class="w-full u-mt-fluid-xl u-h-[20vh] u-bg-black"></div>
Expand Down
33 changes: 17 additions & 16 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@ import Button from '@components/Button/Button.astro';
import Icon from '@components/Icon/Icon.astro';
import Wysiwyg from '@components/Wysiwyg/Wysiwyg.astro';
import Accordion from '@components/Accordion/Accordion.astro';
import SkipLink from '@components/SkipLink/SkipLink.astro';

import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to the Locomotive Astro Boilerplate.">
<header class="u-container">
<Icon name="logo" />
<h1 class="u-heading-h1">Welcome to the Locomotive Astro Boilerplate.</h1>
<h1 id="page-heading" class="u-heading-h1">Welcome to the Locomotive Astro Boilerplate.</h1>

<button class="shortcut-functions">Test</button>
</header>
Expand Down Expand Up @@ -46,21 +47,21 @@ import Layout from '../layouts/Layout.astro';
</Wysiwyg>
</div>

<div class="u-col-span-full u-text-body md:u-col-span-4">
<Accordion label="Accordion summary">
<Wysiwyg>
<Fragment
set:html={`<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque quam, nam omnis sunt laudantium tenetur obcaecati? Inventore eos vitae id repellat cum possimus voluptates nam voluptatum, assumenda, atque nesciunt debitis?</p>`}
/>
</Wysiwyg>
</Accordion>
<Accordion label="Accordion summary">
<Wysiwyg>
<Fragment
set:html={`<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque quam, nam omnis sunt laudantium tenetur obcaecati? Inventore eos vitae id repellat cum possimus voluptates nam voluptatum, assumenda, atque nesciunt debitis?</p>`}
/>
</Wysiwyg>
</Accordion>
<div class="u-relative u-col-span-full u-text-body md:u-col-span-4">
<SkipLink target="#accordions-end" label="Skip accordions list" />
{
[...Array(5)].map(() => (
<Accordion label="Accordion summary">
<Wysiwyg>
<Fragment
set:html={`<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque quam, nam omnis sunt laudantium tenetur obcaecati? Inventore eos vitae id repellat cum possimus voluptates nam voluptatum, assumenda, atque nesciunt debitis?</p>`}
/>
</Wysiwyg>
</Accordion>
))
}
<span id="accordions-end" class="u-sr-only" aria-label="End of accordions list"
></span>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/post.astro
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const blocks = [
<Layout title="Post title">
<header class="u-container">
<Icon name="logo" />
<h1 class="u-heading-h1">Post title</h1>
<h1 id="page-heading" class="u-heading-h1">Post title</h1>
</header>

<div class="u-container u-mt-fluid-xl">
Expand Down
15 changes: 13 additions & 2 deletions src/scripts/classes/Transitions.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { toDash } from '@scripts/utils/string';
import SwupA11yPlugin from '@swup/a11y-plugin';
import SwupHeadPlugin from '@swup/head-plugin';
import SwupPreloadPlugin from '@swup/preload-plugin';
import SwupScriptsPlugin from '@swup/scripts-plugin';
Expand Down Expand Up @@ -55,7 +56,8 @@ export class Transitions {
preloadHoveredLinks: true,
preloadInitialPage: !import.meta.env.DEV
}),
new SwupScriptsPlugin()
new SwupScriptsPlugin(),
new SwupA11yPlugin()
]
});

Expand Down Expand Up @@ -105,9 +107,18 @@ export class Transitions {
* @see https://swup.js.org/hooks/#visit-start
* @param visit: VisitType
*/
onVisitStart() {
onVisitStart(visit: VisitType) {
document.documentElement.classList.add(Transitions.TRANSITION_CLASS);
document.documentElement.classList.remove(Transitions.READY_CLASS);

if (visit.a11y) {
visit.a11y.focus = 'h1#page-heading';

// Best not to assume where to move the focus on fragment visits
if (visit.fragmentVisit) {
visit.a11y.focus = false;
}
}
}

/**
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export default {
// smooth: 'cubic-bezier(0.380, 0.005, 0.215, 1)',
},
zIndex: {
skip: '300',
modal: '200',
header: '100',
above: '1',
Expand Down
4 changes: 4 additions & 0 deletions types/swup.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@ type VisitType = {
to: {
html: string;
};
a11y?: {
announce: string;
focus: string | false;
};
};