reka-ui Alert Dialog 完全指南无障碍模态对话框的组件剖析与实战radix-vue【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vueAlert Dialog警示对话框是一种以模态形式打断用户操作、展示重要信息并要求用户明确回应的对话框组件。本文以 radix-vue 仓库即 reka-ui 的前身中的 Alert Dialog 组件文档为主体结合 packages/core/src/AlertDialog 下的源码实现与自动化测试系统讲解该组件的安装方式、Anatomy 组合结构、完整 API 参数表、两个高频实战示例异步表单提交后关闭、自定义 Portal 容器以及其背后基于 WAI-ARIA Alert and Message Dialogs 模式的键盘交互与无障碍实现原理。读完本文你将能够在自己的 Vue 3 项目中独立搭建一个具备焦点陷阱、屏幕阅读器播报、Esc 关闭等能力的高质量警示对话框。组件定位与核心能力Alert Dialog 是一个模态对话框它在打开时遮罩Overlay并锁定页面的其余部分强制用户先对其中内容作出回应。根据 docs/content/docs/components/alert-dialog.md 的定义其核心特性包括焦点自动锁定Focus is automatically trapped对话框打开后键盘 Tab 循环被限制在对话框内部避免焦点逃逸到背景页面。受控与非受控皆可Can be controlled or uncontrolled既可以使用defaultOpen走非受控模式也可以使用v-model:open完全掌控开关状态。屏幕阅读器播报管理通过AlertDialogTitle与AlertDialogDescription组件自动为对话框提供可访问名称与可访问描述便于辅助技术如读屏软件在打开时播报。Esc 自动关闭按下 Esc 键会关闭对话框并将焦点交还给触发器。值得注意的是与普通Dialog不同Alert Dialog 不允许通过点击遮罩或点击外部区域关闭——用户必须通过对话框内的操作按钮如「确认」「取消」或 Esc 键来结束交互。这一点在源码层面有明确体现下文「实现原理」章节会详细展开。安装在命令行中安装组件当前仓库的文档示例以reka-ui作为包名导入即此前 Radix Vue 的延续npm install reka-ui # 或 pnpm add reka-ui # 或 yarn add reka-ui安装完成后即可在 Vue 3script setup组件中按需导入 Alert Dialog 的各组成部分。Anatomy组件的组成结构Alert Dialog 由 9 个可组合的部分组成。按照 docs/content/docs/components/alert-dialog.md 的规范示例将它们拼接起来的最小结构如下script setup langts import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, } from reka-ui /script template AlertDialogRoot AlertDialogTrigger / AlertDialogPortal AlertDialogOverlay / AlertDialogContent AlertDialogTitle / AlertDialogDescription / AlertDialogCancel / AlertDialogAction / /AlertDialogContent /AlertDialogPortal /AlertDialogRoot /template各部分职责一览部件职责AlertDialogRoot容纳所有部件的容器管理开关状态AlertDialogTrigger打开对话框的按钮AlertDialogPortal将 Overlay 与 Content 传送teleport到body下避免被父级overflow、z-index等样式干扰AlertDialogOverlay覆盖视口非交互区域的遮罩层AlertDialogContent对话框主体内容在打开时渲染AlertDialogCancel关闭对话框的「取消」按钮视觉上应与 Action 按钮区分AlertDialogAction关闭对话框的「确认」按钮视觉上应与 Cancel 按钮区分AlertDialogTitle对话框的可访问名称打开时被读屏软件播报AlertDialogDescription对话框的可访问描述打开时被读屏软件播报API ReferenceRootAlertDialogRoot包含警示对话框的所有部件。参数定义见 docs/content/meta/AlertDialogRoot.md。Props名称类型必填说明defaultOpenboolean否对话框首次渲染时的初始打开状态用于无需外部控制打开状态的场景openboolean否受控的打开状态可通过v-model:open双向绑定unmountOnHideboolean否设为false时对话框关闭后内容不会被卸载而是用 CSS 隐藏对 SEO 友好也能避免每次打开都重新挂载组件带来的性能开销Events名称类型update:open[value: boolean]打开状态变化时触发Slots名称类型openboolean当前打开状态close(): void关闭对话框的函数TriggerAlertDialogTrigger一个用于打开对话框的按钮默认渲染为button。Props名称类型必填默认值说明asAsTag \| Component否button组件实际渲染为的元素或组件会被asChild覆盖asChildboolean否-将默认渲染元素替换为传入的子元素并合并其 props 与行为组合模式数据属性Data Attributes属性值[data-state]open/closed反映对话框当前开关状态可用于样式编写PortalAlertDialogPortal使用该组件后Overlay 与 Content 会被传送到body中。参数定义见 docs/content/meta/AlertDialogPortal.md。Props名称类型必填说明tostring \| HTMLElement否Vue 原生 Teleport 组件的:to目标disabledboolean否禁用 Teleport改为就地渲染对应 Vue 官方disabled语义deferboolean否延迟解析 Teleport 目标直到应用其他部分挂载完成需 Vue 3.5.0forceMountboolean否强制挂载便于配合 Vue 动画库控制显隐动画OverlayAlertDialogOverlay对话框打开时覆盖在视口非交互区域之上的遮罩层默认渲染为div。Props名称类型必填默认值说明asAsTag \| Component否div渲染为的元素或组件asChildboolean否-组合模式开关forceMountboolean否-强制挂载用于动画控制数据属性属性值[data-state]open/closedContentAlertDialogContent对话框主体在打开时渲染默认渲染为div。参数定义见 docs/content/meta/AlertDialogContent.md。Props名称类型必填默认值说明asAsTag \| Component否div渲染为的元素或组件asChildboolean否-组合模式开关disableOutsidePointerEventsboolean否-为true时禁用 DismissableLayer 之外元素的 hover/focus/click 交互用户需在外部元素上点击两次才能触发它第一次用于关闭层forceMountboolean否-强制挂载用于动画控制Events均可通过event.preventDefault()阻止默认行为名称类型说明openAutoFocus[event: Event]打开时自动聚焦回调closeAutoFocus[event: Event]关闭时自动聚焦回调escapeKeyDown[event: KeyboardEvent]按下 Esc 键时触发pointerDownOutside[event: PointerDownOutsideEvent]在层外部发生pointerdown时触发focusOutside[event: FocusOutsideEvent]焦点移出该层时触发interactOutside[event: PointerDownOutsideEvent \| FocusOutsideEvent]在层外发生交互外部pointerdown或焦点移出时触发数据属性属性值[data-state]open/closedCancel 与 ActionAlertDialogCancel/AlertDialogAction两者都是关闭对话框的按钮默认渲染为button仅视觉定位不同Cancel 应视觉上与 Action 区分通常是次要样式Action 则应视觉上与 Cancel 区分通常是强调样式以此引导用户对破坏性操作保持警觉。Props两者一致见 docs/content/meta/AlertDialogCancel.md 与 docs/content/meta/AlertDialogAction.md名称类型必填默认值说明asAsTag \| Component否button渲染为的元素或组件asChildboolean否-组合模式开关Title 与 DescriptionAlertDialogTitle/AlertDialogDescriptionAlertDialogTitle对话框的可访问名称accessible name默认渲染为h2打开时被读屏软件播报。你也可以直接在AlertDialogContent上提供aria-label或aria-labelledby并省略该组件。AlertDialogDescription对话框的可访问描述默认渲染为p打开时被读屏软件播报。同理也可以改用AlertDialogContent上的aria-describedby并省略该组件。两者 Props 均为as默认值分别为h2与p和asChild详见 docs/content/meta/AlertDialogTitle.md 与 docs/content/meta/AlertDialogDescription.md。实战示例示例一异步表单提交完成后关闭使用受控属性v-model:open在异步操作如请求后端接口完成后再程序化关闭对话框避免表单数据尚未提交完成就提前关闭。完整示例见 docs/content/docs/components/alert-dialog.mdscript setup import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, } from reka-ui const wait () new Promise(resolve setTimeout(resolve, 1000)) const open ref(false) /script template AlertDialogRoot v-model:openopen AlertDialogTriggerOpen/AlertDialogTrigger AlertDialogPortal AlertDialogOverlay / AlertDialogContent form submit.prevent (event) { wait().then(() open false); } !-- some inputs -- button typesubmit Submit /button /form /AlertDialogContent /AlertDialogPortal /AlertDialogRoot /template关键点解读open为受控状态与v-model:open双向绑定表单提交事件使用submit.prevent阻止默认跳转wait()模拟 1 秒的异步请求Promise决议后再将open置为false对话框才会关闭这种方式同样适用于「确认删除后等待接口返回再关闭」等破坏性操作场景可有效防止用户重复点击或误关闭。示例二自定义 Portal 容器默认情况下AlertDialogPortal会把内容传送到body下若需要传送到页面内某个自定义元素中可通过:to指定一个模板引用refscript setup import { ref } from vue const container ref(null) /script template div AlertDialogRoot AlertDialogTrigger / AlertDialogPortal :tocontainer AlertDialogOverlay / AlertDialogContent.../AlertDialogContent /AlertDialogPortal /AlertDialogRoot div refcontainer / /div /templatecontainer是一个模板 refAlertDialogPortal的to属性会将它解析为 Teleport 目标与 Vue 内置Teleport :to用法一致。这在需要将对话框约束在特定布局容器如局部浮层区域时非常实用。无障碍Accessibility组件严格遵循 Alert and Message Dialogs WAI-ARIA 设计模式ARIA 规范参见文档 frontmatter 中的aria字段。这意味着对话框内容以rolealertdialog呈现配合AlertDialogTitle/AlertDialogDescription实现语义化的名称与描述打开时自动聚焦到「取消」按钮见下文实现分析焦点在对话框内循环背景页面保持不可交互。键盘交互按键行为Space打开 / 关闭对话框Enter打开 / 关闭对话框Tab将焦点移动到下一个可聚焦元素Shift Tab将焦点移动到上一个可聚焦元素Esc关闭对话框并将焦点交还给AlertDialogTrigger源码实现原理Alert Dialog 如何在 Dialog 之上强化约束Alert Dialog 在架构上并非从零实现而是复用仓库内 Dialog 组件的完整能力再叠加「模态 禁止外部交互 聚焦取消按钮」三条强制约束。1. Root强制开启模态modalpackages/core/src/AlertDialog/AlertDialogRoot.vue 中AlertDialogRoot直接代理DialogRoot并通过:modaltrue将模态属性硬编码为开启AlertDialogProps通过OmitDialogRootProps, modal对外屏蔽了modal选项DialogRoot v-slotslotProps v-bindforwarded :modaltrue slot v-bindslotProps / /DialogRoot也就是说普通 Dialog 可以选择非模态而 Alert Dialog 从类型系统和渲染层双重保证了「只能是模态」。2. Contentalertdialog 角色 禁止外部指针交互packages/core/src/AlertDialog/AlertDialogContent.vue 在DialogContent之上做了三处关键强化强制rolealertdialog让辅助技术将其识别为警示对话框而非普通对话框通过pointer-down-outside.prevent与interact-outside.prevent阻止点击遮罩/外部区域关闭的行为——这正是 Alert Dialog 与普通 Dialog 在交互模型上的本质区别通过open-auto-focus在打开后nextTick将焦点自动落到「取消」按钮cancelElement.focus({ preventScroll: true })取消按钮的元素引用则由provideAlertDialogContentContext注入的onCancelElementChange回调收集。3. 测试验证axe 无障碍扫描 焦点与指针锁定断言packages/core/src/AlertDialog/AlertDialog.test.ts 中的自动化测试印证了上述行为对话框打开前后均通过vitest-axe的 axe 无障碍扫描toHaveNoViolations点击 Trigger 后内容成功渲染且焦点位于「Cancel」按钮cancelButton.at(-1) document.activeElement打开时document.body的pointer-events被置为none锁定背景交互同时对话框内容自身保持pointer-events: auto可正常操作content.style.pointerEvents auto。这套「文档示例 源码实现 测试断言」三者互证的组合也适用于仓库内其他对话框类组件如 Dialog、Drawer的阅读参考。小结Alert Dialog 是 reka-ui 组件库中一个「小而严」的模态组件它通过复用 Dialog 的底层能力对外只暴露面向警示场景的强制约束模态、禁外部关闭、聚焦取消按钮、读屏播报。实际开发中你只需掌握三件事即可上手拼装 AnatomyRoot Trigger Portal Overlay Content Title Description Cancel Action选择状态模式非受控用defaultOpen受控用v-model:open异步关闭场景必须用受控遵守无障碍约定保留Title/Description播报结构Cancel 与 Action 视觉上明确区分。如需查看完整文档与更多细节可继续阅读仓库内的 alert-dialog.md、各部件参数定义 docs/content/meta 目录以及组件源码 packages/core/src/AlertDialog。【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 reka-ui Alert Dialog 完全指南：无障碍模态对话框的组件剖析与实战（radix-vue）
reka-ui Alert Dialog 完全指南无障碍模态对话框的组件剖析与实战radix-vue【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vueAlert Dialog警示对话框是一种以模态形式打断用户操作、展示重要信息并要求用户明确回应的对话框组件。本文以 radix-vue 仓库即 reka-ui 的前身中的 Alert Dialog 组件文档为主体结合 packages/core/src/AlertDialog 下的源码实现与自动化测试系统讲解该组件的安装方式、Anatomy 组合结构、完整 API 参数表、两个高频实战示例异步表单提交后关闭、自定义 Portal 容器以及其背后基于 WAI-ARIA Alert and Message Dialogs 模式的键盘交互与无障碍实现原理。读完本文你将能够在自己的 Vue 3 项目中独立搭建一个具备焦点陷阱、屏幕阅读器播报、Esc 关闭等能力的高质量警示对话框。组件定位与核心能力Alert Dialog 是一个模态对话框它在打开时遮罩Overlay并锁定页面的其余部分强制用户先对其中内容作出回应。根据 docs/content/docs/components/alert-dialog.md 的定义其核心特性包括焦点自动锁定Focus is automatically trapped对话框打开后键盘 Tab 循环被限制在对话框内部避免焦点逃逸到背景页面。受控与非受控皆可Can be controlled or uncontrolled既可以使用defaultOpen走非受控模式也可以使用v-model:open完全掌控开关状态。屏幕阅读器播报管理通过AlertDialogTitle与AlertDialogDescription组件自动为对话框提供可访问名称与可访问描述便于辅助技术如读屏软件在打开时播报。Esc 自动关闭按下 Esc 键会关闭对话框并将焦点交还给触发器。值得注意的是与普通Dialog不同Alert Dialog 不允许通过点击遮罩或点击外部区域关闭——用户必须通过对话框内的操作按钮如「确认」「取消」或 Esc 键来结束交互。这一点在源码层面有明确体现下文「实现原理」章节会详细展开。安装在命令行中安装组件当前仓库的文档示例以reka-ui作为包名导入即此前 Radix Vue 的延续npm install reka-ui # 或 pnpm add reka-ui # 或 yarn add reka-ui安装完成后即可在 Vue 3script setup组件中按需导入 Alert Dialog 的各组成部分。Anatomy组件的组成结构Alert Dialog 由 9 个可组合的部分组成。按照 docs/content/docs/components/alert-dialog.md 的规范示例将它们拼接起来的最小结构如下script setup langts import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, } from reka-ui /script template AlertDialogRoot AlertDialogTrigger / AlertDialogPortal AlertDialogOverlay / AlertDialogContent AlertDialogTitle / AlertDialogDescription / AlertDialogCancel / AlertDialogAction / /AlertDialogContent /AlertDialogPortal /AlertDialogRoot /template各部分职责一览部件职责AlertDialogRoot容纳所有部件的容器管理开关状态AlertDialogTrigger打开对话框的按钮AlertDialogPortal将 Overlay 与 Content 传送teleport到body下避免被父级overflow、z-index等样式干扰AlertDialogOverlay覆盖视口非交互区域的遮罩层AlertDialogContent对话框主体内容在打开时渲染AlertDialogCancel关闭对话框的「取消」按钮视觉上应与 Action 按钮区分AlertDialogAction关闭对话框的「确认」按钮视觉上应与 Cancel 按钮区分AlertDialogTitle对话框的可访问名称打开时被读屏软件播报AlertDialogDescription对话框的可访问描述打开时被读屏软件播报API ReferenceRootAlertDialogRoot包含警示对话框的所有部件。参数定义见 docs/content/meta/AlertDialogRoot.md。Props名称类型必填说明defaultOpenboolean否对话框首次渲染时的初始打开状态用于无需外部控制打开状态的场景openboolean否受控的打开状态可通过v-model:open双向绑定unmountOnHideboolean否设为false时对话框关闭后内容不会被卸载而是用 CSS 隐藏对 SEO 友好也能避免每次打开都重新挂载组件带来的性能开销Events名称类型update:open[value: boolean]打开状态变化时触发Slots名称类型openboolean当前打开状态close(): void关闭对话框的函数TriggerAlertDialogTrigger一个用于打开对话框的按钮默认渲染为button。Props名称类型必填默认值说明asAsTag \| Component否button组件实际渲染为的元素或组件会被asChild覆盖asChildboolean否-将默认渲染元素替换为传入的子元素并合并其 props 与行为组合模式数据属性Data Attributes属性值[data-state]open/closed反映对话框当前开关状态可用于样式编写PortalAlertDialogPortal使用该组件后Overlay 与 Content 会被传送到body中。参数定义见 docs/content/meta/AlertDialogPortal.md。Props名称类型必填说明tostring \| HTMLElement否Vue 原生 Teleport 组件的:to目标disabledboolean否禁用 Teleport改为就地渲染对应 Vue 官方disabled语义deferboolean否延迟解析 Teleport 目标直到应用其他部分挂载完成需 Vue 3.5.0forceMountboolean否强制挂载便于配合 Vue 动画库控制显隐动画OverlayAlertDialogOverlay对话框打开时覆盖在视口非交互区域之上的遮罩层默认渲染为div。Props名称类型必填默认值说明asAsTag \| Component否div渲染为的元素或组件asChildboolean否-组合模式开关forceMountboolean否-强制挂载用于动画控制数据属性属性值[data-state]open/closedContentAlertDialogContent对话框主体在打开时渲染默认渲染为div。参数定义见 docs/content/meta/AlertDialogContent.md。Props名称类型必填默认值说明asAsTag \| Component否div渲染为的元素或组件asChildboolean否-组合模式开关disableOutsidePointerEventsboolean否-为true时禁用 DismissableLayer 之外元素的 hover/focus/click 交互用户需在外部元素上点击两次才能触发它第一次用于关闭层forceMountboolean否-强制挂载用于动画控制Events均可通过event.preventDefault()阻止默认行为名称类型说明openAutoFocus[event: Event]打开时自动聚焦回调closeAutoFocus[event: Event]关闭时自动聚焦回调escapeKeyDown[event: KeyboardEvent]按下 Esc 键时触发pointerDownOutside[event: PointerDownOutsideEvent]在层外部发生pointerdown时触发focusOutside[event: FocusOutsideEvent]焦点移出该层时触发interactOutside[event: PointerDownOutsideEvent \| FocusOutsideEvent]在层外发生交互外部pointerdown或焦点移出时触发数据属性属性值[data-state]open/closedCancel 与 ActionAlertDialogCancel/AlertDialogAction两者都是关闭对话框的按钮默认渲染为button仅视觉定位不同Cancel 应视觉上与 Action 区分通常是次要样式Action 则应视觉上与 Cancel 区分通常是强调样式以此引导用户对破坏性操作保持警觉。Props两者一致见 docs/content/meta/AlertDialogCancel.md 与 docs/content/meta/AlertDialogAction.md名称类型必填默认值说明asAsTag \| Component否button渲染为的元素或组件asChildboolean否-组合模式开关Title 与 DescriptionAlertDialogTitle/AlertDialogDescriptionAlertDialogTitle对话框的可访问名称accessible name默认渲染为h2打开时被读屏软件播报。你也可以直接在AlertDialogContent上提供aria-label或aria-labelledby并省略该组件。AlertDialogDescription对话框的可访问描述默认渲染为p打开时被读屏软件播报。同理也可以改用AlertDialogContent上的aria-describedby并省略该组件。两者 Props 均为as默认值分别为h2与p和asChild详见 docs/content/meta/AlertDialogTitle.md 与 docs/content/meta/AlertDialogDescription.md。实战示例示例一异步表单提交完成后关闭使用受控属性v-model:open在异步操作如请求后端接口完成后再程序化关闭对话框避免表单数据尚未提交完成就提前关闭。完整示例见 docs/content/docs/components/alert-dialog.mdscript setup import { AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, } from reka-ui const wait () new Promise(resolve setTimeout(resolve, 1000)) const open ref(false) /script template AlertDialogRoot v-model:openopen AlertDialogTriggerOpen/AlertDialogTrigger AlertDialogPortal AlertDialogOverlay / AlertDialogContent form submit.prevent (event) { wait().then(() open false); } !-- some inputs -- button typesubmit Submit /button /form /AlertDialogContent /AlertDialogPortal /AlertDialogRoot /template关键点解读open为受控状态与v-model:open双向绑定表单提交事件使用submit.prevent阻止默认跳转wait()模拟 1 秒的异步请求Promise决议后再将open置为false对话框才会关闭这种方式同样适用于「确认删除后等待接口返回再关闭」等破坏性操作场景可有效防止用户重复点击或误关闭。示例二自定义 Portal 容器默认情况下AlertDialogPortal会把内容传送到body下若需要传送到页面内某个自定义元素中可通过:to指定一个模板引用refscript setup import { ref } from vue const container ref(null) /script template div AlertDialogRoot AlertDialogTrigger / AlertDialogPortal :tocontainer AlertDialogOverlay / AlertDialogContent.../AlertDialogContent /AlertDialogPortal /AlertDialogRoot div refcontainer / /div /templatecontainer是一个模板 refAlertDialogPortal的to属性会将它解析为 Teleport 目标与 Vue 内置Teleport :to用法一致。这在需要将对话框约束在特定布局容器如局部浮层区域时非常实用。无障碍Accessibility组件严格遵循 Alert and Message Dialogs WAI-ARIA 设计模式ARIA 规范参见文档 frontmatter 中的aria字段。这意味着对话框内容以rolealertdialog呈现配合AlertDialogTitle/AlertDialogDescription实现语义化的名称与描述打开时自动聚焦到「取消」按钮见下文实现分析焦点在对话框内循环背景页面保持不可交互。键盘交互按键行为Space打开 / 关闭对话框Enter打开 / 关闭对话框Tab将焦点移动到下一个可聚焦元素Shift Tab将焦点移动到上一个可聚焦元素Esc关闭对话框并将焦点交还给AlertDialogTrigger源码实现原理Alert Dialog 如何在 Dialog 之上强化约束Alert Dialog 在架构上并非从零实现而是复用仓库内 Dialog 组件的完整能力再叠加「模态 禁止外部交互 聚焦取消按钮」三条强制约束。1. Root强制开启模态modalpackages/core/src/AlertDialog/AlertDialogRoot.vue 中AlertDialogRoot直接代理DialogRoot并通过:modaltrue将模态属性硬编码为开启AlertDialogProps通过OmitDialogRootProps, modal对外屏蔽了modal选项DialogRoot v-slotslotProps v-bindforwarded :modaltrue slot v-bindslotProps / /DialogRoot也就是说普通 Dialog 可以选择非模态而 Alert Dialog 从类型系统和渲染层双重保证了「只能是模态」。2. Contentalertdialog 角色 禁止外部指针交互packages/core/src/AlertDialog/AlertDialogContent.vue 在DialogContent之上做了三处关键强化强制rolealertdialog让辅助技术将其识别为警示对话框而非普通对话框通过pointer-down-outside.prevent与interact-outside.prevent阻止点击遮罩/外部区域关闭的行为——这正是 Alert Dialog 与普通 Dialog 在交互模型上的本质区别通过open-auto-focus在打开后nextTick将焦点自动落到「取消」按钮cancelElement.focus({ preventScroll: true })取消按钮的元素引用则由provideAlertDialogContentContext注入的onCancelElementChange回调收集。3. 测试验证axe 无障碍扫描 焦点与指针锁定断言packages/core/src/AlertDialog/AlertDialog.test.ts 中的自动化测试印证了上述行为对话框打开前后均通过vitest-axe的 axe 无障碍扫描toHaveNoViolations点击 Trigger 后内容成功渲染且焦点位于「Cancel」按钮cancelButton.at(-1) document.activeElement打开时document.body的pointer-events被置为none锁定背景交互同时对话框内容自身保持pointer-events: auto可正常操作content.style.pointerEvents auto。这套「文档示例 源码实现 测试断言」三者互证的组合也适用于仓库内其他对话框类组件如 Dialog、Drawer的阅读参考。小结Alert Dialog 是 reka-ui 组件库中一个「小而严」的模态组件它通过复用 Dialog 的底层能力对外只暴露面向警示场景的强制约束模态、禁外部关闭、聚焦取消按钮、读屏播报。实际开发中你只需掌握三件事即可上手拼装 AnatomyRoot Trigger Portal Overlay Content Title Description Cancel Action选择状态模式非受控用defaultOpen受控用v-model:open异步关闭场景必须用受控遵守无障碍约定保留Title/Description播报结构Cancel 与 Action 视觉上明确区分。如需查看完整文档与更多细节可继续阅读仓库内的 alert-dialog.md、各部件参数定义 docs/content/meta 目录以及组件源码 packages/core/src/AlertDialog。【免费下载链接】radix-vueAn open-source UI component library for building high-quality, accessible design systems and web apps for Vue. Previously Radix Vue项目地址: https://gitcode.com/GitHub_Trending/ra/radix-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考