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'); + }); });