diff --git a/.claude/agents/a11y-reviewer.md b/.claude/agents/a11y-reviewer.md index 7c3d02a..b5206e1 100644 --- a/.claude/agents/a11y-reviewer.md +++ b/.claude/agents/a11y-reviewer.md @@ -6,6 +6,6 @@ tools: Read, Grep, Glob, Bash You review accessibility and visual consistency. You don't edit files; you report. -Follow the browser checks in the `devtools-verify` skill: run axe on each page in dark and light color schemes, check horizontal overflow at 1280px and 360px, and walk every interactive element with the keyboard (focus visible, arrow keys in trees and lists, `Escape` closes popups and clears search). Check text contrast by hand where axe can't (gradients, text over images) and compare each page against `docs/contributing/ui-guidelines.md`. +Follow the browser checks in the `devtools-verify` skill: run axe on each page (the panel is dark only, so one color scheme), check horizontal overflow at 1280px and 360px, and walk every interactive element with the keyboard (focus visible, arrow keys in trees and lists, `Escape` closes popups and clears search). Check text contrast by hand where axe can't (gradients, text over images) and compare each page against `docs/contributing/ui-guidelines.md`. Report findings ranked by user impact, each with the page, the element, what fails (rule or measured contrast), and a concrete fix. Say which pages you checked and how. diff --git a/.claude/skills/devtools-verify/SKILL.md b/.claude/skills/devtools-verify/SKILL.md index 2ea9592..d71a47b 100644 --- a/.claude/skills/devtools-verify/SKILL.md +++ b/.claude/skills/devtools-verify/SKILL.md @@ -36,7 +36,7 @@ NO_COLOR=1 pnpm exec ngc -p app/tsconfig.json --noEmit and treat any `error TS` or `error NG` line as a failure. Strip color codes before grepping the output, or errors slip through. -`pnpm test:axe` needs Chromium (`pnpm exec playwright install chromium` once). It runs axe on every panel tab and hub view against a static report of Angular Travel, in light and dark. It does not replace the browser checks below, which use real data from the demos. +`pnpm test:axe` needs Chromium (`pnpm exec playwright install chromium` once). It runs axe on every panel tab and hub view against a static report of Angular Travel. The panel is dark only, so it runs in the dark color scheme. It does not replace the browser checks below, which use real data from the demos. ## 2. Run the demos @@ -54,7 +54,7 @@ Open the panel through the amber launcher on the page, at `/__devframes/`, and d With Playwright and `@axe-core/playwright` (install them in a scratch folder, not in the repo): -- Every page you touched, in dark and light color schemes: axe reports no violations, there are no page errors, and `document.documentElement.scrollWidth <= innerWidth` at 1280px and 360px wide. +- Every page you touched (the panel is dark only): axe reports no violations, there are no page errors, and `document.documentElement.scrollWidth <= innerWidth` at 1280px and 360px wide. - Hub docks: clicking each rail button shows the matching view and only one frame (the rail selection and the content must match after fast switching and after a reload). - The feature itself, with real data from the demo app (for example `/examples/`). diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 2f94479..d11e401 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -62,7 +62,7 @@ pnpm skills:check # agent skills and roles pnpm exec ngc -p app/tsconfig.json --noEmit # panel template check ``` -For UI changes, also check the pages in a browser with axe, in dark and light themes and at a narrow width. The [devtools-verify skill](.claude/skills/devtools-verify/SKILL.md) lists the exact steps. +For UI changes, also check the pages in a browser with axe, at a wide and a narrow width (the panel is dark only). The [devtools-verify skill](.claude/skills/devtools-verify/SKILL.md) lists the exact steps. ## Submit a pull request diff --git a/apps/docs/src/content/contributing/development.md b/apps/docs/src/content/contributing/development.md index d283b3b..e619630 100644 --- a/apps/docs/src/content/contributing/development.md +++ b/apps/docs/src/content/contributing/development.md @@ -143,7 +143,7 @@ pnpm commit:check # Commit messages on your branch `pnpm typecheck` runs `ngc` on `app/tsconfig.json` and `examples/analog/tsconfig.app.json`, so template errors fail it. `app/tsconfig.json` turns on `strictTemplates`. -`pnpm test:panel` runs the tests in `app/src/__tests__` in jsdom, with the Analog Angular plugin compiling the components. `pnpm test:axe` builds the package, writes a static report of Angular Travel to `dist/panel-axe`, serves it, and runs axe on every tab and on each hub view (`?view=ngrx`, `analog`, `nativescript`, `capacitor`) in light and dark color schemes. It fails on any violation or page error. Run `pnpm exec playwright install chromium` once before the first run. +`pnpm test:panel` runs the tests in `app/src/__tests__` in jsdom, with the Analog Angular plugin compiling the components. `pnpm test:axe` builds the package, writes a static report of Angular Travel to `dist/panel-axe`, serves it, and runs axe on every tab and on each hub view (`?view=ngrx`, `analog`, `nativescript`, `capacitor`) in the dark color scheme (the panel is dark only). It fails on any violation or page error. Run `pnpm exec playwright install chromium` once before the first run. `pnpm skills:check` validates the frontmatter of every skill and role and checks that the files and links they mention exist. `pnpm commit:check` checks every commit on your branch that is not on `main` (it compares with `upstream/main`, then `origin/main`, then `main`). diff --git a/docs/contributing/ui-guidelines.md b/docs/contributing/ui-guidelines.md index cb5a372..3868563 100644 --- a/docs/contributing/ui-guidelines.md +++ b/docs/contributing/ui-guidelines.md @@ -1,9 +1,11 @@ # UI guidelines -The devtools panel (`app/`) is a dark, dense tool that people keep open next to their app. Every page should look like it belongs to the same product, work with the keyboard, and pass axe with WCAG AA contrast. +The devtools panel (`app/`) is a dark-only, dense tool that people keep open next to their app. Every page should look like it belongs to the same product, work with the keyboard, and pass axe with WCAG AA contrast. ## Theme +The panel is dark only. A light theme is tracked in [#192](https://github.com/santoshyadavdev/angular-devtools/issues/192). + The palette lives in `app/src/styles/_palette.scss` and becomes CSS variables in `_theme.scss`. Change the brand in one place, `app/src/styles/main.scss`: ```scss diff --git a/scripts/panel-axe.mjs b/scripts/panel-axe.mjs index fced2d7..e9cc6cb 100644 --- a/scripts/panel-axe.mjs +++ b/scripts/panel-axe.mjs @@ -68,7 +68,7 @@ try { } await rootPage.close(); - for (const colorScheme of ['light', 'dark']) { + for (const colorScheme of ['dark']) { const context = await browser.newContext({ colorScheme, reducedMotion: 'reduce',