michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: adds a skip link so that you can skip the nav via keyboard (#829)

Browse source
This commit is contained in:
Caleb Jasik 2021-07-22 23:52:01 -05:00 committed by GitHub
parent 353bc89f65
commit 0c729f248d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
docs/public/index.css
View file

@ -433,6 +433,35 @@ h2.heading {
white-space: nowrap; white-space: nowrap;
border-width: 0; 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 */ /* Screenreader Only Text - End */
:target { :target {

1
docs/src/layouts/Main.astro
View file

@ -256,6 +256,7 @@ if (currentPage) {
<body> <body>
<header> <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"> <nav class="nav-wrapper" title="Top Navigation">
<div class="menu-toggle"> <div class="menu-toggle">
<MenuToggle client:idle/> <MenuToggle client:idle/>