]> danix's work - danix.xyz-2.git/commitdiff
feat: ensure i18n-based aria-labels on all icon-only buttons
authorDanilo M. <redacted>
Fri, 17 Apr 2026 07:26:26 +0000 (09:26 +0200)
committerDanilo M. <redacted>
Fri, 17 Apr 2026 07:26:26 +0000 (09:26 +0200)
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>
themes/danix-xyz-hacker/layouts/partials/form-components.html

index d38973a3fef40424207faac259872922b544901d..ddfa9adc0cb34552c90d73a1a2dabe10188e56bf 100644 (file)
   <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>
   <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>
   <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>