fix(DataGrid): single-select radio input should be fully hidden, not disabled (microsoft#35103)

Author: smhigley

change/@fluentui-react-table-6820f12e-0e91-48c5-8c1e-d1a171333a45.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: single-select radio input should be fully hidden, not disabled",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.test.tsx

@@ -183,20 +183,6 @@ describe('DataGridRow', () => {
       expect(toggleRow).toHaveBeenCalledTimes(0);
     });
 
-    it('should disable selection cell input if the row is in a header and the selection mode is singe', () => {
-      const toggleRow = jest.fn();
-      const ctx = mockDataGridContext({ selectableRows: true }, { selection: { toggleRow, selectionMode: 'single' } });
-      const { container } = render(
-        <DataGridHeader>
-          <DataGridContextProvider value={ctx}>
-            <DataGridRow>{() => <div />}</DataGridRow>
-          </DataGridContextProvider>
-        </DataGridHeader>,
-      );
-
-      expect(container.querySelector("input[type='radio']")?.hasAttribute('disabled')).toBe(true);
-    });
-
     it('should render aria-selected=true if row is selected', () => {
       const isRowSelected = () => true;
       const ctx = mockDataGridContext({ selectableRows: true }, { selection: { isRowSelected } });

packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx

@@ -79,11 +79,6 @@ export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<
     selectionCell: slot.optional(props.selectionCell, {
       renderByDefault: selectable,
       elementType: DataGridSelectionCell,
-      defaultProps: {
-        radioIndicator: {
-          disabled: isHeader,
-        },
-      },
     }),
     renderCell: props.children,
     columnDefs,

packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRowStyles.styles.ts

@@ -3,7 +3,6 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';
-import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
 import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
 import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 
@@ -13,23 +12,6 @@ export const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {
 };
 
 const useStyles = makeStyles({
-  singleSelectHeader: {
-    ...createCustomFocusIndicatorStyle(
-      {
-        [`& .${tableSelectionCellClassNames.root}`]: {
-          opacity: 0,
-        },
-      },
-      { selector: 'focus-within' },
-    ),
-
-    ':hover': {
-      [`& .${tableSelectionCellClassNames.root}`]: {
-        opacity: 0,
-      },
-    },
-  },
-
   subtleSelection: {
     ...createCustomFocusIndicatorStyle(
       {
@@ -54,8 +36,6 @@ const useStyles = makeStyles({
 export const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {
   'use no memo';
 
-  const isHeader = useIsInTableHeader();
-  const isSingleSelect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'single');
   const isSubtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
   const styles = useStyles();
 
@@ -64,7 +44,6 @@ export const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGrid
     dataGridRowClassNames.root,
     state.root.className,
     isSubtle && styles.subtleSelection,
-    isHeader && isSingleSelect && styles.singleSelectHeader,
   );
   if (state.selectionCell) {
     state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);

packages/react-components/react-table/library/src/components/DataGridSelectionCell/DataGridSelectionCell.test.tsx

@@ -139,6 +139,23 @@ describe('DataGridSelectionCell', () => {
       expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
     });
 
+    it('should not render a radio in the header in single-select mode', () => {
+      const allRowsSelected = true;
+      const ctx = mockDataGridContext(
+        { selectableRows: true },
+        { selection: { allRowsSelected, selectionMode: 'single' } },
+      );
+      const { queryByRole } = render(
+        <DataGridHeader>
+          <DataGridContextProvider value={ctx}>
+            <DataGridSelectionCell />
+          </DataGridContextProvider>
+        </DataGridHeader>,
+      );
+
+      expect(queryByRole('radio') as HTMLInputElement).toBeFalsy();
+    });
+
     it('should toggle all rows in multiselect mode', () => {
       const toggleAllRows = jest.fn();
       const ctx = mockDataGridContext(

packages/react-components/react-table/library/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts

@@ -52,6 +52,7 @@ export const useDataGridSelectionCell_unstable = (
       invisible: isHeader && type === 'radio',
       'aria-selected': checked === 'mixed' ? undefined : checked,
       subtle,
+      radioIndicator: isHeader ? null : undefined,
       ...props,
       onClick,
     },