diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index f34c7002808023..82cc86dbbb8011 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -206,6 +206,10 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) { }); } + if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') { + event.preventDefault(); + } + if (onKeyDown) { onKeyDown(event); } @@ -240,15 +244,13 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) { // Keyboard accessibility for non interactive elements if ( + onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented ) { - event.preventDefault(); - if (onClick) { - onClick(event); - } + onClick(event); } }); diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js index cc7e2e1022fc38..edbf34e11f00da 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js @@ -679,10 +679,11 @@ describe('', () => { }); describe('keyboard accessibility for non interactive elements', () => { - it('does not call onClick when a spacebar is pressed on the element', () => { + it('does not call onClick when a spacebar is pressed on the element but prevents the default', () => { + const onKeyDown = spy(event => event.defaultPrevented); const onClickSpy = spy(event => event.defaultPrevented); const { getByRole } = render( - + Hello , ); @@ -694,6 +695,8 @@ describe('', () => { }); expect(onClickSpy.callCount).to.equal(0); + // defaultPrevented? + expect(onKeyDown.returnValues[0]).to.equal(true); }); it('does call onClick when a spacebar is released on the element', () => { @@ -712,7 +715,7 @@ describe('', () => { expect(onClickSpy.callCount).to.equal(1); // defaultPrevented? - expect(onClickSpy.returnValues[0]).to.equal(true); + expect(onClickSpy.returnValues[0]).to.equal(false); }); it('does not call onClick when a spacebar is released and the default is prevented', () => {