From 5af19fd8105836c85eceffcd5aadc5775c12bccd Mon Sep 17 00:00:00 2001
From: "Phongit Khanthawisood (Tonnam)" <phongit.ton@gmail.com>
Date: Sun, 13 Oct 2024 23:02:21 +0700
Subject: [PATCH] style(v2): update `aria-label` for accessibility of checkbox

---
 .../checkbox/checkbox.stories.svelte          | 39 +++++++++++++++++--
 .../src/components/checkbox/checkbox.svelte   |  2 +-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/checkbox/checkbox.stories.svelte b/packages/ui/src/components/checkbox/checkbox.stories.svelte
index 84089791f..c5a8df143 100644
--- a/packages/ui/src/components/checkbox/checkbox.stories.svelte
+++ b/packages/ui/src/components/checkbox/checkbox.stories.svelte
@@ -19,6 +19,11 @@
       onClick: {
         action: 'onClick',
       },
+      'aria-label': {
+        control: 'text',
+        description:
+          'attribute defines a string value that labels an interactive element',
+      },
     },
   } satisfies Meta<Checkbox>
 </script>
@@ -34,13 +39,39 @@
 </Template>
 
 <!-- 👇 Each story then reuses that template -->
-<Story name="Unchecked" args="{{ checked: false, label: 'Accept Terms' }}" />
+<Story
+  name="Unchecked"
+  args="{{
+    checked: false,
+    label: 'Accept Terms',
+    'aria-label': 'for accept terms',
+  }}"
+/>
 
-<Story name="Checked" args="{{ checked: true, label: 'Accept Terms' }}" />
+<Story
+  name="Checked"
+  args="{{
+    checked: true,
+    label: 'Accept Terms',
+    'aria-label': 'for accept terms',
+  }}"
+/>
 
-<Story name="Unchecked Without Label" args="{{ checked: false }}" />
+<Story
+  name="Unchecked Without Label"
+  args="{{
+    checked: false,
+    'aria-label': 'for example of unchecked checkbox without label',
+  }}"
+/>
 
-<Story name="Checked Without Label" args="{{ checked: true }}" />
+<Story
+  name="Checked Without Label"
+  args="{{
+    checked: true,
+    'aria-label': 'for example of checkbox without label',
+  }}"
+/>
 
 <Story
   name="Disabled Checkbox"
diff --git a/packages/ui/src/components/checkbox/checkbox.svelte b/packages/ui/src/components/checkbox/checkbox.svelte
index 9e37098e7..425acb0be 100644
--- a/packages/ui/src/components/checkbox/checkbox.svelte
+++ b/packages/ui/src/components/checkbox/checkbox.svelte
@@ -15,7 +15,7 @@
   export { className as class }
 </script>
 
-<div let:label class="flex items-center space-x-2 p-1">
+<div class="flex items-center space-x-2 p-1">
   <CheckboxPrimitive.Root
     class="{cn(
       'border-on-surface-placeholder ring-offset-background focus-visible:ring-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-neutral-white peer box-content h-4 w-4 shrink-0 rounded-sm border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',