useCheckbox Hook does not provide keyboard accessibility

[benmcginnis]

It looks like the example custom checkbox does not work on the chakra docs for the useCheckbox hook: https://chakra-ui.com/docs/hooks/use-checkbox as you can see in this loom video: https://www.loom.com/share/6883977835f545ab9b9209168363f86b?sid=a035d499-8fd5-4967-be24-d9e98caa321e

Originally posted by @benmcginnis in #3491 (comment)

[benmcginnis]

It also doesn't appear to support a focus state out of the box

[veloware]

I noticed the same recently with useRadio hook, I had to manually add tabIndex={0} and also handle the onClick and onMouseDown handlers

[erpatterson11]

I was able to restore keyboard accessibility by removing the hidden attribute on the input element (worked for useRadio() too). Not sure why this is in the docs.

You can set the focus state by adding _focusWithin={{ boxShadow: "outline" }} on the label.

[KubaZachacz]

Yup, keyboard control is not working on Chakra docs for useRadioGroup and checkbox.
As said above you need to remove that hidden attribute from input, but you can also apply _focusVisible prop to that element which gets getRadioProps().

<chakra.label
      {...htmlProps}
      cursor="pointer"
      w="full"
      overflow="hidden"
      {...getLabelProps()}
    >
      <input {...getInputProps({})} />
      <Box
        {...getRadioProps()}
        w={'full'}
        _focusVisible={{
          boxShadow: 'outline',
        }}
      >
      ...
     </Box>
</chakra.label>

[Aa37573112]

2024年3月23日 下午7:03:13 [GMT+08:00]，Jakub Zachacz ***@***.***> 寫道：

…

Yup, keyboard control is not working on Chakra docs for useRadioGroup and checkbox. As said above you need to remove that `hidden` attribute from input, but you can also apply `_focusVisible` prop to that element which gets `getRadioProps()`. ` <chakra.label {...htmlProps} cursor="pointer" w="full" overflow="hidden" {...getLabelProps()} > <input {...getInputProps({})} /> <Box {...getRadioProps()} w={'full'} _focusVisible={{ boxShadow: 'outline', }} >` -- Reply to this email directly or view it on GitHub: #8358 (comment) You are receiving this because you are subscribed to this thread. Message ID: ***@***.***>