fix: close notification with Enter key

Author: MehmetYararVX

.eslintrc.js

@@ -9,4 +9,11 @@ module.exports = {
     'react/require-default-props': 0,
     'jsx-a11y/no-noninteractive-tabindex': 0,
   },
+  overrides: [
+    {
+      // https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file
+      files: ['tests/*.test.tsx'],
+      parserOptions: { project: './tsconfig.test.json' },
+    },
+  ],
 };

src/Notice.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 
 export interface NoticeConfig {
   content?: React.ReactNode;
@@ -49,6 +48,14 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     onNoticeClose(eventKey);
   };
 
+  const handleCloseKeydown: React.KeyboardEventHandler<HTMLAnchorElement> = closable
+    ? (e) => {
+        if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
+          onInternalClose();
+        }
+      }
+    : undefined;
+
   // ======================== Effect ========================
   React.useEffect(() => {
     if (!hovering && duration > 0) {
@@ -60,6 +67,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
         clearTimeout(timeout);
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, hovering, times]);
 
   // ======================== Render ========================
@@ -89,6 +97,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
         <a
           tabIndex={0}
           className={`${noticePrefixCls}-close`}
+          onKeyDown={handleCloseKeydown}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();

tests/index.test.tsx

@@ -1,8 +1,8 @@
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { useNotification } from '../src';
 import type { NotificationAPI, NotificationConfig } from '../src';
+import { useNotification } from '../src';
 
 require('../assets/index.less');
 
@@ -587,6 +587,7 @@ describe('Notification.Basic', () => {
     });
     expect(onAllRemoved).toHaveBeenCalled();
   });
+
   it('when the same key message is closing, dont open new until it closed', () => {
     const onClose = jest.fn();
     const Demo = () => {
@@ -629,4 +630,22 @@ describe('Notification.Basic', () => {
 
     unmount();
   });
+
+  it('closes via keyboard Enter key', () => {
+    const { instance } = renderDemo();
+    let closeCount = 0;
+
+    act(() => {
+      instance.open({
+        content: <p className="test">1</p>,
+        closable: true,
+        onClose: () => {
+          closeCount += 1;
+        },
+      });
+    });
+
+    fireEvent.keyDown(document.querySelector('.rc-notification-notice-close'), { key: 'Enter' }); // origin latest
+    expect(closeCount).toEqual(1);
+  });
 });

tsconfig.test.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./tests"]
+}