Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
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
95 changes: 95 additions & 0 deletions docs/guides/accessibility-infra-setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# 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.cjs # Prints tests carrying incomplete-result warnings
├── run-a11y-incomplete.cjs # Runs the accessibility project, then prints 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