diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index b2e74924e5dea6..14801354fb65cf 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -171,6 +171,10 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) { : externalInputProps, { 'data-indeterminate': indeterminate, + ...(indeterminate && { + // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked#values + 'aria-checked': 'mixed', + }), }, ), }, diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js index 49599c9108aede..8f53f4a2c4f4fc 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.test.js +++ b/packages/mui-material/src/Checkbox/Checkbox.test.js @@ -80,6 +80,11 @@ describe('', () => { const { getByTestId } = render(); expect(getByTestId('IndeterminateCheckBoxIcon')).not.to.equal(null); }); + + it('should have aria-checked="mixed"', () => { + const { getByRole } = render(); + expect(getByRole('checkbox')).to.have.attribute('aria-checked', 'mixed'); + }); }); describe('prop: size', () => {