diff options
| -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/> |