feat: add skip-to-content link to improve accessability (#985)

This commit is contained in:
Robert Kaussow 2025-03-01 23:00:36 +01:00 committed by GitHub
parent 3d695d85a0
commit b6d6abe239
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 35 additions and 1 deletions

View File

@ -22,6 +22,10 @@
</head>
<body itemscope itemtype="https://schema.org/WebPage">
<div class="w-full flex justify-center">
<a href="#main-content" id="gdoc-to-main" class="gdoc-markdown__link">Skip to main content</a>
</div>
{{ partial "svg-icon-symbols" . }}

View File

@ -4,6 +4,7 @@
<article
class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
id="main-content" tabindex="-1"
>
<h1>{{ partial "utils/title" . }}</h1>
{{ partial "utils/content" . }}

View File

@ -4,6 +4,7 @@
<article
class="gdoc-markdown gdoc-markdown__align--{{ default "left" (.Page.Params.geekdocAlign | lower) }}"
id="main-content" tabindex="-1"
>
<h1>{{ partial "utils/title" . }}</h1>
{{ partial "page-metadata" . }}

View File

@ -1,4 +1,5 @@
{{ define "main" }}
<div id="main-content" tabindex="-1">
{{ range .Paginator.Pages }}
<article class="gdoc-post">
<header class="gdoc-post__header">
@ -31,6 +32,7 @@
</footer>
</article>
{{ end }}
</div>
{{ partial "pagination.html" . }}
{{ end }}

View File

@ -1,4 +1,5 @@
{{ define "main" }}
<div id="main-content" tabindex="-1">
{{ range .Paginator.Pages.ByTitle }}
<article class="gdoc-post">
<header class="gdoc-post__header">
@ -28,5 +29,6 @@
</footer>
</article>
{{ end }}
</div>
{{ partial "pagination.html" . }}
{{ end }}

View File

@ -1,4 +1,5 @@
{{ define "main" }}
<div id="main-content" tabindex="-1">
{{ range .Paginator.Pages }}
<article class="gdoc-markdown gdoc-post">
<header class="gdoc-post__header">
@ -29,6 +30,7 @@
</footer>
</article>
{{ end }}
</div>
{{ partial "pagination.html" . }}
{{ end }}

View File

@ -1,5 +1,5 @@
{{ define "main" }}
<article class="gdoc-post">
<article class="gdoc-post" id="main-content" tabindex="-1">
<header class="gdoc-post__header">
<h1 class="gdoc-post__title">{{ partial "utils/title" . }}</h1>
<div class="flex flex-wrap align-center gdoc-post__meta gdoc-post__meta--head">

View File

@ -105,6 +105,24 @@ body {
* {
box-sizing: inherit;
}
#gdoc-to-main {
position: absolute;
margin: defaults.$padding-8 0;
padding: defaults.$padding-8;
display: inline-block;
background-color: var(--accent-color-lite);
border-radius: defaults.$border-radius;
border: defaults.$border-1 solid var(--accent-color);
transform: translateY(0);
transition: transform 250ms ease-in;
&:not(:focus) {
transform: translateY(-#{defaults.$padding-64});
}
}
}
h1,

View File

@ -101,3 +101,7 @@
display: inline-block;
min-width: 4rem;
}
.w-full {
width: 100%;
}