feat: verify semantic HTML - replace div with button in toast-close

Replace div element with actual button element for toast notification close
control. Adds type='button' and aria-label for accessibility. Maintains all
Alpine.js functionality via @click handler.

WCAG 2.1 AA compliance: 1.3.1 Info and Relationships

diff --git a/themes/danix-xyz-hacker/layouts/partials/toast-container.html b/themes/danix-xyz-hacker/layouts/partials/toast-container.html
index 1c5fbf244f64e821f71b0596ec1c1ca5342810f7..7bbd3c0c45032cfbc2f025d17a9c580af58fb4a2 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/partials/toast-container.html
+++ b/themes/danix-xyz-hacker/layouts/partials/toast-container.html
@@ -5,7 +5,7 @@
   <template x-for="toast in toasts" :key="toast.id">
     <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0">
       <span x-text="toast.message"></span>
-      <div class="toast-close" @click="removeToast(toast.id)"></div>
+      <button class="toast-close" @click="removeToast(toast.id)" type="button" aria-label="Close notification"></button>
     </div>
   </template>
 </div>