fix: TableHeaderCell should not render button when not sortable

change/@fluentui-react-table-a86be917-7fe4-41a7-a5aa-19d22c2aa1f8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: TableHeaderCell should not render button when not sortable",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-table/package.json

@@ -16,6 +16,8 @@
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "test": "jest --passWithNoTests",

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

@@ -7,14 +7,12 @@ exports[`DataGridHeaderCell renders a default state 1`] = `
     role="columnheader"
     tabindex="0"
   >
-    <button
+    <div
       class="fui-DataGridHeaderCell__button fui-TableHeaderCell__button"
       role="presentation"
-      tabindex="-1"
-      type="button"
     >
       Default DataGridHeaderCell
-    </button>
+    </div>
   </div>
 </div>
 `;

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

@@ -65,16 +65,26 @@ describe('TableHeaderCell', () => {
     expect(container.querySelector('svg')).toBe(null);
   });
 
+  it('should have interactive button when sortable', () => {
+    const { getByRole } = render(
+      <TableContextProvider value={{ ...tableContextDefaultValue, noNativeElements: true, sortable: true }}>
+        <TableHeaderCell>Cell</TableHeaderCell>
+      </TableContextProvider>,
+    );
+
+    const button = getByRole('button');
+    expect(button?.getAttribute('tabindex')).toEqual('0');
+  });
+
   it('should not have interactive button when not sortable', () => {
-    const { container } = render(
+    const { queryByRole } = render(
       <TableContextProvider value={{ ...tableContextDefaultValue, noNativeElements: true, sortable: false }}>
         <TableHeaderCell>Cell</TableHeaderCell>
       </TableContextProvider>,
     );
 
-    const button = container.querySelector('button');
-    expect(button?.getAttribute('role')).toEqual('presentation');
-    expect(button?.getAttribute('tabindex')).toEqual('-1');
+    const button = queryByRole('button');
+    expect(button).toBeNull();
   });
 
   it.each<SortDirection>(['ascending', 'descending'])(

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

@@ -5,14 +5,12 @@ exports[`TableHeaderCell renders a default state 1`] = `
   <th
     class="fui-TableHeaderCell"
   >
-    <button
+    <div
       class="fui-TableHeaderCell__button"
       role="presentation"
-      tabindex="-1"
-      type="button"
     >
       Default TableHeaderCell
-    </button>
+    </div>
   </th>
 </tr>
 `;

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusWithin } from '@fluentui/react-tabster';
 import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
+import { useARIAButtonShorthand } from '@fluentui/react-aria';
 import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';
 import { useTableContext } from '../../contexts/tableContext';
-import { useARIAButtonShorthand } from '@fluentui/react-aria';
 
 const sortIcons = {
   ascending: <ArrowUpRegular fontSize={12} />,
@@ -27,10 +27,11 @@ export const useTableHeaderCell_unstable = (
   const { noNativeElements, sortable } = useTableContext();
 
   const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';
+
   return {
     components: {
       root: rootComponent,
-      button: 'button',
+      button: 'div',
       sortIcon: 'span',
       aside: 'span',
     },
@@ -48,11 +49,9 @@ export const useTableHeaderCell_unstable = (
     button: useARIAButtonShorthand(props.button, {
       required: true,
       defaultProps: {
-        role: 'presentation',
-        tabIndex: -1,
-        type: 'button',
-        ...(sortable && {
-          role: undefined,
+        as: 'div',
+        ...(!sortable && {
+          role: 'presentation',
           tabIndex: undefined,
         }),
       },

packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.styles.ts

@@ -33,6 +33,7 @@ const useFlexLayoutStyles = makeStyles({
  */
 const useStyles = makeStyles({
   root: {
+    fontWeight: tokens.fontWeightRegular,
     ...shorthands.padding('0px', tokens.spacingHorizontalS),
     ...createCustomFocusIndicatorStyle(
       {
@@ -114,6 +115,7 @@ export const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState):
     state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,
     state.root.className,
   );
+
   state.button.className = mergeClasses(
     tableHeaderCellClassNames.button,
     styles.resetButton,