feat: notification support aria in closable (#321)

Author: kiner-tang

src/Notice.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import type { NoticeConfig } from './interface';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 
 export interface NoticeProps extends Omit<NoticeConfig, 'onClose'> {
   prefixCls: string;
@@ -60,6 +61,19 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, mergedHovering, times]);
 
+  // ======================== Closable ========================
+  const closableObj = React.useMemo(() => {
+    if (typeof closable === 'object' && closable !== null) {
+      return closable;
+    }
+    if (closable) {
+      return { closeIcon };
+    }
+    return {};
+  }, [closable, closeIcon]);
+
+  const ariaProps = pickAttrs(closableObj, true);
+
   // ======================== Render ========================
   const noticePrefixCls = `${prefixCls}-notice`;
 
@@ -90,13 +104,15 @@ const Notify = React.forwardRef<HTMLDivElement, NoticeProps & { times?: number }
           tabIndex={0}
           className={`${noticePrefixCls}-close`}
           onKeyDown={onCloseKeyDown}
+          aria-label="Close"
+          {...ariaProps}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
             onInternalClose();
           }}
         >
-          {closeIcon}
+          {closableObj.closeIcon}
         </a>
       )}
     </div>

src/hooks/useNotification.tsx

@@ -14,7 +14,7 @@ export interface NotificationConfig {
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
   closeIcon?: React.ReactNode;
-  closable?: boolean;
+  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;
   /** @private. Config for notification holder style. Safe to remove if refactor */

src/interface.ts

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

tests/index.test.tsx

@@ -688,4 +688,28 @@ describe('Notification.Basic', () => {
     fireEvent.keyDown(document.querySelector('.rc-notification-notice-close'), { key: 'Enter' }); // origin latest
     expect(closeCount).toEqual(1);
   });
+  it('Support aria-* in closable', () => {
+    const { instance } = renderDemo({
+      closable: {
+        closeIcon: 'CloseBtn',
+        'aria-label': 'close',
+        'aria-labelledby': 'close',
+      },
+    });
+
+    act(() => {
+      instance.open({
+        content: <p className="test">1</p>,
+        duration: 0,
+      });
+    });
+
+    expect(document.querySelector('.rc-notification-notice-close').textContent).toEqual('CloseBtn');
+    expect(
+      document.querySelector('.rc-notification-notice-close').getAttribute('aria-label'),
+    ).toEqual('close');
+    expect(
+      document.querySelector('.rc-notification-notice-close').getAttribute('aria-labelledby'),
+    ).toEqual('close');
+  });
 });