diff --git a/docs/components/alert.md b/docs/components/alert.md
index 66df80b..1e09d3f 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -7,12 +7,19 @@
@@ -21,6 +28,8 @@
Alert 使用 `role='alert'` 暴露重要提示内容。默认状态图标仅作视觉辅助,会从辅助技术树中隐藏;需要传达给读屏用户的信息应放在 `message` 或 `description` 中。传入自定义 `icon` 时,组件不会自动隐藏它。
+可关闭 Alert 的默认关闭按钮使用 `aria-label='Close alert'`。当使用文字、图标或本地化关闭控件时,可以通过 `closeIcon` 和 `closeAriaLabel` 保持视觉内容与可访问名称一致。
+
## API
| 属性 | 说明 | 类型 | 默认值 |
@@ -33,4 +42,6 @@ Alert 使用 `role='alert'` 暴露重要提示内容。默认状态图标仅作
| icon | 自定义图标 | `ReactNode` | - |
| banner | 横幅模式 | `boolean` | `false` |
| action | 操作区域 | `ReactNode` | - |
-| onClose | 关闭回调 | `() => void` | - |
+| closeIcon | 自定义关闭控件内容 | `ReactNode` | `'✕'` |
+| closeAriaLabel | 关闭按钮的可访问名称 | `string` | `'Close alert'` |
+| onClose | 关闭回调 | `(event: MouseEvent) => void` | - |
diff --git a/packages/ui/src/components/feedback/Alert/Alert.test.tsx b/packages/ui/src/components/feedback/Alert/Alert.test.tsx
index 0c05231..0bda550 100644
--- a/packages/ui/src/components/feedback/Alert/Alert.test.tsx
+++ b/packages/ui/src/components/feedback/Alert/Alert.test.tsx
@@ -34,12 +34,27 @@ describe('Alert', () => {
await user.click(screen.getByRole('button', { name: 'Close alert' }))
expect(onClose).toHaveBeenCalledTimes(1)
+ expect(onClose.mock.calls[0]?.[0]).toHaveProperty('type', 'click')
expect(screen.queryByRole('alert')).not.toBeInTheDocument()
})
+ it('supports custom close icon and accessible name', () => {
+ render(
+ Dismiss}
+ closeAriaLabel="Dismiss alert"
+ />,
+ )
+
+ const closeButton = screen.getByRole('button', { name: 'Dismiss alert' })
+ expect(closeButton).toHaveTextContent('Dismiss')
+ })
+
it('renders an optional action area', () => {
render(Review} />)
expect(screen.getByRole('button', { name: 'Review' })).toBeInTheDocument()
})
-})
+})
\ No newline at end of file
diff --git a/packages/ui/src/components/feedback/Alert/Alert.tsx b/packages/ui/src/components/feedback/Alert/Alert.tsx
index fbbd41c..53b6389 100644
--- a/packages/ui/src/components/feedback/Alert/Alert.tsx
+++ b/packages/ui/src/components/feedback/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useState, type HTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, useState, type HTMLAttributes, type MouseEvent, type ReactNode } from 'react'
import { cn } from '../../../utils/cn'
import { alertTypeSurfaceClass, type AlertType } from '../../../theme/componentTokens'
@@ -10,9 +10,11 @@ export interface AlertProps extends HTMLAttributes {
closable?: boolean
showIcon?: boolean
icon?: ReactNode
- onClose?: () => void
+ onClose?: (event: MouseEvent) => void
banner?: boolean
action?: ReactNode
+ closeIcon?: ReactNode
+ closeAriaLabel?: string
}
const typeIconMap: Record = {
@@ -34,6 +36,8 @@ export const Alert = forwardRef(function Alert(
onClose,
banner = false,
action,
+ closeIcon = '✕',
+ closeAriaLabel = 'Close alert',
...props
},
ref,
@@ -67,16 +71,16 @@ export const Alert = forwardRef(function Alert(
{closable ? (
) : null}
)
-})
+})
\ No newline at end of file