The 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 |
1---2name: angular-aria3description: Headless accessible UI primitives implementing WAI-ARIA patterns for Angular4---56> The skill is based on Angular Aria (from Angular repository), generated at 2026-02-02.78Angular 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.910Install via `npm install @angular/aria`.1112## When to Apply1314Use this skill when:1516- Building **custom accessible UI components** that need WAI-ARIA compliance17- Implementing **keyboard navigation** patterns (arrow keys, Enter, Escape, Tab)18- Adding **focus management** to interactive widgets19- Creating **headless/unstyled** UI primitives with custom styling20- Building **autocomplete**, **combobox**, **listbox**, **select**, or **multiselect** inputs21- Implementing **menus**, **menubars**, or **toolbars** with proper ARIA roles22- Creating **accordion**, **tabs**, **tree**, or **grid** patterns23- Needing **screen reader support** for custom components2425Do NOT use this skill when:2627- Using Angular Material components (they have built-in accessibility)28- Building simple forms with native HTML elements29- The WAI-ARIA pattern you need is not covered by Angular Aria3031## Core3233| Topic | Description | Reference |34|-------|-------------|-----------|35| Overview | Introduction to Angular Aria, when to use, what's included | [core-overview](references/core-overview.md) |3637## Search and Selection3839| Topic | Description | Reference |40|-------|-------------|-----------|41| Autocomplete | Text input with filtered suggestions as users type | [selection-autocomplete](references/selection-autocomplete.md) |42| Combobox | Primitive directive coordinating text input with popup | [selection-combobox](references/selection-combobox.md) |43| Listbox | Single or multi-select option lists with keyboard navigation | [selection-listbox](references/selection-listbox.md) |44| Select | Single-selection dropdown pattern | [selection-select](references/selection-select.md) |45| Multiselect | Multiple-selection dropdown with compact display | [selection-multiselect](references/selection-multiselect.md) |4647## Navigation and Actions4849| Topic | Description | Reference |50|-------|-------------|-----------|51| Menu | Dropdown menus with nested submenus and keyboard shortcuts | [navigation-menu](references/navigation-menu.md) |52| Menubar | Horizontal navigation bar for persistent application menus | [navigation-menubar](references/navigation-menubar.md) |53| Toolbar | Grouped sets of controls with logical keyboard navigation | [navigation-toolbar](references/navigation-toolbar.md) |5455## Content Organization5657| Topic | Description | Reference |58|-------|-------------|-----------|59| Accordion | Collapsible content panels with expand/collapse | [content-accordion](references/content-accordion.md) |60| Tabs | Tabbed interfaces with automatic or manual activation | [content-tabs](references/content-tabs.md) |61| Tree | Hierarchical lists with expand/collapse | [content-tree](references/content-tree.md) |62| Grid | Two-dimensional data with cell-by-cell keyboard navigation | [content-grid](references/content-grid.md) |
angular-sanctuary