fix(a11y): batch 4 — drop duplicate h1 + add missing form labels (#190)

Co-authored-by: Michael Czechowski <mail@dailysh.it>
Co-committed-by: Michael Czechowski <mail@dailysh.it>

Author: nextlevelshit

src/i18n.js

@@ -165,6 +165,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "Want to know when new features launch?",
 		newsletterPlaceholder: "your@email.com",
+		newsletterEmailLabel: "Email address for newsletter",
 		newsletterButton: "Notify Me",
 		newsletterThanks: "Thanks! We'll keep you posted.",
 		newsletterDisclaimer: "Max once a week. Unsubscribe anytime — see Imprint for contact.",
@@ -399,6 +400,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "Möchtest du erfahren, wenn neue Funktionen erscheinen?",
 		newsletterPlaceholder: "deine@email.de",
+		newsletterEmailLabel: "E-Mail-Adresse für Newsletter",
 		newsletterButton: "Benachrichtigen",
 		newsletterThanks: "Danke! Wir halten dich auf dem Laufenden.",
 		newsletterDisclaimer: "Max. einmal pro Woche. Abmelden jederzeit — Kontakt im Impressum.",
@@ -629,6 +631,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "Chcesz wiedzieć, kiedy pojawią się nowe funkcje?",
 		newsletterPlaceholder: "twoj@email.pl",
+		newsletterEmailLabel: "Adres e-mail do newslettera",
 		newsletterButton: "Powiadom mnie",
 		newsletterThanks: "Dzięki! Będziemy informować.",
 		newsletterDisclaimer: "Maks. raz w tygodniu. Wypisz się w dowolnym momencie — kontakt w Stopce redakcyjnej.",
@@ -861,6 +864,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "¿Quieres saber cuando se lancen nuevas funciones?",
 		newsletterPlaceholder: "tu@email.com",
+		newsletterEmailLabel: "Dirección de correo para el boletín",
 		newsletterButton: "Notificarme",
 		newsletterThanks: "¡Gracias! Te mantendremos informado.",
 		newsletterDisclaimer: "Máximo una vez por semana. Cancela cuando quieras — contacto en el Aviso legal.",
@@ -1088,6 +1092,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "هل تريد معرفة متى تُطلق ميزات جديدة؟",
 		newsletterPlaceholder: "بريدك@email.com",
+		newsletterEmailLabel: "عنوان البريد الإلكتروني للنشرة",
 		newsletterButton: "أبلغني",
 		newsletterThanks: "شكراً! سنبقيك على اطلاع.",
 		newsletterDisclaimer: "مرة واحدة أسبوعياً كحد أقصى. إلغاء الاشتراك في أي وقت — جهة الاتصال في بيان الناشر.",
@@ -1317,6 +1322,7 @@ const translations = {
 		// Newsletter
 		newsletterText: "Хочете дізнатися, коли з'являться нові функції?",
 		newsletterPlaceholder: "ваш@email.com",
+		newsletterEmailLabel: "Email-адреса для розсилки",
 		newsletterButton: "Повідомити мене",
 		newsletterThanks: "Дякуємо! Ми будемо тримати вас в курсі.",
 		newsletterDisclaimer: "Максимум раз на тиждень. Відписатися можна будь-коли — контакт у вихідних даних.",

src/index.html

@@ -121,9 +121,9 @@
 					</button>
 					<a href="#" class="header-level-pill" id="header-level-pill"></a>
 				</div>
-				<a href="#" id="logo-link" class="logo">
-					<img src="/bowl.png" width="40" alt="CODE CRISPIES Logo" decoding="async" />
-					<h1><span class="code-text">CODE</span><span class="crispies-text">CRISPIES</span></h1>
+				<a href="#" id="logo-link" class="logo" aria-label="Code Crispies — home">
+					<img src="/bowl.png" width="40" alt="" decoding="async" />
+					<p class="logo-text"><span class="code-text">CODE</span><span class="crispies-text">CRISPIES</span></p>
 				</a>
 				<div class="header-actions">
 					<nav class="main-nav" id="main-nav" aria-label="Main sections">
@@ -281,7 +281,8 @@ <h3 data-i18n="comingSoonChallengesTitle">Code Challenges</h3>
 						<div class="newsletter-signup">
 							<p data-i18n="newsletterText">Want to know when new features launch?</p>
 							<form id="newsletter-form" class="newsletter-form">
-								<input type="email" id="newsletter-email" required data-i18n-placeholder="newsletterPlaceholder" placeholder="your@email.com">
+								<label for="newsletter-email" class="visually-hidden" data-i18n="newsletterEmailLabel">Email address for newsletter</label>
+							<input type="email" id="newsletter-email" required data-i18n-placeholder="newsletterPlaceholder" placeholder="your@email.com">
 								<button type="submit" class="btn btn-outline" data-i18n="newsletterButton">Notify Me</button>
 							</form>
 							<p class="newsletter-disclaimer" data-i18n="newsletterDisclaimer">Max once a week. Unsubscribe anytime — see Imprint for contact.</p>
@@ -840,7 +841,7 @@ <h3 data-i18n="shareDialogTitle">Share Lesson</h3>
 				<div class="dialog-content">
 					<p id="share-lesson-label" class="share-lesson-label"></p>
 					<div class="share-url-container">
-						<input type="text" id="share-url-input" class="share-url-input" readonly />
+						<input type="text" id="share-url-input" class="share-url-input" readonly aria-label="Lesson share URL" />
 						<button id="copy-url-btn" class="btn btn-primary" data-i18n="copyUrl">Copy</button>
 					</div>
 					<p id="copy-feedback" class="copy-feedback" role="status" aria-live="polite" data-i18n="urlCopied" hidden>URL copied to clipboard!</p>

src/main.css

@@ -354,21 +354,36 @@ kbd {
 	cursor: pointer;
 }
 
-.logo h1 {
+.logo .logo-text {
 	font-size: 1rem;
 	font-weight: 800;
 	color: var(--text-color);
 	line-height: 1;
 	display: flex;
 	align-items: center;
 	gap: 0.15rem;
+	margin: 0;
+}
+
+/* Visually-hidden labels — invisible to sighted users, exposed to screen
+   readers. Used for inputs that have a placeholder but no visible label. */
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
 }
 
-.logo h1 .code-text {
+.logo .logo-text .code-text {
 	color: #9163b8;
 }
 
-.logo h1 .crispies-text {
+.logo .logo-text .crispies-text {
 	background: #9163b8;
 	color: white;
 	padding: 0.15rem 0.35rem;
@@ -3550,7 +3565,7 @@ input:checked + .toggle-slider::before {
 }
 
 @media (max-width: 480px) {
-	.logo h1 {
+	.logo .logo-text {
 		font-size: 0.9rem;
 	}