refactor: replace notification close btn a with button (#367)

* 关闭按钮修改从a标签修改为button并调整样式和之前a标签一致

* 格式化恢复

* 无

* 关闭button删除tabIndex={0}

* 补充单测

* 删除closeIcon，icon从closable中取用

* 单测配置duration=0

* 修改closableObj?.closeIcon为??

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>

Author: EmilyyyLiu

assets/index.less

@@ -79,6 +79,8 @@
       cursor: pointer;
       opacity: 0.2;
       filter: alpha(opacity=20);
+      border: 0;
+      background-color: #fff;
 
       &-x:after {
         content: '×';

src/Notice.tsx

@@ -27,7 +27,6 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     eventKey,
     content,
     closable,
-    closeIcon = 'x',
     props: divProps,
 
     onClick,
@@ -46,7 +45,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     onNoticeClose(eventKey);
   };
 
-  const onCloseKeyDown: React.KeyboardEventHandler<HTMLAnchorElement> = (e) => {
+  const onCloseKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
     if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === KeyCode.ENTER) {
       onInternalClose();
     }
@@ -106,11 +105,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     if (typeof closable === 'object' && closable !== null) {
       return closable;
     }
-    if (closable) {
-      return { closeIcon };
-    }
     return {};
-  }, [closable, closeIcon]);
+  }, [closable]);
 
   const ariaProps = pickAttrs(closableObj, true);
 
@@ -143,8 +139,7 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
 
       {/* Close Icon */}
       {closable && (
-        <a
-          tabIndex={0}
+        <button
           className={`${noticePrefixCls}-close`}
           onKeyDown={onCloseKeyDown}
           aria-label="Close"
@@ -155,8 +150,8 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
             onInternalClose();
           }}
         >
-          {closableObj.closeIcon}
-        </a>
+          {closableObj.closeIcon ?? 'x'}
+        </button>
       )}
 
       {/* Progress Bar */}

src/hooks/useNotification.tsx

@@ -14,7 +14,7 @@ export interface NotificationConfig {
   /** Customize container. It will repeat call which means you should return same container element. */
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
-  closeIcon?: React.ReactNode;
+
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;

src/interface.ts

@@ -9,7 +9,7 @@ export interface NoticeConfig {
   duration?: number | null;
   showProgress?: boolean;
   pauseOnHover?: boolean;
-  closeIcon?: React.ReactNode;
+
   closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   className?: string;
   style?: React.CSSProperties;

tests/index.test.tsx

@@ -52,14 +52,14 @@ describe('Notification.Basic', () => {
   });
 
   it('works with custom close icon', () => {
-    const { instance } = renderDemo({
-      closeIcon: <span className="test-icon">test-close-icon</span>,
-    });
+    const { instance } = renderDemo();
 
     act(() => {
       instance.open({
         content: <p className="test">1</p>,
-        closable: true,
+        closable: {
+          closeIcon: <span className="test-icon">test-close-icon</span>,
+        },
         duration: 0,
       });
     });
@@ -892,4 +892,32 @@ describe('Notification.Basic', () => {
       expect(document.querySelectorAll('.rc-notification-notice').length).toBe(1);
     });
   });
+  it('notification close node ', () => {
+    const Demo = () => {
+      const [duration] = React.useState(0);
+      const [api, holder] = useNotification({ duration });
+      return (
+        <>
+          <button
+            data-testid="show-notification"
+            onClick={() => {
+              api.open({
+                content: `Test Notification`,
+                closable: { 'aria-label': 'xxx' },
+              });
+            }}
+          >
+            show notification
+          </button>
+          {holder}
+        </>
+      );
+    };
+    const { getByTestId } = render(<Demo />);
+    fireEvent.click(getByTestId('show-notification'));
+    expect(document.querySelector('button.rc-notification-notice-close')).toHaveAttribute(
+      'aria-label',
+      'xxx',
+    );
+  });
 });