Skip to content

Commit

Permalink
[ButtonBase] Fix space calling onClick on keyDown instead of keyUp (#…
Browse files Browse the repository at this point in the history 
…18319)
  • Loading branch information
@eps1lon
eps1lon authored Nov 12, 2019
1 parent 8306c25 commit 2713be4
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 38 deletions.
22 changes: 14 additions & 8 deletions packages/material-ui/src/ButtonBase/ButtonBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,11 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
}
});

const isNonNativeButton = () => {
const button = getButtonNode();
return component && component !== 'button' && !(button.tagName === 'A' && button.href);
};

/**
* IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
*/
Expand All @@ -206,15 +211,8 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
onKeyDown(event);
}

const button = getButtonNode();
// Keyboard accessibility for non interactive elements
if (
event.target === event.currentTarget &&
component &&
component !== 'button' &&
(event.key === ' ' || event.key === 'Enter') &&
!(button.tagName === 'A' && button.href)
) {
if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter') {
event.preventDefault();
if (onClick) {
onClick(event);
Expand All @@ -232,6 +230,14 @@ const ButtonBase = React.forwardRef(function ButtonBase(props, ref) {
if (onKeyUp) {
onKeyUp(event);
}

// Keyboard accessibility for non interactive elements
if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
event.preventDefault();
if (onClick) {
onClick(event);
}
}
});

let ComponentProp = component;
Expand Down
31 changes: 24 additions & 7 deletions packages/material-ui/src/ButtonBase/ButtonBase.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -680,7 +680,7 @@ describe('<ButtonBase />', () => {
});

describe('keyboard accessibility for non interactive elements', () => {
it('calls onClick when a spacebar is pressed on the element', () => {
it('does not call onClick when a spacebar is pressed on the element', () => {
const onClickSpy = spy(event => event.defaultPrevented);
const { getByRole } = render(
<ButtonBase onClick={onClickSpy} component="div">
Expand All @@ -694,7 +694,24 @@ describe('<ButtonBase />', () => {
key: ' ',
});

expect(onClickSpy.calledOnce).to.equal(true);
expect(onClickSpy.callCount).to.equal(0);
});

it('does call onClick when a spacebar is released on the element', () => {
const onClickSpy = spy(event => event.defaultPrevented);
const { getByRole } = render(
<ButtonBase onClick={onClickSpy} component="div">
Hello
</ButtonBase>,
);
const button = getByRole('button');
button.focus();

fireEvent.keyUp(document.activeElement || document.body, {
key: ' ',
});

expect(onClickSpy.callCount).to.equal(1);
// defaultPrevented?
expect(onClickSpy.returnValues[0]).to.equal(true);
});
Expand Down Expand Up @@ -735,20 +752,20 @@ describe('<ButtonBase />', () => {
expect(onClickSpy.callCount).to.equal(0);
});

it('does not call onClick if Space was pressed on a child', () => {
it('does not call onClick if Space was released on a child', () => {
const onClickSpy = spy(event => event.defaultPrevented);
const onKeyDownSpy = spy();
const onKeyUpSpy = spy();
render(
<ButtonBase onClick={onClickSpy} onKeyDown={onKeyDownSpy} component="div">
<ButtonBase onClick={onClickSpy} onKeyUp={onKeyUpSpy} component="div">
<input autoFocus type="text" />
</ButtonBase>,
);

fireEvent.keyDown(document.activeElement, {
fireEvent.keyUp(document.activeElement, {
key: ' ',
});

expect(onKeyDownSpy.callCount).to.equal(1);
expect(onKeyUpSpy.callCount).to.equal(1);
expect(onClickSpy.callCount).to.equal(0);
});

Expand Down
17 changes: 0 additions & 17 deletions packages/material-ui/src/Chip/Chip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,6 @@ const Chip = React.forwardRef(function Chip(props, ref) {
label,
onClick,
onDelete,
onKeyDown,
onKeyUp,
size = 'medium',
variant = 'default',
Expand All @@ -295,21 +294,6 @@ const Chip = React.forwardRef(function Chip(props, ref) {
}
};

const handleKeyDown = event => {
if (onKeyDown) {
onKeyDown(event);
}

// Ignore events from children of `Chip`.
if (event.currentTarget !== event.target) {
return;
}

if ([' ', 'Enter', 'Backspace', 'Delete', 'Escape'].indexOf(event.key) !== -1) {
event.preventDefault();
}
};

const handleKeyUp = event => {
if (onKeyUp) {
onKeyUp(event);
Expand Down Expand Up @@ -409,7 +393,6 @@ const Chip = React.forwardRef(function Chip(props, ref) {
aria-disabled={disabled ? true : undefined}
tabIndex={clickable || onDelete ? 0 : undefined}
onClick={onClick}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
ref={handleRef}
{...moreProps}
Expand Down
12 changes: 6 additions & 6 deletions packages/material-ui/src/Chip/Chip.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,15 +416,15 @@ describe('<Chip />', () => {
onClickSpy.resetHistory();
});

it('should call onClick when `space` is pressed ', () => {
it('should call onClick when `space` is released ', () => {
const preventDefaultSpy = spy();
const spaceKeyDown = {
preventDefault: preventDefaultSpy,
key: ' ',
};
wrapper.find('div').simulate('keyDown', spaceKeyDown);
assert.strictEqual(preventDefaultSpy.callCount, 2);
assert.strictEqual(onClickSpy.callCount, 1);
assert.strictEqual(preventDefaultSpy.callCount, 0);
assert.strictEqual(onClickSpy.callCount, 0);

const spaceKeyUp = {
key: ' ',
Expand All @@ -441,7 +441,7 @@ describe('<Chip />', () => {
key: 'Enter',
};
wrapper.find('div').simulate('keyDown', enterKeyDown);
assert.strictEqual(preventDefaultSpy.callCount, 2);
assert.strictEqual(preventDefaultSpy.callCount, 1);
assert.strictEqual(onClickSpy.callCount, 1);

const enterKeyUp = {
Expand All @@ -464,7 +464,7 @@ describe('<Chip />', () => {
key: 'Backspace',
};
wrapper.find('div').simulate('keyDown', backspaceKeyDown);
assert.strictEqual(preventDefaultSpy.callCount, 1);
assert.strictEqual(preventDefaultSpy.callCount, 0);
assert.strictEqual(onDeleteSpy.callCount, 0);

const backspaceKeyUp = {
Expand All @@ -485,7 +485,7 @@ describe('<Chip />', () => {
key: 'Delete',
};
wrapper.find('div').simulate('keyDown', backspaceKeyDown);
assert.strictEqual(preventDefaultSpy.callCount, 1);
assert.strictEqual(preventDefaultSpy.callCount, 0);
assert.strictEqual(onDeleteSpy.callCount, 0);

const backspaceKeyUp = {
Expand Down

0 comments on commit 2713be4

Please sign in to comment.