From 1d7e5f1415453d4a2b39ee986bb737cbc4b42358 Mon Sep 17 00:00:00 2001 From: banaanihillo Date: Mon, 24 Jun 2024 20:41:05 +0000 Subject: [PATCH] feature: Add "Skip to main content" anchor (#421) Add a skip navigation link as the first tabbable element; announced by screen readers and initially hidden visually, and visually shown only on focus The `license` fragment will also be moved further down the order, since it previously conflicted with the keyboard navigation I am not too familiar with the various design colors yet, so feel free to fix them for me, or point me to some further resources regarding the design; I merely addressed the contrast on the dark mode, and made the best educated guess about light mode I could :D Reviewed-on: https://codeberg.org/Codeberg/Documentation/pulls/421 Reviewed-by: Otto Reviewed-by: Patrick Schratz Co-authored-by: banaanihillo Co-committed-by: banaanihillo --- assets/css/codeberg-docs.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/assets/css/codeberg-docs.css b/assets/css/codeberg-docs.css index 73d2562..d9a9f3c 100644 --- a/assets/css/codeberg-docs.css +++ b/assets/css/codeberg-docs.css @@ -130,7 +130,6 @@ code:not(pre > code) { .admonition-icon::before { content: ''; - background-color: var(--admonition-border-color--info); mask-position: center; @@ -267,3 +266,21 @@ code:not(pre > code) { #toc-side a { padding-left: 10px; } + +a.show-on-focus { + position: absolute; + left: -9999px; + top: -9999px; + font-size: 1.5em; + background-color: var(--lm-base-body-bg-color); + color: var(--lm-base-text-color); + z-index: 41; +} +.dark-mode a.show-on-focus { + background-color: var(--dm-base-body-bg-color); + color: var(--dm-base-text-color); +} +a.show-on-focus:focus { + left: 0; + top: 0; +}