Guide

How to use APG Patterns Examples for building accessible components.

Using with AI Code Assistants

Each pattern includes an AI-friendly definition file (llm.md) that can be used as context when implementing similar components with AI coding assistants like Claude, Cursor, or GitHub Copilot.

What's included in llm.md

ARIA roles, properties, and states requirements
Keyboard interaction specifications
Focus management rules
Test checklist for verification
Example test code snippets

How to use

1. Copy & paste into prompt

Copy the content and include it in your prompt when asking AI to implement a component.

Implement a Tabs component in Angular following this specification:

[paste llm.md content here]

2. Add to project context

For Claude Code or Cursor, place definition files in your project for automatic context.

my-project/
├── .ai/
│   └── apg-patterns/
│       ├── tabs.md
│       ├── dialog.md
│       └── accordion.md
└── src/

3. Use for test generation

The test checklist helps AI generate comprehensive accessibility tests.

Generate Jest tests for my Tabs component based on this checklist:

## Test Checklist
- [ ] ArrowRight moves to next tab
- [ ] Selected tab has aria-selected="true"
- [ ] Only selected tab has tabIndex="0"

Available Patterns

The following patterns have AI-friendly definition files:

Accordion

Vertically stacked headings that reveal content sections.

Alert

Live region for important, time-sensitive messages.

Breadcrumb

Navigation trail showing page location in hierarchy.

Toggle Button

Two-state button with aria-pressed for toggle actions.

Dialog

Modal window with focus trap and keyboard support.

Disclosure

Simple show/hide toggle for content visibility.

Listbox

Selection widget with single and multi-select modes.

Switch

On/off toggle with aria-checked state.

Tabs

Layered content sections with roving tabindex.

Toolbar

Container for grouped controls with arrow key navigation.

Tooltip

Contextual popup for element descriptions.

Direct Links to llm.md

Copy these URLs directly or fetch them with AI tools:

Contributing

Help us add more AI-friendly definitions! Visit our GitHub repository to contribute.