Jump to content link for a11y

This commit is contained in:
Jake Mason 2023-01-16 22:22:23 -05:00
parent b2f8bb45cf
commit 922d6283f8
2 changed files with 30 additions and 1 deletions

View File

@ -769,3 +769,31 @@ footer {
@include usevar(background-color, background-even-background); @include usevar(background-color, background-even-background);
@include usevar(--fade-color, background-even-background); @include usevar(--fade-color, background-even-background);
} }
.sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
transition: 0.2s all;
}
.sr-focusable {
@extend .sr-only;
&:focus {
padding: 15px 10px;
height: auto;
width: auto;
background: var(--content-background);
clip: initial;
clip-path: initial;
z-index: 99999;
}
}

View File

@ -1,4 +1,5 @@
<header id="site-header" class="mb3 bb bw1 b--theme-dark"> <header id="site-header" class="mb3 bb bw1 b--theme-dark">
<a href="#content-start" class="sr-focusable" id="content-jump">Jump to Content</a>
<div class="user-options flex justify-center justify-end-ns relative"> <div class="user-options flex justify-center justify-end-ns relative">
{{ if .User }} {{ if .User }}
{{ if .User.IsStaff }} {{ if .User.IsStaff }}
@ -96,7 +97,7 @@
</div> </div>
</div> </div>
</header> </header>
<div id="content-start"></div>
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const header = document.querySelector('#site-header'); const header = document.querySelector('#site-header');