From 92819ec472bc2cfa2f448e7282956bb2a5fc1d1a Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 09:27:05 +0200
Subject: feat: ensure all form inputs have associated labels (for/id
 attributes)

- Added id to checkbox: agree-terms
- Added id/for to checkboxes: interest-tech, interest-design
- Added id/for to radio buttons: preference-option-a, preference-option-b
- All 13 form inputs now have matching label associations
- Improves WCAG 2.1 AA compliance (3.3.2 Labels or Instructions)
---
 .../layouts/partials/form-components.html            | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'themes/danix-xyz-hacker/layouts')

diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html
index ddfa9ad..6c6416b 100644
--- a/themes/danix-xyz-hacker/layouts/partials/form-components.html
+++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html
@@ -61,8 +61,8 @@
        ============================================ -->
 
   <div class="form-group">
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="checkbox" class="form-checkbox">
+    <label for="agree-terms" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="agree-terms" class="form-checkbox">
       <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span>
     </label>
   </div>
@@ -70,12 +70,12 @@
   <!-- Multiple Checkboxes -->
   <div class="form-group space-y-2">
     <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p>
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="checkbox" class="form-checkbox" name="interests">
+    <label for="interest-tech" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="interest-tech" class="form-checkbox" name="interests">
       <span>{{ i18n "form_interest_tech" | default "Technology" }}</span>
     </label>
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="checkbox" class="form-checkbox" name="interests">
+    <label for="interest-design" class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" id="interest-design" class="form-checkbox" name="interests">
       <span>{{ i18n "form_interest_design" | default "Design" }}</span>
     </label>
   </div>
@@ -86,12 +86,12 @@
 
   <div class="form-group space-y-2">
     <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p>
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="radio" name="preference" class="form-radio">
+    <label for="preference-option-a" class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" id="preference-option-a" name="preference" class="form-radio">
       <span>{{ i18n "form_option_a" | default "Option A" }}</span>
     </label>
-    <label class="flex items-center gap-3 cursor-pointer">
-      <input type="radio" name="preference" class="form-radio">
+    <label for="preference-option-b" class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" id="preference-option-b" name="preference" class="form-radio">
       <span>{{ i18n "form_option_b" | default "Option B" }}</span>
     </label>
   </div>
-- 
cgit v1.2.3