From: Danilo M. <redacted>
Date: Fri, 17 Apr 2026 07:26:26 +0000 (+0200)
Subject: feat: ensure i18n-based aria-labels on all icon-only buttons
X-Git-Tag: release_22042026-1342~172
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=beeddeeeac2189bdc1c6c3b19cfac14717531bf5;p=danix.xyz-2.git

feat: ensure i18n-based aria-labels on all icon-only buttons

Standardize aria-labels across form-components, hamburger-menu, and header
partials to use i18n keys for multilingual support. Modal close buttons now
consistently use the 'closeMenu' i18n key across all three modals, matching
the accessibility pattern used for menu and theme toggle buttons.

- form-components.html: Update modal close buttons (alert, confirm, content)
- hamburger-menu.html: Already has aria-label with i18n
- header.html: Theme toggle and hamburger menu already have aria-labels

Co-Authored-By: Claude Haiku 4.5 <redacted>
---

diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html
index d38973a..ddfa9ad 100644
--- a/themes/danix-xyz-hacker/layouts/partials/form-components.html
+++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html
@@ -157,7 +157,7 @@
   <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
     <div class="modal-header">
       <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
-      <div class="modal-close" @click="showAlertModal = false" aria-label="Close modal"></div>
+      <div class="modal-close" @click="showAlertModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
     </div>
     <div class="modal-body">
       <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
@@ -177,7 +177,7 @@
   <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
     <div class="modal-header">
       <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
-      <div class="modal-close" @click="showConfirmModal = false" aria-label="Close modal"></div>
+      <div class="modal-close" @click="showConfirmModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
     </div>
     <div class="modal-body">
       <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
@@ -198,7 +198,7 @@
   <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
     <div class="modal-header">
       <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
-      <div class="modal-close" @click="showContentModal = false" aria-label="Close modal"></div>
+      <div class="modal-close" @click="showContentModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
     </div>
     <div class="modal-body">
       <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>