fix(TableHeaderCell): should render aria-sort="none" if not sorted (#…

…25921) * fix(TableHeaderCell): should render `aria-sort="none"` if not sorted Does not render `aria-sort` if not sorted renders `aria-sort="none"` if not sorted * changefile * only apply aria-sort if sortable
microsoft · Dec 7, 2022 · ac32a5c · ac32a5c
1 parent b0aab3b
commit ac32a5c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/change/@fluentui-react-table-cf51e42b-26a6-4fa5-8dcb-360357e9b53b.json b/change/@fluentui-react-table-cf51e42b-26a6-4fa5-8dcb-360357e9b53b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(TableHeaderCell): should render `aria-sort=\"none\"` if not sorted",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...ages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.test.tsx b/...ages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.test.tsx
@@ -94,7 +94,7 @@ describe('TableHeaderCell', () => {
     },
   );
 
-  it('should not render aria-sort when column is not sorted', () => {
+  it('should render aria-sort "none" when column is not sorted', () => {
     const { getByRole } = render(
       <TableContextProvider
         value={{
@@ -106,6 +106,21 @@ describe('TableHeaderCell', () => {
         <TableHeaderCell>Cell</TableHeaderCell>
       </TableContextProvider>,
     );
+    expect(getByRole('columnheader').getAttribute('aria-sort')).toEqual('none');
+  });
+
+  it('should not render aria-sort table is not sortable', () => {
+    const { getByRole } = render(
+      <TableContextProvider
+        value={{
+          ...tableContextDefaultValue,
+          noNativeElements: true,
+          sortable: false,
+        }}
+      >
+        <TableHeaderCell>Cell</TableHeaderCell>
+      </TableContextProvider>,
+    );
     expect(getByRole('columnheader').hasAttribute('aria-sort')).toBe(false);
   });
 });
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
@@ -35,7 +35,7 @@ export const useTableHeaderCell_unstable = (
     root: getNativeElementProps(rootComponent, {
       ref,
       role: rootComponent === 'div' ? 'columnheader' : undefined,
-      'aria-sort': props.sortDirection,
+      'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,
       ...props,
     }),
     sortIcon: resolveShorthand(props.sortIcon, {