angular-aria.md

@angular/aria Implementation Guide

Complete implementation guide for @angular/aria library with code examples from the official Angular documentation.

Installation

npm install @angular/aria
# or with Angular CLI
ng add @angular/aria

Available Patterns

Search and Selection

• Autocomplete - Text input with filtered suggestions
• Listbox - Single or multi-select option lists
• Select - Single-selection dropdown
• Multiselect - Multiple-selection dropdown
• Combobox - Text input coordinated with popup

Navigation and Call to Actions

• Menu - Dropdown menus with submenus
• Menubar - Horizontal application menus
• Toolbar - Grouped controls with keyboard navigation

Content Organization

• Accordion - Collapsible content panels
• Tabs - Tabbed interfaces
• Tree - Hierarchical lists
• Grid - Two-dimensional data display

Examples

Tabs

import { Component } from '@angular/core';
import { Tab, Tabs, TabList, TabPanel, TabContent } from '@angular/aria/tabs';
@Component({
  selector: 'app-root',
  template: `<div ngTabs>
    <div ngTabList selectionMode="follow" selectedTab="movie">
      <div ngTab value="movie">Movie</div>
      <div ngTab value="theatres">Cast</div>
      <div ngTab value="showtimes">Reviews</div>
    </div>
    <div class="sliding-window">
      <div ngTabPanel [preserveContent]="true" value="movie">
        <ng-template ngTabContent>Panel 1</ng-template>
      </div>
      <div ngTabPanel [preserveContent]="true" value="theatres">
        <ng-template ngTabContent>Panel 2</ng-template>
      </div>
      <div ngTabPanel [preserveContent]="true" value="showtimes">
        <ng-template ngTabContent>Panel 3</ng-template>
      </div>
    </div>
  </div>`,
  styles: `
    :host {
      font-family: var(--inter-font);
      display: flex;
      justify-content: center;
    }
    [ngTabs] {
      overflow: hidden;
      width: 600px;
      border-radius: 0.5rem;
      border: 1px solid
        color-mix(in srgb, var(--primary-contrast) 10%, transparent);
    }
    [ngTabList] {
      padding: 0;
      display: flex;
      list-style: none;
      position: relative;
      border-bottom: 1px solid
        color-mix(in srgb, var(--primary-contrast) 10%, transparent);
    }
    [ngTab] {
      flex: 1;
      outline: none;
      padding: 0.75rem 0;
      cursor: pointer;
      text-align: center;
      color: color-mix(in srgb, var(--primary-contrast) 60%, transparent);
    }
    [ngTab][aria-selected='false']:focus {
      outline-offset: -8px;
      border-radius: 0.7rem;
      outline: 2px solid var(--bright-blue);
    }
    [ngTab]:hover {
      background-color: color-mix(in srgb, var(--bright-blue) 5%, transparent);
    }
    [ngTab][aria-selected='true'] {
      color: var(--page-background);
      background-color: var(--bright-blue);
      border-top-left-radius: 0.5rem;
      border-top-right-radius: 0.5rem;
    }
    .sliding-window {
      width: 300%;
      display: flex;
      transition: all 0.2s ease-in-out;
    }
    [ngTabList]:has([ngTab]:nth-child(1)[aria-selected='true'])
      ~ .sliding-window {
      transform: translateX(0%);
    }
    [ngTabList]:has([ngTab]:nth-child(2)[aria-selected='true'])
      ~ .sliding-window {
      transform: translateX(-33.333%);
    }
    [ngTabList]:has([ngTab]:nth-child(3)[aria-selected='true'])
      ~ .sliding-window {
      transform: translateX(-66.666%);
    }
    [ngTabPanel] {
      display: grid;
      place-items: center;
      padding: 1rem;
      min-height: 100px;
      flex: 1;
      border-bottom-right-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
    }
    [ngTabPanel]:focus {
      outline-offset: -4px;
      border-radius: 0.5rem;
      outline: 2px solid var(--bright-blue);
    }
  `,
  imports: [TabList, Tab, Tabs, TabPanel, TabContent],
})
export class App {}

Best Practices

1. Use semantic HTML - Native elements have built-in accessibility
2. Try to use Angular ARIA directives - They handle ARIA attributes and patterns for you