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)

diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html
index ddfa9adc0cb34552c90d73a1a2dabe10188e56bf..6c6416b7ce0aa254de01ba377e6e24c0a93ac3a0 100644 (file)
--- 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>