fix: table selection checkbox or radio should be rendered even if invisible

[smhigley]

Previous Behavior

If authors set selectionCell: {{ invisible: true }} without passing any data to the radioIndicator or checkboxIndicator slots, the radio/checkbox input would not be rendered in the DOM. For some (e.g. touch) screen reader and voice control users, this means that they would not be able to select rows.

Our examples do pass in data (an aria-label) to the indicator slot, so the issue does not show up in our docs site. While authors should always pass in an accessible name to the indicator slot they're using, it's still better to have an unnamed radio or checkbox than to have none at all.

New Behavior

The radioIndicator and checkboxIndicator slots render by default even with invisible: true. The visuals don't change (invisible will cause the opacity: 0 style to be added), just the DOM.

This also means that the lack of an accessible name for the radio/checkbox inputs should be able to be caught in automated tests.

Related Issue(s)

Not a github issue, but this came up in a Teams question from a partner team who got an a11y issue about the selection cells being empty.

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.1 MB 271.983 kB	1.1 MB 271.978 kB	-8 B -5 B
react-table DataGrid	160.471 kB 45.539 kB	160.463 kB 45.537 kB	-8 B -2 B
react-table Table as DataGrid	131.325 kB 36.373 kB	131.317 kB 36.371 kB	-8 B -2 B
react-table Table (Selection only)	70.512 kB 19.965 kB	70.504 kB 19.962 kB	-8 B -3 B
react-table Table (Sort only)	69.155 kB 19.576 kB	69.147 kB 19.574 kB	-8 B -2 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.14 kB 20.137 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	218.197 kB 63.203 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-table Table (Primitives only)	42.643 kB 13.82 kB
react-timepicker-compat TimePicker	107.387 kB 35.758 kB

_{🤖 This report was generated against 603fe594debaf719b6b1804da405e9ffecf0a220}

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	35	36	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	650	616	5000
Button	mount	295	295	5000
Field	mount	1107	1142	5000
FluentProvider	mount	704	713	5000
FluentProviderWithTheme	mount	85	77	10
FluentProviderWithTheme	virtual-rerender	35	36	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	76	82	10
MakeStyles	mount	861	875	50000
Persona	mount	1765	1744	5000
SpinButton	mount	1403	1414	5000
SwatchPicker	mount	1679	1661	5000