Fix missing labels (a11y)

Additionally add some missing translations

config.toml

@@ -22,6 +22,7 @@ comments = "Comments"
 comments_description = "You can comment on this blog post by publicly replying to this post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below."
 comments_loading = "Loading"
 comments_noscript = "Loading comments relies on JavaScript. Try enabling JavaScript and reloading, or visit the original post on Mastodon."
+copy_code = "Copy code"
 disclaimer = "Disclaimer"
 drafted = "Drafted"
 faves_from = "Favorites from"
@@ -32,6 +33,7 @@ footer_powered_by = "Powered by"
 footer_powered_by_and = "and"
 footer_source = "Website source"
 go_to_top = "Go to Top"
+language = "Language"
 load_comments = "Load Comments"
 newest_to_oldest = "From newest to oldest"
 open_post = "Open Post"
@@ -65,6 +67,7 @@ comments = "Комментарии"
 comments_description = "Вы можете оставить комментарий к этому блог-посту, публично ответив на него с помощью аккаунта Mastodon или другого аккаунта ActivityPub/Fediverse. Известные неприватные ответы отображены ниже."
 comments_loading = "Загрузка…"
 comments_noscript = "Загрузка комментариев зависит от JavaScript. Попробуйте включить JavaScript и перезагрузить, или посетите оригинальный пост на Mastodon."
+copy_code = "Скопировать код"
 disclaimer = "Дисклеймер"
 drafted = "Черновик"
 faves_from = "Избранное с"
@@ -75,6 +78,7 @@ footer_powered_by = "Работает на базе"
 footer_powered_by_and = "и"
 footer_source = "Исходный код веб-сайта"
 go_to_top = "Перейти в Начало"
+language = "Язык"
 load_comments = "Загрузить Комментарии"
 newest_to_oldest = "От новейшего к старейшему"
 open_post = "Открыть Пост"
@@ -108,6 +112,7 @@ comments = "التعليقات"
 comments_description = "يمكنك التعليق على منشور المدونة هذا عن طريق الرد علنًا على هذا المنشور باستخدام حساب Mastodon أو حساب آخر على ActivityPub/Fediverse. يتم عرض الردود المعروفة غير الخاصة أدناه."
 comments_loading = "التحميل"
 comments_noscript = "تحميل التعليقات يعتمد على JavaScript. حاول تمكين JavaScript وإعادة التحميل، أو قم بزيارة المنشور الأصلي على Mastodon."
+copy_code = "نسخ الرمز"
 disclaimer = "إخلاء المسؤولية"
 drafted = "مسودة"
 faves_from = "المفضلة من"
@@ -118,6 +123,7 @@ footer_powered_by = "مدعوم من"
 footer_powered_by_and = "و"
 footer_source = "مصدر الموقع الإلكتروني"
 go_to_top = "الانتقال إلى الأعلى"
+language = "اللغة"
 load_comments = "تحميل التعليقات"
 newest_to_oldest = "من الأحدث إلى الأقدم"
 open_post = "افتح المنشور"

sass/_hidden.scss

@@ -0,0 +1,9 @@
+.hidden:not(:focus):not(:active) {
+	clip: rect(0 0 0 0);
+	position: absolute;
+	clip-path: inset(100%);
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	white-space: nowrap;
+}

sass/_nav.scss

@@ -141,10 +141,6 @@
 						width: 1rem;
 						height: 1rem;
 					}
-
-					span {
-						display: none;
-					}
 				}
 
 				&#feed .icon {

sass/style.scss

@@ -17,6 +17,7 @@
 @use "external";
 @use "footer";
 @use "general";
+@use "hidden";
 @use "icon";
 @use "input";
 @use "media";

static/copy-button.js

@@ -1,37 +0,0 @@
-// Based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
-document.addEventListener("DOMContentLoaded", function () {
-    let blocks = document.querySelectorAll("pre[class^='language-']");
-
-    blocks.forEach((block) => {
-        if (navigator.clipboard) {
-            let container = document.createElement("div");
-            container.classList.add("pre-container");
-
-            block.parentNode.insertBefore(container, block);
-            container.appendChild(block);
-
-            let button = document.createElement("button");
-            let icon = document.createElement("i");
-            icon.classList.add("icon");
-            button.appendChild(icon);
-            container.appendChild(button);
-
-            button.addEventListener("click", async () => {
-                await copyCode(block, button);
-            });
-        }
-    });
-
-    async function copyCode(block, button) {
-        let code = block.querySelector("code");
-        let text = code.innerText;
-
-        await navigator.clipboard.writeText(text);
-
-        button.classList.add("active");
-
-        setTimeout(() => {
-            button.classList.remove("active");
-        }, 800);
-    }
-});

templates/partials/copy-button.html

@@ -0,0 +1,43 @@
+<script>
+	// Based on https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html
+	document.addEventListener("DOMContentLoaded", function () {
+		let blocks = document.querySelectorAll("pre[class^='language-']");
+
+		blocks.forEach((block) => {
+			if (navigator.clipboard) {
+				let container = document.createElement("div");
+				container.classList.add("pre-container");
+
+				block.parentNode.insertBefore(container, block);
+				container.appendChild(block);
+
+				let button = document.createElement("button");
+				let icon = document.createElement("i");
+				let span = document.createElement("span");
+				icon.classList.add("icon");
+				span.classList.add("hidden");
+				span.innerHTML = "{{ trans(key='copy_code', lang=lang) }}";
+				button.appendChild(icon);
+				button.appendChild(span);
+				container.appendChild(button);
+
+				button.addEventListener("click", async () => {
+					await copyCode(block, button);
+				});
+			}
+		});
+
+		async function copyCode(block, button) {
+			let code = block.querySelector("code");
+			let text = code.innerText;
+
+			await navigator.clipboard.writeText(text);
+
+			button.classList.add("active");
+
+			setTimeout(() => {
+				button.classList.remove("active");
+			}, 800);
+		}
+	});
+</script>

templates/partials/head.html

@@ -32,7 +32,7 @@
 	{% endif %}
 
 	{% if config.extra.show_copy_button %}
-		<script src="{{ get_url(path='copy-button.js') }}"></script>
+		{% include "partials/copy-button.html" %}
 	{% endif %}
 
 	{% if config.extra.scripts %}

templates/partials/nav.html

@@ -49,7 +49,7 @@
 					<details>
 						<summary>
 							<i class="icon"></i>
-							<span>Languages</span>
+							<span class="hidden">{{ trans(key="language", lang=lang) }}</span>
 						</summary>
 						<ul>
 							{% for language in config.extra.nav.langs %}
@@ -65,7 +65,7 @@
 				<li id="feed">
 					<a href="{{ get_url(path=config.feed_filename) }}">
 						<i class="icon"></i>
-						<span>{{ trans(key="feed", lang=lang) }}</span>
+						<span class="hidden">{{ trans(key="feed", lang=lang) }}</span>
 					</a>
 				</li>
 			{% endif %}