Fix: Prevent Checkbox and Radio from unexpectedly calling onBlur when focus moves within the component

[uniqueeest]

Closes #8045

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

• Verify that Checkbox and Radio now correctly trigger onBlur and onFocus only when focus moves in/out of the component, not when moving internally between label and input.
• Use keyboard (Tab) and mouse (click) to test focus and blur behavior:
  • onBlur should not be called when clicking from <label> to internal <input>.
  • onBlur should be called when focus leaves the component.
• Confirm that all relevant tests pass:
  • should support focus ring
  • should support focus events
  • should not call onBlur when focus stays within label
  • should call onBlur when focus leaves the label

🧢 Your Project:

[uniqueeest]

@snowystinger How do I pass that test? A few tests fail because of the focus on the label.

[snowystinger]

This is returning a tabIndex, making it focusable, as the name suggests. Any reason you've chosen useFocusable over useFocusWithin? https://react-spectrum.adobe.com/react-aria/useFocusWithin.html

[uniqueeest]

@snowystinger 8274341 Test case fails even after changing to focusWithin, is changing tabIndex the wrong approach?

[snowystinger]

well, it's best to start with the goal, if the goal isn't to make the label focusable, then useFocusable isn't the right approach because you'd need to override part of its functionality.

Now that you're using a more appropriate hook, you can see that it's failing because focus isn't making it to the input. Since you know you haven't changed the tabIndex anymore, you can look more at the new hook and what it returns vs what you're adding as props on the label.

your new onFocus/onBlur are going to be in conflict with the properties returned by useFocusWithin. Instead of overwriting, use the properties that are passed to the hook in order to handle focus/blur.

[snowystinger]

Had a thought, focus occurs on mousedown, so i can prevent default for that event on the label, and it should affect focus being directed to the input
Closing this in favour of #8567

Thank you for the tests btw!