From 75da87d730c5b943ce4c9af20af80e0296bba81b Mon Sep 17 00:00:00 2001
From: GUAN MING <105915352+guan404ming@users.noreply.github.com>
Date: Fri, 19 May 2023 18:21:31 +0800
Subject: [PATCH] feat(notification): support role prop (#42484)
* fix: version error
* fix: version error
* docs: update version
* docs: add version column
* docs: fix CN docs
* docs: update default value
---
components/notification/PurePanel.tsx | 18 +++++-----
.../notification/__tests__/index.test.tsx | 12 +++++++
components/notification/index.en-US.md | 31 +++++++++--------
components/notification/index.zh-CN.md | 31 +++++++++--------
components/notification/interface.ts | 1 +
components/notification/useNotification.tsx | 34 ++++++++++++-------
6 files changed, 77 insertions(+), 50 deletions(-)
diff --git a/components/notification/PurePanel.tsx b/components/notification/PurePanel.tsx
index 56ef07e342..56ac224482 100644
--- a/components/notification/PurePanel.tsx
+++ b/components/notification/PurePanel.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
-import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
-import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
-import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
+import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import { Notice } from 'rc-notification';
+import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
+import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
+import { Notice } from 'rc-notification';
import type { NoticeProps } from 'rc-notification/lib/Notice';
-import useStyle from './style';
+import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { IconType } from './interface';
+import useStyle from './style';
export const TypeIcon = {
info: ,
@@ -37,6 +37,7 @@ export interface PureContentProps {
description?: React.ReactNode;
btn?: React.ReactNode;
type?: IconType;
+ role?: 'alert' | 'status';
}
const typeToIcon = {
@@ -53,6 +54,7 @@ export function PureContent({
message,
description,
btn,
+ role = 'alert',
}: PureContentProps) {
let iconNode: React.ReactNode = null;
if (icon) {
@@ -68,7 +70,7 @@ export function PureContent({
className={classNames({
[`${prefixCls}-with-icon`]: iconNode,
})}
- role="alert"
+ role={role}
>
{iconNode}
{message}
diff --git a/components/notification/__tests__/index.test.tsx b/components/notification/__tests__/index.test.tsx
index 3ec9239734..1042929efb 100644
--- a/components/notification/__tests__/index.test.tsx
+++ b/components/notification/__tests__/index.test.tsx
@@ -301,4 +301,16 @@ describe('notification', () => {
expect(document.querySelectorAll("[data-testid='test-notification']").length).toBe(1);
});
+
+ it('support role', async () => {
+ act(() => {
+ notification.open({
+ message: 'Notification Title',
+ duration: 0,
+ role: 'status',
+ });
+ });
+
+ expect(document.querySelectorAll('[role="status"]').length).toBe(1);
+ });
});
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
index 2c75b72a27..c13e7e0358 100644
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@@ -44,21 +44,22 @@ To display a notification message at any of the four corners of the viewport. Ty
The properties of config are as follows:
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| btn | Customized close button | ReactNode | - |
-| className | Customized CSS class | string | - |
-| closeIcon | Custom close icon | ReactNode | - |
-| description | The content of notification box (required) | ReactNode | - |
-| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
-| icon | Customized icon | ReactNode | - |
-| key | The unique identifier of the Notification | string | - |
-| message | The title of notification box (required) | ReactNode | - |
-| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
-| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
-| onClick | Specify a function that will be called when the notification is clicked | function | - |
-| onClose | Trigger when notification closed | function | - |
-| props | An object that can contain `data-*`, `aria-*`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| btn | Customized close button | ReactNode | - | - |
+| className | Customized CSS class | string | - | - |
+| closeIcon | Custom close icon | ReactNode | - | - |
+| description | The content of notification box (required) | ReactNode | - | - |
+| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - |
+| icon | Customized icon | ReactNode | - | - |
+| key | The unique identifier of the Notification | string | - | - |
+| message | The title of notification box (required) | ReactNode | - | - |
+| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | - |
+| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | - |
+| role | The semantics of notification content recognized by screen readers. The default value is `alert`. When set as the default value, the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention. | `alert \| status` | `alert` | 5.6.0 |
+| onClick | Specify a function that will be called when the notification is clicked | function | - | - |
+| onClose | Trigger when notification closed | function | - | - |
+| props | An object that can contain `data-*`, `aria-*`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - | - |
- `notification.useNotification(config)`
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index ccfa26af49..4b7d4f456f 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -45,21 +45,22 @@ demo:
config 参数如下：
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| btn | 自定义关闭按钮 | ReactNode | - |
-| className | 自定义 CSS class | string | - |
-| closeIcon | 自定义关闭图标 | ReactNode | - |
-| description | 通知提醒内容，必选 | ReactNode | - |
-| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |
-| icon | 自定义图标 | ReactNode | - |
-| key | 当前通知唯一标志 | string | - |
-| message | 通知提醒标题，必选 | ReactNode | - |
-| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
-| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
-| onClick | 点击通知时触发的回调函数 | function | - |
-| onClose | 当通知关闭时触发 | function | - |
-| props | 透传至通知 `div` 上的 props 对象，支持传入 `data-*` `aria-*` 或 `role` 作为对象的属性。需要注意的是，虽然在 TypeScript 类型中声明的类型支持传入 `data-*` 作为对象的属性，但目前只允许传入 `data-testid` 作为对象的属性。 详见 https://github.com/microsoft/TypeScript/issues/28960 | Object | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| btn | 自定义关闭按钮 | ReactNode | - | - |
+| className | 自定义 CSS class | string | - | - |
+| closeIcon | 自定义关闭图标 | ReactNode | - | - |
+| description | 通知提醒内容，必选 | ReactNode | - | - |
+| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
+| icon | 自定义图标 | ReactNode | - | - |
+| key | 当前通知唯一标志 | string | - | - |
+| message | 通知提醒标题，必选 | ReactNode | - | - |
+| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | - | s |
+| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | - |
+| role | 供屏幕阅读器识别的通知内容语义，默认为 `alert`。此情况下屏幕阅读器会立即打断当前正在阅读的其他内容，转而阅读通知内容 | `alert \| status` | `alert` | 5.6.0 |
+| onClick | 点击通知时触发的回调函数 | function | - | - |
+| onClose | 当通知关闭时触发 | function | - | - |
+| props | 透传至通知 `div` 上的 props 对象，支持传入 `data-*` `aria-*` 或 `role` 作为对象的属性。需要注意的是，虽然在 TypeScript 类型中声明的类型支持传入 `data-*` 作为对象的属性，但目前只允许传入 `data-testid` 作为对象的属性。 详见 https://github.com/microsoft/TypeScript/issues/28960 | Object | - | - |
- `notification.useNotification(config)`
diff --git a/components/notification/interface.ts b/components/notification/interface.ts
index 819c71bda9..0d9a33a90f 100644
--- a/components/notification/interface.ts
+++ b/components/notification/interface.ts
@@ -29,6 +29,7 @@ export interface ArgsProps {
onClick?: () => void;
closeIcon?: React.ReactNode;
props?: DivProps;
+ role?: 'alert' | 'status';
}
type StaticFn = (args: ArgsProps) => void;
diff --git a/components/notification/useNotification.tsx b/components/notification/useNotification.tsx
index d19b3ff8d6..328bf0b3ad 100644
--- a/components/notification/useNotification.tsx
+++ b/components/notification/useNotification.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import classNames from 'classnames';
import { useNotification as useRcNotification } from 'rc-notification';
import type { NotificationAPI } from 'rc-notification/lib';
-import classNames from 'classnames';
-import { ConfigContext } from '../config-provider';
-import type {
- NotificationInstance,
- ArgsProps,
- NotificationPlacement,
- NotificationConfig,
-} from './interface';
-import { getPlacementStyle, getMotion } from './util';
+import * as React from 'react';
import warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import { PureContent, getCloseIcon } from './PurePanel';
+import type {
+ ArgsProps,
+ NotificationConfig,
+ NotificationInstance,
+ NotificationPlacement,
+} from './interface';
import useStyle from './style';
-import { getCloseIcon, PureContent } from './PurePanel';
+import { getMotion, getPlacementStyle } from './util';
const DEFAULT_OFFSET = 24;
const DEFAULT_DURATION = 4.5;
@@ -105,7 +105,16 @@ export function useInternalNotification(
const { open: originOpen, prefixCls, hashId } = holderRef.current;
const noticePrefixCls = `${prefixCls}-notice`;
- const { message, description, icon, type, btn, className, ...restConfig } = config;
+ const {
+ message,
+ description,
+ icon,
+ type,
+ btn,
+ className,
+ role = 'alert',
+ ...restConfig
+ } = config;
return originOpen({
placement: 'topRight',
@@ -118,6 +127,7 @@ export function useInternalNotification(
message={message}
description={description}
btn={btn}
+ role={role}
/>
),
className: classNames(type && `${noticePrefixCls}-${type}`, hashId, className),