fix(TableSelectionCell): Radios should not change selection on focus (#…

…26283)

* fix(TableSelectionCell): Radios should not change selection on focus

While native radios change selection on focus, it can be a bad
experience for keyboard users on larger widgets. If an author wants to
perform an action on row select, it won't force a keyboard user to
perform that action for every row between the one that they're on and
the one that they want.

Fixes #26196

* update tests

* changefile

change/@fluentui-react-table-dc36dcfe-b403-4c89-9868-b16b05e46700.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(TableSelectionCell): Radios should not change selection on focus",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
+import { resetIdsForTests } from '@fluentui/react-utilities';
 import { TableSelectionCell } from './TableSelectionCell';
 import { isConformant } from '../../testing/isConformant';
 import { TableSelectionCellProps } from './TableSelectionCell.types';
@@ -10,6 +11,7 @@ const tr = document.createElement('tr');
 describe('TableSelectionCell', () => {
   beforeEach(() => {
     document.body.appendChild(tr);
+    resetIdsForTests();
   });
 
   isConformant({

packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`TableSelectionCell renders a default state 1`] = `
     >
       <input
         class="fui-Checkbox__input"
-        id="checkbox-9"
+        id="checkbox-2"
         type="checkbox"
       />
       <div

packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCell.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand } from '@fluentui/react-utilities';
+import { resolveShorthand, useId } from '@fluentui/react-utilities';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { Radio } from '@fluentui/react-radio';
 import type { TableSelectionCellProps, TableSelectionCellState } from './TableSelectionCell.types';
@@ -36,7 +36,7 @@ export const useTableSelectionCell_unstable = (
     }),
     radioIndicator: resolveShorthand(props.radioIndicator, {
       required: type === 'radio',
-      defaultProps: { checked: !!checked },
+      defaultProps: { checked: !!checked, input: { name: useId('table-selection-radio') } },
     }),
     type,
     checked,