fix: Table ellipsis title missing

close #37977
This commit is contained in:
afc163 2022-10-13 17:44:19 +08:00
parent 23285382f1
commit 416c61f08e
4 changed files with 26 additions and 7 deletions

View File

@ -227,6 +227,22 @@ describe('Table', () => {
});
});
// https://github.com/ant-design/ant-design/issues/37977
it('should render title when enable ellipsis, sorter and filters', () => {
const data = [];
const columns = [
{ title: 'id', dataKey: 'id', ellipsis: true, sorter: true, filters: [] },
{ title: 'age', dataKey: 'age', ellipsis: true, sorter: true },
{ title: 'age', dataKey: 'age', ellipsis: true, filters: [] },
];
const { container } = render(<Table columns={columns} dataSource={data} />);
container
.querySelectorAll<HTMLTableCellElement>('.ant-table-thead th.ant-table-cell')
.forEach(td => {
expect((td.attributes as any).title).toBeTruthy();
});
});
it('warn about rowKey when using index parameter', () => {
warnSpy.mockReset();
const columns = [

View File

@ -20328,6 +20328,7 @@ Array [
aria-label="Name sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Name"
>
<div
class="ant-table-filter-column"
@ -20634,6 +20635,7 @@ Array [
aria-label="Age sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Age"
>
<div
class="ant-table-column-sorters"
@ -20719,6 +20721,7 @@ Array [
aria-label="Address sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Address"
>
<div
class="ant-table-filter-column"

View File

@ -15393,6 +15393,7 @@ Array [
aria-label="Name sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Name"
>
<div
class="ant-table-filter-column"
@ -15487,6 +15488,7 @@ Array [
aria-label="Age sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Age"
>
<div
class="ant-table-column-sorters"
@ -15548,6 +15550,7 @@ Array [
aria-label="Address sortable"
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
tabindex="0"
title="Address"
>
<div
class="ant-table-filter-column"

View File

@ -207,18 +207,15 @@ function injectSorter<RecordType>(
// Inform the screen-reader so it can tell the visually impaired user which column is sorted
if (sorterOrder) {
if (sorterOrder === 'ascend') {
cell['aria-sort'] = 'ascending';
} else {
cell['aria-sort'] = 'descending';
}
cell['aria-sort'] = sorterOrder === 'ascend' ? 'ascending' : 'descending';
} else {
cell['aria-label'] = `${renderColumnTitle(column.title, {})} sortable`;
}
cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
cell.tabIndex = 0;
if (column.ellipsis) {
cell.title = (renderColumnTitle(column.title, {}) ?? '').toString();
}
return cell;
},
};