From 43add27732623b417223ef05a9e5f758040e5b34 Mon Sep 17 00:00:00 2001
From: Alexander Schmidt <alexander@schmidt.eco>
Date: Thu, 5 Feb 2026 15:21:28 +0100
Subject: [PATCH] refactor: replace hardcoded aria-labels with i18n keys, add
 common.close/remove/home

---
 js/components/app-header.js         | 2 +-
 js/components/auth-modal.js         | 2 +-
 js/components/error-boundary.js     | 6 +++---
 js/components/image-cropper.js      | 2 +-
 js/components/pages/page-create.js  | 2 +-
 js/components/pages/page-listing.js | 2 +-
 locales/de.json                     | 5 ++++-
 locales/en.json                     | 5 ++++-
 locales/fr.json                     | 5 ++++-
 9 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/js/components/app-header.js b/js/components/app-header.js
index cbee66a..4026f3d 100644
--- a/js/components/app-header.js
+++ b/js/components/app-header.js
@@ -107,7 +107,7 @@ class AppHeader extends HTMLElement {
     render() {
         this.innerHTML = /* html */`
             <div class="header-inner container">
-                <a href="#/" class="logo" aria-label="dgray.io Home">
+                <a href="#/" class="logo" aria-label="dgray.io ${t('common.home')}">
                     <img src="assets/logo-light.svg" alt="dgray.io" class="logo-img logo-light" width="100" height="28">
                     <img src="assets/logo-dark.svg" alt="dgray.io" class="logo-img logo-dark" width="100" height="28">
                 </a>
diff --git a/js/components/auth-modal.js b/js/components/auth-modal.js
index 31eccab..6eddabf 100644
--- a/js/components/auth-modal.js
+++ b/js/components/auth-modal.js
@@ -63,7 +63,7 @@ class AuthModal extends HTMLElement {
         this.innerHTML = /* html */`
             <div class="modal-overlay" id="modal-overlay">
                 <div class="modal-content">
-                    <button class="modal-close" id="modal-close" aria-label="Close">
+                    <button class="modal-close" id="modal-close" aria-label="${t('common.close')}">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <line x1="18" y1="6" x2="6" y2="18"></line>
                             <line x1="6" y1="6" x2="18" y2="18"></line>
diff --git a/js/components/error-boundary.js b/js/components/error-boundary.js
index ca2f3f5..5b33c13 100644
--- a/js/components/error-boundary.js
+++ b/js/components/error-boundary.js
@@ -37,10 +37,10 @@ class ErrorBoundary extends HTMLElement {
         this.innerHTML = /* html */`
             <div class="error-boundary">
                 <div class="error-icon">⚠️</div>
-                <h3 class="error-title">${t('error.title') || 'Etwas ist schiefgelaufen'}</h3>
+                <h3 class="error-title">${t('error.title')}</h3>
                 <p class="error-message">${escapeHTML(errorMessage)}</p>
                 <button class="btn btn-primary error-retry" type="button">
-                    ${t('error.retry') || 'Erneut versuchen'}
+                    ${t('error.retry')}
                 </button>
             </div>
         `
@@ -131,7 +131,7 @@ function showErrorToast(message) {
     toast.innerHTML = /* html */`
         <span class="error-toast-icon">⚠️</span>
         <span class="error-toast-message">${escapeHTML(message)}</span>
-        <button class="error-toast-close" aria-label="Schließen">×</button>
+        <button class="error-toast-close" aria-label="${t('common.close')}">×</button>
     `
 
     document.body.appendChild(toast)
diff --git a/js/components/image-cropper.js b/js/components/image-cropper.js
index 75b7de0..70c5c37 100644
--- a/js/components/image-cropper.js
+++ b/js/components/image-cropper.js
@@ -53,7 +53,7 @@ class ImageCropper extends HTMLElement {
                 <div class="cropper-modal">
                     <div class="cropper-header">
                         <h3>${t('cropper.title')}</h3>
-                        <button type="button" class="cropper-close" id="cropper-close" aria-label="Close">
+                        <button type="button" class="cropper-close" id="cropper-close" aria-label="${t('common.close')}">
                             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                 <line x1="18" y1="6" x2="6" y2="18"></line>
                                 <line x1="6" y1="6" x2="18" y2="18"></line>
diff --git a/js/components/pages/page-create.js b/js/components/pages/page-create.js
index 01dad27..fcf9388 100644
--- a/js/components/pages/page-create.js
+++ b/js/components/pages/page-create.js
@@ -493,7 +493,7 @@ class PageCreate extends HTMLElement {
         return this.imagePreviews.map((src, index) => /* html */`
             <div class="image-preview">
                 <img src="${src}" alt="Preview ${index + 1}">
-                <button type="button" class="remove-image" data-index="${index}" aria-label="Remove">
+                <button type="button" class="remove-image" data-index="${index}" aria-label="${t('common.remove')}">
                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <line x1="18" y1="6" x2="6" y2="18"></line>
                         <line x1="6" y1="6" x2="18" y2="18"></line>
diff --git a/js/components/pages/page-listing.js b/js/components/pages/page-listing.js
index 18c4cdc..22dd3c9 100644
--- a/js/components/pages/page-listing.js
+++ b/js/components/pages/page-listing.js
@@ -355,7 +355,7 @@ class PageListing extends HTMLElement {
     renderContactDialog() {
         return /* html */`
             <dialog class="contact-dialog" id="contact-dialog">
-                <button class="dialog-close" id="dialog-close" aria-label="Close">
+                <button class="dialog-close" id="dialog-close" aria-label="${t('common.close')}">
                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <line x1="18" y1="6" x2="6" y2="18"></line>
                         <line x1="6" y1="6" x2="18" y2="18"></line>
diff --git a/locales/de.json b/locales/de.json
index 5a1bfa8..4651ff7 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -30,7 +30,10 @@
   },
   "common": {
     "loading": "Laden...",
-    "error": "Fehler beim Laden"
+    "error": "Fehler beim Laden",
+    "close": "Schließen",
+    "remove": "Entfernen",
+    "home": "Startseite"
   },
   "error": {
     "title": "Etwas ist schiefgelaufen",
diff --git a/locales/en.json b/locales/en.json
index 19e2ce4..ce5ac31 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -30,7 +30,10 @@
   },
   "common": {
     "loading": "Loading...",
-    "error": "Error loading"
+    "error": "Error loading",
+    "close": "Close",
+    "remove": "Remove",
+    "home": "Home"
   },
   "error": {
     "title": "Something went wrong",
diff --git a/locales/fr.json b/locales/fr.json
index b5be7a7..dbb246f 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -30,7 +30,10 @@
   },
   "common": {
     "loading": "Chargement...",
-    "error": "Erreur de chargement"
+    "error": "Erreur de chargement",
+    "close": "Fermer",
+    "remove": "Supprimer",
+    "home": "Accueil"
   },
   "error": {
     "title": "Une erreur est survenue",