diff options
| author |  Caleb Jasik <calebjasik@jasik.xyz>
| 2021-07-22 23:52:01 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-22 23:52:01 -0500 |
| commit | 0c729f248d8d6a5f789b689f6a1ed9d544ec3c3a (patch) | |
| tree | 1e9727a42885ea05032267c5f6931121de46ac39 | |
| parent | 353bc89f65290a7f2a5fcdee79e665c566b26e07 (diff) | |
| download | astro-0c729f248d8d6a5f789b689f6a1ed9d544ec3c3a.tar.gz astro-0c729f248d8d6a5f789b689f6a1ed9d544ec3c3a.tar.zst astro-0c729f248d8d6a5f789b689f6a1ed9d544ec3c3a.zip | |
docs: adds a skip link so that you can skip the nav via keyboard (#829)
Diffstat (limited to '')
| -rw-r--r-- | docs/public/index.css | 29 | ||||
| -rw-r--r-- | docs/src/layouts/Main.astro | 1 |
2 files changed, 30 insertions, 0 deletions
diff --git a/docs/public/index.css b/docs/public/index.css index f33c7c2eb..8b81cf391 100644 --- a/docs/public/index.css +++ b/docs/public/index.css @@ -433,6 +433,35 @@ h2.heading { white-space: nowrap; border-width: 0; } + +.focus\:not-sr-only:focus, +.focus\:not-sr-only:focus-visible { + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; +} + +.skiplink, +.skiplink:focus, +.skiplink:focus-visible { + position: absolute; + padding: 0.25em; + font-size: larger; + top: 0.5rem; + left: 0.5rem; + z-index: 999; + display: block; + background-color: var(--theme-bg); + color: var(--theme-text-accent); + border-radius: 0.25em; + outline: var(--theme-text-accent) solid 1px; + outline-offset: 0; +} /* Screenreader Only Text - End */ :target { diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro index 90b19dfcf..689d52d9c 100644 --- a/docs/src/layouts/Main.astro +++ b/docs/src/layouts/Main.astro @@ -256,6 +256,7 @@ if (currentPage) { <body> <header> + <a href="#article" class="sr-only focus:not-sr-only skiplink"><span>Skip to Content</span></a> <nav class="nav-wrapper" title="Top Navigation"> <div class="menu-toggle"> <MenuToggle client:idle/> |