About angular-aria
angular-aria is a headless directive collection for Angular developers building custom accessible interfaces. It implements common WAI-ARIA patterns while leaving HTML structure, styling, and business logic to the application.
Key features
- 01Keyboard interaction and focus management
- 02ARIA attributes and screen reader support
- 03Search and selection patterns
- 04Menu, toolbar, and navigation patterns
- 05Accordion, tab, tree, and grid patterns
Use cases
- 01Build custom accessible UI components
- 02Add keyboard navigation to interactive widgets
- 03Implement autocomplete, combobox, or multiselect inputs
- 04Create menus, tabs, or tree components
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/angular-ariain Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with 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.mdDetails
From the project READMEThe skill is based on Angular Aria (from Angular repository), generated at 2026-02-02.
Angular Aria is a collection of headless, accessible directives that implement common WAI-ARIA patterns. The directives handle keyboard interactions, ARIA attributes, focus management, and screen reader support—you provide the HTML structure, CSS styling, and business logic.
Install via npm install @angular/aria.
When to Apply
Use this skill when:
- Building custom accessible UI components that need WAI-ARIA compliance
- Implementing keyboard navigation patterns (arrow keys, Enter, Escape, Tab)
- Adding focus management to interactive widgets
- Creating headless/unstyled UI primitives with custom styling
- Building autocomplete, combobox, listbox, select, or multiselect inputs
- Implementing menus, menubars, or toolbars with proper ARIA roles
- Creating accordion, tabs, tree, or grid patterns
- Needing screen reader support for custom components
Do NOT use this skill when:
- Using Angular Material components (they have built-in accessibility)
- Building simple forms with native HTML elements
- The WAI-ARIA pattern you need is not covered by Angular Aria
Core
| Topic | Description | Reference |
|---|---|---|
| Overview | Introduction to Angular Aria, when to use, what's included | core-overview |
Search and Selection
| Topic | Description | Reference |
|---|---|---|
| Autocomplete | Text input with filtered suggestions as users type | selection-autocomplete |
| Combobox | Primitive directive coordinating text input with popup | selection-combobox |
| Listbox | Single or multi-select option lists with keyboard navigation | selection-listbox |
| Select | Single-selection dropdown pattern | selection-select |
| Multiselect | Multiple-selection dropdown with compact display | selection-multiselect |
Navigation and Actions
| Topic | Description | Reference |
|---|---|---|
| Menu | Dropdown menus with nested submenus and keyboard shortcuts | navigation-menu |
| Menubar | Horizontal navigation bar for persistent application menus | navigation-menubar |
| Toolbar | Grouped sets of controls with logical keyboard navigation | navigation-toolbar |
Content Organization
| Topic | Description | Reference |
|---|---|---|
| Accordion | Collapsible content panels with expand/collapse | content-accordion |
| Tabs | Tabbed interfaces with automatic or manual activation | content-tabs |
| Tree | Hierarchical lists with expand/collapse | content-tree |
| Grid | Two-dimensional data with cell-by-cell keyboard navigation | content-grid |