message: fix: a11y issue when a different element is used instead of label
diff: @@ -7,6 +7,7 @@ import {
  import {
  callAllHandlers,
  dataAttr,
  + focus,
  mergeRefs,
  PropGetter,
  warn,
  @@ -138,7 +139,8 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
  const [isHovered, setHovered] = useBoolean()
  const [isActive, setActive] = useBoolean()
  - const ref = useRef<HTMLInputElement>(null)
  + const inputRef = useRef<HTMLInputElement>(null)
  + const [rootIsLabelElement, setRootIsLabelElement] = useState(true)
  const [checkedState, setCheckedState] = useState(!!defaultChecked)
  @@ -182,8 +184,8 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
  )
  useSafeLayoutEffect(() => {
  - if (ref.current) {
  - ref.current.indeterminate = Boolean(isIndeterminate)
  + if (inputRef.current) {
  + inputRef.current.indeterminate = Boolean(isIndeterminate)
  }
  }, [isIndeterminate])
  @@ -219,12 +221,12 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
  * Let's correct that by checking and syncing the state accordingly.
  */
  useSafeLayoutEffect(() => {
  - if (!ref.current) return
  - const notInSync = ref.current.checked !== isChecked
  + if (!inputRef.current) return
  + const notInSync = inputRef.current.checked !== isChecked
  if (notInSync) {
  - setCheckedState(ref.current.checked)
  + setCheckedState(inputRef.current.checked)
  }
  - }, [ref.current])
  + }, [inputRef.current])
  const getCheckboxProps: PropGetter = useCallback(
  (props = {}, forwardedRef = null) => {
  @@ -272,17 +274,36 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
  (props = {}, forwardedRef = null) => ({
  ...htmlProps,
  ...props,
  - ref: forwardedRef,
  + ref: mergeRefs(forwardedRef, (node: HTMLElement) => {
  + if (!node) return
  + setRootIsLabelElement(node.tagName === "LABEL")
  + }),
  + onClick: callAllHandlers(props.onClick, () => {
  + /**
  + * Accessibility:
  + *
  + * Ideally, `getRootProps` should be spread unto a `label` element.
  + *
  + * If the element was changed using the `as` prop or changing
  + * the dom node `getRootProps` is spread unto (to a `div` or `span`), we'll trigger
  + * click on the input when the element is clicked.
  + * @see Issue https://github.com/chakra-ui/chakra-ui/issues/3480
  + */
  + if (!rootIsLabelElement) {
  + inputRef.current?.click()
  + focus(inputRef.current, { nextTick: true })
  + }
  + }),
  "data-disabled": dataAttr(isDisabled),
  }),
  - [htmlProps, isDisabled],
  + [htmlProps, isDisabled, rootIsLabelElement],
  )
  const getInputProps: PropGetter = useCallback(
  (props = {}, forwardedRef = null) => {
  return {
  ...props,
  - ref: mergeRefs(ref, forwardedRef),
  + ref: mergeRefs(inputRef, forwardedRef),
  type: "checkbox",
  name,
  value,
  