release v1.8.1 - fixed sort button accessibility issue

KevinVandy · Feb 22, 2023 · 03fc49c · 03fc49c · vercel · Feb 22, 2023
1 parent f8f2012
commit 03fc49c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/apps/material-react-table-docs/components/navigation/MiniNav.tsx b/apps/material-react-table-docs/components/navigation/MiniNav.tsx
@@ -6,7 +6,7 @@ import { EthicalAd } from '../mdx/EthicalAd';
 export const MiniNav = () => {
   const { pathname } = useRouter();
   const isXLDesktop = useMediaQuery('(min-width: 1800px)');
-  
+
   const [headings, setHeadings] = useState<NodeListOf<HTMLElement>>();
 
   useEffect(() => {

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,10 @@ import Head from 'next/head';
 
 ### Version 1
 
+#### v1.8.1 (2023-02-22)
+
+- Fixed sorting button accessibility issue
+
 #### v1.8.0 (2023-02-16)
 
 - Allow `enableEditing` prop and column options to be enabled conditionally per row `(row) => boolean`

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

diff --git a/packages/material-react-table/src/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/head/MRT_TableHeadCell.tsx
@@ -227,7 +227,6 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
                 header={header}
                 table={table}
                 tableCellProps={tableCellProps}
-                onClick={column.getToggleSortingHandler()}
               />
             )}
             {column.getCanFilter() && (

diff --git a/packages/material-react-table/src/head/MRT_TableHeadCellSortLabel.tsx b/packages/material-react-table/src/head/MRT_TableHeadCellSortLabel.tsx
@@ -8,14 +8,12 @@ interface Props {
   header: MRT_Header;
   table: MRT_TableInstance;
   tableCellProps?: TableCellProps;
-  onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
 }
 
 export const MRT_TableHeadCellSortLabel = ({
   header,
   table,
   tableCellProps,
-  onClick,
 }: Props) => {
   const {
     options: {
@@ -53,7 +51,7 @@ export const MRT_TableHeadCellSortLabel = ({
         IconComponent={ArrowDownwardIcon}
         onClick={(e) => {
           e.stopPropagation();
-          onClick?.(e);
+          header.column.getToggleSortingHandler()?.(e);
         }}
       />
     </Tooltip>