diff --git a/packages/mui-material/src/TableCell/TableCell.js b/packages/mui-material/src/TableCell/TableCell.js
index 8d7f828cd958f8..3c4233061c8959 100644
--- a/packages/mui-material/src/TableCell/TableCell.js
+++ b/packages/mui-material/src/TableCell/TableCell.js
@@ -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
| elements.
+ // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
+ if (component === 'td') {
+ scope = undefined;
+ } else if (!scope && isHeadCell) {
scope = 'col';
}
diff --git a/packages/mui-material/src/TableCell/TableCell.test.js b/packages/mui-material/src/TableCell/TableCell.test.js
index 99ee30b686a351..776ed9241ff7c6 100644
--- a/packages/mui-material/src/TableCell/TableCell.test.js
+++ b/packages/mui-material/src/TableCell/TableCell.test.js
@@ -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('', () => {
const { render } = createRenderer();
@@ -93,4 +96,16 @@ describe('', () => {
const { container } = renderInTable();
expect(container.querySelector('th')).not.to.have.attribute('role');
});
+ it('should not set scope attribute when TableCell is rendered as within table head', () => {
+ const { container } = render(
+ ,
+ );
+ expect(container.querySelector('td')).not.to.have.attribute('scope');
+ });
});
|