style(v2): update aria-label for accessibility of checkbox

thinc-org · Oct 13, 2024 · 5af19fd · 5af19fd
1 parent 951b6e1
commit 5af19fd
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git 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
@@ -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',