Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TableCell] Fix scope prop to be not set when a data cell is rendered within a table head #35559

Merged
merged 5 commits into from Dec 23, 2022
Merged

[TableCell] Fix scope prop to be not set when a data cell is rendered within a table head #35559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca7cce3
scope bug fix
sai6855 Dec 21, 2022
1bc2a4a
logic fix
sai6855 Dec 21, 2022
ea41599
added resources and logic fix
sai6855 Dec 21, 2022
d8d9a1b
test logic fix
sai6855 Dec 21, 2022
cb9591d
fixes
sai6855 Dec 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/mui-material/src/TableCell/TableCell.js
View file
Open in desktop
Expand Up @@ -140,7 +140,11 @@ const TableCell = React.forwardRef(function TableCell(inProps, ref) {
}

let scope = scopeProp;
if (!scope && isHeadCell) {
// scope is not a valid attribute for <td/> elements.
// source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
if (component === 'td') {
scope = undefined;
} else if (!scope && isHeadCell) {
scope = 'col';
}

Expand Down
15 changes: 15 additions & 0 deletions packages/mui-material/src/TableCell/TableCell.test.js
View file
Open in desktop
Expand Up @@ -2,6 +2,9 @@ import * as React from 'react';
import { expect } from 'chai';
import { createRenderer, describeConformance } from 'test/utils';
import TableCell, { tableCellClasses as classes } from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Table from '@mui/material/Table';

describe('<TableCell />', () => {
const { render } = createRenderer();
Expand Down Expand Up @@ -93,4 +96,16 @@ describe('<TableCell />', () => {
const { container } = renderInTable(<TableCell component="th" scope="row" />);
expect(container.querySelector('th')).not.to.have.attribute('role');
});
it('should not set scope attribute when TableCell is rendered as <td> within table head', () => {
const { container } = render(
<Table>
<TableHead>
<TableRow>
<TableCell component="td" />
</TableRow>
</TableHead>
</Table>,
);
expect(container.querySelector('td')).not.to.have.attribute('scope');
});
});