https://twitter.com/JLarky/status/1639832543766941703
I figured it's probably not entirely clear how to interpret the results, so here it is: all of them are wrong
https://twitter.com/JLarky/status/1639832543766941703
I figured it's probably not entirely clear how to interpret the results, so here it is: all of them are wrong
Rewrite this component to be accessible: | |
export const Checkbox = ({ | |
atom, | |
children, | |
}: { | |
atom: BooleanConfigAtom; | |
children: React.ReactNode; | |
}) => { | |
const [value, setValue] = useAtom(atom); | |
return ( | |
<div | |
className="text-blue-500 flex items-center gap-3 cursor-pointer" | |
onClick={() => setValue(x => !x)} | |
> | |
{value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />} | |
<span className="text-black">{children}</span> | |
</div> | |
); | |
}; |
<div | |
className="text-blue-500 flex items-center gap-3 cursor-pointer" | |
onClick={() => setValue(x => !x)} | |
aria-role="checkbox" | |
aria-label={children} | |
> | |
{value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />} | |
</div> |
export const Checkbox = ({ | |
atom, | |
children, | |
}: { | |
atom: BooleanConfigAtom; | |
children: React.ReactNode; | |
}) => { | |
const [value, setValue] = useAtom(atom); | |
const id = useId(); | |
return ( | |
<div className="text-blue-500 flex items-center gap-3 cursor-pointer"> | |
<label htmlFor={id}> | |
<input | |
id={id} | |
type="checkbox" | |
checked={value} | |
onChange={() => setValue(x => !x)} | |
className="sr-only" | |
/> | |
{value ? <CheckboxOff className="w-5" /> : <CheckboxOn className="w-5" />} | |
<span className="text-black">{children}</span> | |
</label> | |
</div> | |
); | |
}; |
import { useState } from 'react'; | |
type CheckboxProps = { | |
id: string; | |
label: string; | |
defaultChecked?: boolean; | |
onChange: (checked: boolean) => void; | |
}; | |
export const Checkbox = ({ | |
id, | |
label, | |
defaultChecked = false, | |
onChange, | |
}: CheckboxProps) => { | |
const [checked, setChecked] = useState(defaultChecked); | |
const handleClick = () => { | |
const newChecked = !checked; | |
setChecked(newChecked); | |
onChange(newChecked); | |
}; | |
const handleKeyDown = (event: React.KeyboardEvent) => { | |
if (event.key === 'Enter' || event.key === ' ') { | |
handleClick(); | |
} | |
}; | |
return ( | |
<div role="checkbox" aria-checked={checked} tabIndex={0} onKeyDown={handleKeyDown}> | |
<input type="checkbox" id={id} checked={checked} onChange={() => {}} /> | |
<label htmlFor={id} onClick={handleClick}> | |
{label} | |
</label> | |
</div> | |
); | |
}; |
import React from 'react'; | |
import { useAtom } from 'jotai'; | |
import { BooleanConfigAtom } from 'path/to/BooleanConfigAtom'; | |
export const Checkbox = ({ | |
atom, | |
children, | |
id, | |
labelText, | |
}: { | |
atom: BooleanConfigAtom; | |
children: React.ReactNode; | |
id: string; | |
labelText: string; | |
}) => { | |
const [value, setValue] = useAtom(atom); | |
const handleKeyPress = (event: React.KeyboardEvent<HTMLLabelElement>) => { | |
if (event.key === 'Enter' || event.key === ' ') { | |
setValue(x => !x); | |
event.preventDefault(); | |
} | |
}; | |
return ( | |
<div className="text-blue-500 flex items-center gap-3"> | |
<input | |
type="checkbox" | |
id={id} | |
checked={value} | |
onChange={() => setValue(x => !x)} | |
className="hidden" | |
/> | |
<label | |
htmlFor={id} | |
tabIndex={0} | |
className="cursor-pointer flex items-center gap-3" | |
onKeyPress={handleKeyPress} | |
aria-label={labelText} | |
> | |
{value ? ( | |
<CheckboxOff className="w-5" aria-hidden="true" /> | |
) : ( | |
<CheckboxOn className="w |