♿️ feat(a11y): add skip to content link for keyboard navigation (#552)

themes/tabi/i18n/ru.toml

@@ -30,6 +30,7 @@ few_results = "$NUMBER результата"  # 2, 3, 4 but not 12-14
 many_results = "$NUMBER результатов"  # 5-9, 0, 11-14, and others
 
 # Navigation.
+skip_to_content = "Перейти к содержанию"
 pinned = "Закреплено"
 jump_to_posts = "Перейти к записям"
 read_more = "Читать далее"

themes/tabi/sass/parts/_misc.scss

@@ -328,3 +328,28 @@ details summary {
         flex-direction: column;
     }
 }
+
+#skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    transform: translateY(-100%);
+    opacity: 0;
+    z-index: 9999;
+    transition: all 0.1s ease;
+    border-radius: 0 0 5px 0;
+    background-color: var(--primary-color);
+    padding: 4px 8px;
+    color: var(--hover-color);
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
+#skip-link:focus {
+    top: 0;
+    transform: translateY(0);
+    opacity: 1;
+    outline: 2px solid var(--text-color);
+    outline-offset: 2px;
+}

themes/tabi/templates/base.html

@@ -34,8 +34,9 @@ This variable will hold all the text strings for the language #}
 {% include "partials/header.html" %}
 
 <body{% if lang in rtl_languages %} dir="rtl"{% endif %}{% if config.extra.override_serif_with_sans %} class="use-sans-serif"{% endif %}>
+    <a href="#main-content" id="skip-link">{{ macros_translate::translate(key="skip_to_content", default="Skip to content", language_strings=language_strings) }}</a>
     {% include "partials/nav.html" %}
-    <div class="content">
+    <div class="content" id="main-content">
 
         {# Post page is the default #}
         {% block main_content %}