RadioGroup - Focus is applied on both keyboard and click

[JUNNNI]

Description

The RadioGroup component applies focus on both keyboard interaction and mouse clicks. While this behavior is standard and beneficial for accessibility, it might limit flexibility for certain use cases.`

In some scenarios, developers may want to differentiate between focus applied via keyboard and focus applied via mouse click. For example, preventing the focus ring from appearing when a radio button is selected with a mouse click while maintaining focus visibility for keyboard navigation. This differentiation is important for creating a more customized user experience and adhering to specific design requirements.

Suggestion:
It would be beneficial to provide a way to disable focus on mouse clicks while preserving keyboard accessibility. This could be achieved through an additional prop or configuration option that allows developers to customize focus behavior based on their needs.

<RadioGroup.Root disableFocusOnClick>
 ...
</RadioGroup.Root>

Link to Reproduction (or Detailed Explanation)

https://ark-ui.com/react/docs/components/radio-group

Steps to Reproduce

1. Create a component with

import { RadioGroup } from '@ark-ui/react'

export const Basic = () => {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <RadioGroup.Root>
      <RadioGroup.Label>Framework</RadioGroup.Label>
      <RadioGroup.Indicator />
      {frameworks.map((framework) => (
        <RadioGroup.Item key={framework} value={framework}>
          <RadioGroup.ItemText>{framework}</RadioGroup.ItemText>
          <RadioGroup.ItemControl />
          <RadioGroup.ItemHiddenInput />
        </RadioGroup.Item>
      ))}
    </RadioGroup.Root>
  )
}

2. Implement focus styling, with for example a recipe with PandaCSS and add a _focus on itemControl.
   Observe the focus being apply on both click and keyboard.

Ark UI Version

3.6.2

Framework

• React
• Solid
• Vue

Browser

Google Chrome

Thanks for your help 😃