fix: Making the hidden input on Radio only cover the indicator and not also the label

[khmakoto]

Current Behavior

The hidden input in the Radio component covers both the indicator and the label, making any interactive elements within the label, like links, impossible to be clicked.

We also noticed that when hovering over the label of disabled Switches, it still showed cursor: pointer styles.

Input

Label

New Behavior

The hidden input in the Radio component now covers only the indicator and its surrounding space, not the label. This makes any interactive elements within the label, like links, possible to be clicked. We verified that clicking on the label still toggles the state of the component. We also expanded the size of the label so it covers the empty space around it that was previously being covered by the hidden input.

Hovering over the label of disabled Switches now shows cursor: default instead of cursor: pointer.

Input

Label

Related Issue(s)

Fixes #25021

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-radio Radio	35.769 kB 11.943 kB	36.39 kB 12.103 kB	621 B 160 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	189.156 kB 52.385 kB
react-components react-components: FluentProvider & webLightTheme	33.4 kB 11.008 kB
react-portal-compat PortalCompatProvider	5.857 kB 1.978 kB
react-radio RadioGroup	14.248 kB 5.7 kB

_{🤖 This report was generated against 259506702ec479f4fd9d7b848061dcae1354e168}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d7708a2:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 259506702ec479f4fd9d7b848061dcae1354e168 (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1307	1333	5000
Button	mount	956	954	5000
FluentProvider	mount	1574	1593	5000
FluentProviderWithTheme	mount	640	644	10
FluentProviderWithTheme	virtual-rerender	591	594	10
FluentProviderWithTheme	virtual-rerender-with-unmount	631	636	10
MakeStyles	mount	1743	1896	50000
SpinButton	mount	2436	2512	5000

[behowell]

I think you'd also need to add the pointer cursor to the label right?

    ':enabled': {
      cursor: 'pointer',
+      [`& ~ .${radioClassNames.label}`]: {
+        cursor: 'pointer',
+      },
    },