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),