angular-sanctuary/angular-aria

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 |