diff --git a/src/Notice.tsx b/src/Notice.tsx index 5d7c2d9..050668f 100644 --- a/src/Notice.tsx +++ b/src/Notice.tsx @@ -57,6 +57,12 @@ export default class Notice extends Component { this.clearCloseTimer(); } + keyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.code === 'Enter' || e.charCode === 13) { + this.close(); + } + }; + close = (e?: React.MouseEvent) => { if (e) { e.stopPropagation(); @@ -89,8 +95,16 @@ export default class Notice extends Component { } render() { - const { prefixCls, className, closable, closeIcon, style, onClick, children, holder } = - this.props; + const { + prefixCls, + className, + closable, + closeIcon, + style, + onClick, + children, + holder, + } = this.props; const componentClass = `${prefixCls}-notice`; const dataOrAriaAttributeProps = Object.keys(this.props).reduce( (acc: Record, key: string) => { @@ -114,7 +128,12 @@ export default class Notice extends Component { >
{children}
{closable ? ( - + {closeIcon || } ) : null} diff --git a/tests/index.test.js b/tests/index.test.js index 216d817..50b5ec9 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -611,4 +611,40 @@ describe('Notification.Basic', () => { }, ); }); + + it('closes via keyboard Enter key', (done) => { + let container; + + Notification.newInstance( + { + TEST_RENDER: (node) => { + ({ container } = render(
{node}
)); + }, + }, + (notification) => { + notification.notice({ + content:

1

, + closable: true, + duration: null, + }); + + setTimeout(() => { + expect(container.querySelectorAll('.test')).toHaveLength(1); + expect(container.querySelector('a')).toBeTruthy(); + + setTimeout(() => { + fireEvent.keyDown(container.querySelector('a'), { + key: 'Enter', + code: 'Enter', + charCode: 13, + }); + + expect(container.querySelectorAll('.test')).toHaveLength(0); + notification.destroy(); + done(); + }, 1000); + }, 10); + }, + ); + }); });