关于 angular-aria
angular-aria 是面向 Angular 开发者的无样式无障碍指令集合，用于构建自定义界面。它实现常见 WAI-ARIA 模式，同时由开发者负责 HTML 结构、样式和业务逻辑。
主要功能
- 01键盘交互与焦点管理
- 02ARIA 属性和屏幕阅读器支持
- 03搜索与选择控件模式
- 04菜单、工具栏和导航模式
- 05手风琴、标签页、树和网格模式
适用场景
- 01构建自定义无障碍界面组件
- 02为交互控件添加键盘导航
- 03实现自动完成、组合框或多选
- 04创建菜单、标签页或树形组件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/angular-aria确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
GENERATION.mdreferences/content-accordion.mdcontent-grid.mdcontent-tabs.mdcontent-tree.mdcore-overview.mdnavigation-menu.mdnavigation-menubar.mdnavigation-toolbar.mdselection-autocomplete.mdselection-combobox.mdselection-listbox.mdselection-multiselect.mdselection-select.md详细介绍
此技能基于 Angular Aria（来自 Angular 仓库），生成于 2026-02-02。
Angular Aria 是一组无头、易于访问的指令，用于实现常见的 WAI-ARIA 模式。这些指令负责键盘交互、ARIA 属性、焦点管理和屏幕阅读器支持；HTML 结构、CSS 样式和业务逻辑由你提供。
通过 npm install @angular/aria 安装。
适用场景
在以下情况下使用此技能：
- 构建需要符合 WAI-ARIA 标准的自定义无障碍 UI 组件
- 实现键盘导航模式（方向键、Enter、Escape、Tab）
- 为交互式小组件添加焦点管理
- 创建可自定义样式的无头/无样式 UI 基元
- 构建自动补全、组合框、列表框、选择框或多选输入
- 实现具有适当 ARIA 角色的菜单、菜单栏或工具栏
- 创建手风琴、标签页、树或网格模式
- 为自定义组件提供屏幕阅读器支持
以下情况请勿使用此技能：
- 使用 Angular Material 组件（它们内置了无障碍支持）
- 使用原生 HTML 元素构建简单表单
- 所需的 WAI-ARIA 模式不在 Angular Aria 的支持范围内
核心
| 主题 | 描述 | 参考 |
|---|---|---|
| 概览 | Angular Aria 简介、适用场景及包含内容 | core-overview |
搜索与选择
| 主题 | 描述 | 参考 |
|---|---|---|
| 自动补全 | 文本输入框，用户输入时显示筛选后的建议 | selection-autocomplete |
| 组合框 | 用于协调文本输入框与弹出层的基础指令 | selection-combobox |
| 列表框 | 支持单选或多选并可通过键盘导航的选项列表 | selection-listbox |
| 选择框 | 单选下拉模式 | selection-select |
| 多选 | 以紧凑形式显示的多选下拉框 | selection-multiselect |
导航与操作
| 主题 | 描述 | 参考 |
|---|---|---|
| 菜单 | 带有嵌套子菜单和键盘快捷键的下拉菜单 | navigation-menu |
| 菜单栏 | 用于常驻应用菜单的水平导航栏 | navigation-menubar |
| 工具栏 | 具有逻辑键盘导航的控件分组 | navigation-toolbar |
内容组织
| 主题 | 描述 | 参考 |
|---|---|---|
| 手风琴 | 可展开和折叠的内容面板 | content-accordion |
| 标签页 | 支持自动或手动激活的标签页界面 | content-tabs |
| 树 | 支持展开和折叠的层级列表 | content-tree |
| 网格 | 支持逐单元格键盘导航的二维数据 | content-grid |
评论
支持 Markdown