Skip to content

Commit 8656ea5

Browse files
committed
Fix Datagrid Header Sort Tooltip
## Problem In a `<Datagrid>`, the header of sortable columns has a tooltip that is the same for all columns: "Sort". It's not explicit enough, and it's even confusing for screen readers. ## Solution Reuse the title logic from `<SortButton>`, which already solves this problem. Closes #9541
1 parent 71aaf60 commit 8656ea5

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

packages/ra-ui-materialui/src/list/datagrid/Datagrid.spec.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,9 @@ describe('<Datagrid />', () => {
272272
it('should display a message when there is no result', () => {
273273
render(
274274
<Wrapper listContext={{ ...contextValue, data: [], total: 0 }}>
275-
<Datagrid />
275+
<Datagrid>
276+
<TitleField />
277+
</Datagrid>
276278
</Wrapper>
277279
);
278280
expect(screen.queryByText('ra.navigation.no_results')).not.toBeNull();

packages/ra-ui-materialui/src/list/datagrid/DatagridHeaderCell.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
useTranslate,
1111
SortPayload,
1212
useResourceContext,
13+
useTranslateLabel,
1314
} from 'ra-core';
1415

1516
export const DatagridHeaderCell = (
@@ -19,6 +20,16 @@ export const DatagridHeaderCell = (
1920
const resource = useResourceContext(props);
2021

2122
const translate = useTranslate();
23+
const translateLabel = useTranslateLabel();
24+
const sortLabel = translate('ra.sort.sort_by', {
25+
field: translateLabel({
26+
label: field.props.label,
27+
resource,
28+
source: field.props.source,
29+
}),
30+
order: translate(`ra.sort.${sort.order === 'ASC' ? 'DESC' : 'ASC'}`),
31+
_: translate('ra.action.sort'),
32+
});
2233

2334
return (
2435
<StyledTableCell
@@ -31,7 +42,7 @@ export const DatagridHeaderCell = (
3142
field.props.sortable !== false &&
3243
(field.props.sortBy || field.props.source) ? (
3344
<Tooltip
34-
title={translate('ra.action.sort')}
45+
title={sortLabel}
3546
placement={
3647
field.props.textAlign === 'right'
3748
? 'bottom-end'

0 commit comments

Comments
 (0)