Angular Comic Store

A living demo and homework repository for the conference talk: "Accessibility Testing Pyramid in Angular with Nx"

About

This repository accompanies a conference session on building accessible Angular applications with a clear, layered testing strategy inside an Nx monorepo.

It serves two purposes:

1. Live demo -- each feature illustrates a specific layer of the accessibility testing pyramid.
2. Homework assignments -- numbered tasks that let attendees practice each concept hands-on.

Accessibility Testing Pyramid

The talk introduces a four-layer pyramid that moves from fast, automated checks at the base to high-fidelity, real-user validation at the top.

graph BT
    Unit["Unit Tests\nVitest + axe-core + Component Harness"]
    Integration["Integration Tests\nGuidepup — VoiceOver / NVDA"]
    E2E["Story Tests\nStorybook Play Functions"]
    Generators["Scaffolding\nNx Generators"]

    Unit --> Integration --> E2E --> Generators

Loading

Layer	Tool	What it covers
Unit	Vitest, axe-core, Angular Component Harness	WCAG violations (contrast, ARIA, roles, labels), focus management, keyboard navigation, dynamic aria updates, interactive states
Integration	Guidepup (VoiceOver / NVDA)	Reading order, screen-reader announcements, operability for non-visual users
Story / E2E	Storybook Play Functions	Full component stories, themes, tokens, interaction paths inside the design system
Scaffolding	Nx Generators	Auto-generate accessible components, harnesses, stories, and tests so a11y is built-in from the start

Tech Stack

Category	Technology
Framework	Angular 21
Monorepo	Nx 22.5
UI Components	Angular Material
State Management	NgRx (SignalStore)
Unit Testing	Vitest, axe-core, Angular Component Harness
E2E Testing	Playwright
Screen Reader Testing	Guidepup
Component Workshop	Storybook
Linting	ESLint, Prettier
Styles	SCSS

Monorepo Structure

angular-comic-store/
├── apps/
│   ├── angular-comic-store/    # Main application
│   └── angular-comic-store-e2e/ # Playwright e2e tests
├── libs/                        # Shared libraries (feature, UI, data-access, util)
├── tools/                       # Nx generators and workspace scripts
├── TASKS.md                     # Numbered task index
├── CONTRIBUTING.md              # Contributor guidelines
└── nx.json                      # Nx workspace configuration

Libraries will follow Nx library-type conventions:

Type	Purpose	Example
feature	Smart components, pages, routing	libs/comics/feature-browse
ui	Presentational (dumb) components	libs/shared/ui-card
data-access	State management, API services	libs/comics/data-access
util	Pure functions, helpers, pipes	libs/shared/util-a11y

Getting Started

Prerequisites

• Node.js >= 20
• npm >= 10

Install

git clone https://github.com/<your-username>/angular-comic-store.git
cd angular-comic-store
npm install

Develop

npx nx serve angular-comic-store

Test

# Unit tests
npx nx test angular-comic-store

# Lint
npx nx lint angular-comic-store

# E2E
npx nx e2e angular-comic-store-e2e

Visualize the project graph

npx nx graph

Task Index

All tasks are tracked in TASKS.md. Each task has a sequential number that never changes once assigned. See that file for the full list with statuses and branch references.

Resources

• WCAG 2.2 Quick Reference
• axe-core
• Angular CDK Accessibility
• Angular Component Harness
• Guidepup
• Storybook Accessibility Addon
• Nx Documentation

License

MIT