for aria

actifyjs · Nov 12, 2024 · 526bfb4 · 526bfb4
1 parent cef9af8
commit 526bfb4
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 12 deletions.
diff --git a/apps/docs/content/components/label.md b/apps/docs/content/components/label.md
@@ -5,10 +5,9 @@ description: Use original html label tag, but prevented text selection when doub
 
 ## Usage with Checkbox
 
-<preview code='<Label className="flex items-center">with checkbox <Checkbox /></Label>'></preview>
+<preview code='<Label className="flex items-center">with checkbox <Checkbox aria-label="with checkbox" /></Label>'></preview>
 
 ## Usage with Raido
 
-<preview code='<Label className="flex items-center gap-4">with radio
-<RadioGroup><Radio value="actify" /></RadioGroup></Label>'>
+<preview code='<RadioGroup label="with radio"><Radio value="actify">actify</Radio></RadioGroup>'>
 </preview>
diff --git a/apps/docs/src/usages/badges.tsx b/apps/docs/src/usages/badges.tsx
@@ -6,6 +6,10 @@ export default () => {
   const color = 'error'
   const [value, setValue] = useState(99)
 
+  const handleChange = (value: number | number[]) => {
+    setValue(value as number)
+  }
+
   return (
     <>
       <div className="flex gap-8">
@@ -23,8 +27,8 @@ export default () => {
           labeled
           value={value}
           maxValue={999}
-          // @ts-ignore
-          onChange={setValue}
+          aria-label="badge"
+          onChange={handleChange}
         />
       </div>
     </>

diff --git a/apps/docs/src/usages/progress/circular-progress.tsx b/apps/docs/src/usages/progress/circular-progress.tsx
@@ -3,9 +3,13 @@ import { CircularProgress, Label, Slider, Switch } from 'actify'
 import { useState } from 'react'
 
 export default () => {
-  const [value, setValue] = useState(50)
+  const [value, setValue] = useState<number>(50)
   const [indeterminate, setIndeterminate] = useState(true)
 
+  const handleChange = (value: number | number[]) => {
+    setValue(value as number)
+  }
+
   return (
     <div className="flex flex-col gap-4">
       <CircularProgress indeterminate={indeterminate} value={value} />
@@ -14,6 +18,7 @@ export default () => {
         <Switch
           icons
           color="primary"
+          aria-label="indeterminate"
           isSelected={indeterminate}
           onChange={setIndeterminate}
         />
@@ -23,8 +28,8 @@ export default () => {
         <Slider
           labeled
           value={value}
-          // @ts-ignore
-          onChange={setValue}
+          aria-label="circular progress"
+          onChange={handleChange}
         />
       </Label>
     </div>

diff --git a/apps/docs/src/usages/progress/linear-progress.tsx b/apps/docs/src/usages/progress/linear-progress.tsx
@@ -6,6 +6,10 @@ export default () => {
   const [value, setValue] = useState(50)
   const [indeterminate, setIndeterminate] = useState(true)
 
+  const handleChange = (value: number | number[]) => {
+    setValue(value as number)
+  }
+
   return (
     <div className="flex flex-col gap-4">
       <LinearProgress indeterminate={indeterminate} value={value} />
@@ -15,6 +19,7 @@ export default () => {
         <Switch
           icons
           color="primary"
+          aria-label="indeterminate"
           isSelected={indeterminate}
           onChange={setIndeterminate}
         />
@@ -24,8 +29,8 @@ export default () => {
         <Slider
           labeled
           value={value}
-          // @ts-ignore
-          onChange={setValue}
+          aria-label="linear progress"
+          onChange={handleChange}
         />
       </Label>
     </div>

diff --git a/packages/actify/src/components/Sliders/Slider.tsx b/packages/actify/src/components/Sliders/Slider.tsx
@@ -7,12 +7,12 @@ import clsx from 'clsx'
 import styles from './slider.module.css'
 import { useSliderState } from 'react-stately'
 
-type SliderProps = {
+interface SliderProps extends AriaSliderProps {
   labeled?: boolean
   className?: string
   formatOptions?: Record<string, string>
   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
-} & AriaSliderProps
+}
 
 const Slider = (props: SliderProps) => {
   const { labeled, minValue = 0, maxValue = 100 } = props