Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ its purpose, trigger phrases, and full instructions.

| Skill | Description |
|------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|
| **[accessibility-infra-setup](./skills/accessibility-infra-setup/)** | Set up automated accessibility (a11y) check infrastructure in an existing Angular app with Playwright + axe-core (WCAG 2.2 AA) — detects existing test setup, scaffolds config, a shared axe fixture, one dummy example scan, npm scripts, and docs, then validates the sample passes. |
| **[bdd-maintain](./skills/bdd-maintain/)** | REMOVE and DEAD CODE AUDIT modes — delete feature files, step definitions, and PageObjects linked to
| **[create-repository](./skills/create-repository/)** | Creates and configures a GitHub repository under AbsaOSS (open source) or absa-group (internal). Runs a short interview, then shows an annotated `gh` command plan and executes it on confirmation — visibility, naming, admins, CODEOWNERS, labels, merge settings, and project links. |
| **[data-cy-instrument](./skills/data-cy-instrument/)** | Resolve missing `data-cy` attributes in Angular component templates and sync PageObjects to use `getByTestId()` — run after a crawl when `coverage_gaps` are non-empty. |
Expand Down
1 change: 1 addition & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ Task-specific guidance for using individual skills. Start by picking your use ca

| Guide | Description |
|---|---|
| [Accessibility Infra Setup](./guides/accessibility-infra-setup.md) | Bootstrap Playwright + axe-core a11y infrastructure in an Angular app (WCAG 2.2 AA) — config, shared fixture, one example scan, npm scripts, docs |
| [TDD Workflow](./guides/tdd-workflow.md) | Test-driven development with: specification, confirmation gates, and vertical-sliced implementation |
| [Unit Test Standards](./guides/test-unit-standards.md) | Reference for unit test standards across isolation, scope, naming, assertions, coverage, fixtures |
| [Unit Test Writer](./guides/test-unit-write.md) | Generate complete unit tests from scratch following language-specific standards |
Expand Down
94 changes: 94 additions & 0 deletions docs/guides/accessibility-infra-setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# Accessibility Infra Setup Skill

The `accessibility-infra-setup` skill bootstraps automated accessibility (a11y) check infrastructure in an existing Angular application using [Playwright](https://playwright.dev/) + [axe-core](https://github.com/dequelabs/axe-core) (`@axe-core/playwright`). It scaffolds the plumbing to catch automatically detectable **WCAG 2.2 AA** violations and proves it works with one passing example scan.

It activates when you ask to set up accessibility checks, add a11y testing infrastructure, or wire axe-core into an Angular app.

---

## What it does

The skill extends your existing test setup rather than replacing it, then validates the result end to end:

| Step | Action |
|------|--------|
| Detect | Inspects `package.json`, the dev-server script, package manager, and any existing Playwright / Cypress setup |
| Install | Adds `@playwright/test` + `@axe-core/playwright` and installs the Chromium browser |
| Scaffold | Creates `playwright.config.ts`, a shared axe fixture, and one dummy example scan |
| Wire scripts | Adds `test:a11y*` npm scripts to `package.json` |
| Validate | Runs the dummy scan until it passes green — the definition of done |
| Document | Adds `docs/accessibility.md` (or `playwright/README.md`) with how to run and where reports land |

**Scope:** infrastructure plus exactly **one** dummy example scan. Authoring real accessibility tests, fixing violations, and CI wiring are all out of scope.

---

## Expected outcome

After the skill runs, the repository contains:

```
playwright/
├── fixtures/
│ └── axe-helpers.ts # Shared axe fixture (WCAG 2.2 AA tags) + assertion/incomplete-warning helpers
├── print-a11y-warnings.js # Prints tests carrying incomplete-result warnings
└── a11y/
└── example.accessibility.spec.ts # ONE dummy scan of static, known-compliant HTML — passes
playwright.config.ts # `accessibility` project (Desktop Chrome, testMatch /\.accessibility\.spec\.ts$/)
docs/accessibility.md # How to run, where reports land
```

Running `npm run test:a11y` starts the dev server and runs the dummy scan on Desktop Chrome against
static, known-compliant HTML (via `page.setContent`, not a real app route), so it passes green
regardless of whether the app itself is WCAG-compliant yet — fixing app violations is a separate,
out-of-scope concern. axe `violations` fail the test; `incomplete` results (findings axe couldn't
confirm without human judgement) are non-blocking — they're surfaced as a warning annotation
instead. Run `npm run test:a11y:incomplete` to print any without opening the HTML report.

---

## How to trigger it

Ask naturally — the skill fires on intent, not exact wording:

```
set up accessibility checks
add a11y testing infrastructure
add axe-core to this Angular app
set up WCAG testing
add accessibility scans with Playwright
bootstrap a11y infra
```

---

## Requirements

- An existing Angular application with a runnable dev server (`npm run start` on port 4200)
- Node.js 22+
- Network access on first run (Playwright downloads the Chromium browser)

---

## Coexistence rules

- **Never touches Cypress.** If the repo uses Cypress, its config, specs, and dependencies are left untouched — Playwright is added alongside it.
- **Extends, doesn't recreate Playwright.** When a `playwright.config.*` already exists, the skill merges an `accessibility` project into it and reuses any existing axe fixture instead of adding a duplicate.

---

## Installation

The skill is installed along with the rest of the toolkit:

```bash
npx skills add https://github.com/AbsaOSS/agentic-toolkit -g
```

To install only this skill:

```bash
npx skills add https://github.com/AbsaOSS/agentic-toolkit -g --skill accessibility-infra-setup
```

See [Getting Started](../getting-started.md) for the full install guide.
Loading
Loading