fix: Extra Checkbox and Radio focus events

[snowystinger]

Closes #8045

If a checkbox or radio is already focused, pressing on the element a second time will call onBlur (since it is technically the label getting pressed, not the actual input).

Because focus happens in mousedown, we can prevent default to stop focus from going to the label, this doesn't interfere with focus moving to the input itself which happens in click.

✅ 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:

Test by going to RAC's checkbox/radio stories with focus/blur actions. Click the label for the component multiple times, you should only see one set of events

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[devongovett]

?

[devongovett]

Can you write a description of the issue and how this solves it?

[LFDanLu]

I guess this is fine but it technically deviates from native behavior if the label was rendered in such a way that it didn't wrap the input (aka in that case a blur on the input happens every time the label is clicked).

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[snowystinger]

I guess this is fine but it technically deviates from native behavior if the label was rendered in such a way that it didn't wrap the input (aka in that case a blur on the input happens every time the label is clicked).

@LFDanLu I'm not sure I follow. I've provided a useCheckbox story with a separate label and input. Let me know if you're expecting something else for the behaviour.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[LFDanLu]

@snowystinger right, so at the moment clicking on the label in the story you added won't trigger extra blur events due to the preventDefault you've added. However, contrast this to https://codepen.io/lfdanlu/pen/yyYVadZ?editors=1111 where it will fire blur events on the input when you repeatedly click on the label. Just wanted to highlight the difference from native in this specific case where the checkbox isn't actually wrapped/covered by the label.

again, this is probably fine IMO

[snowystinger]

I see, but that behaviour doesn't change whether or not the label is separate or wrapping.
So I think in terms of our component, this is the preferred behaviour