Skip to content

test(e2e): add automated accessibility (axe-core) gate and fix violations#111

Open
louisbels wants to merge 1 commit into
mainfrom
claude/project-improvement-areas-ckpjgl
Open

test(e2e): add automated accessibility (axe-core) gate and fix violations#111
louisbels wants to merge 1 commit into
mainfrom
claude/project-improvement-areas-ckpjgl

Conversation

@louisbels

Copy link
Copy Markdown
Member

Add a Playwright accessibility suite that runs axe-core (WCAG 2.0/2.1 A+AA)
across the app's key UI states — create page, password generator, markdown
editor, success/share view, and the note view's burn gate, password gate and
decrypted content. A shared expectNoA11yViolations helper reuses the existing
flow helpers and prints rule + node selectors on failure.

Fix the violations the suite surfaced:

  • color-contrast: white text on the bright --accent (#fc5855) was only
    3.15:1, below the 4.5:1 AA threshold for normal text. Introduce a darker
    --accent-strong (#dc2626, 4.84:1) for solid CTA buttons/links with white
    text, leaving --accent for text/icons/accents (where it still passes).
  • label: give the readonly manage-URL input and the password-length range
    slider accessible names via aria-label.

719 unit tests unchanged; all 23 e2e tests pass (14 existing + 9 new).

Co-Authored-By: Claude Opus 4.8 (1M context) noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_0181yWku6hbsnpGnB3VediTB

…ions

Add a Playwright accessibility suite that runs axe-core (WCAG 2.0/2.1 A+AA)
across the app's key UI states — create page, password generator, markdown
editor, success/share view, and the note view's burn gate, password gate and
decrypted content. A shared `expectNoA11yViolations` helper reuses the existing
flow helpers and prints rule + node selectors on failure.

Fix the violations the suite surfaced:

- color-contrast: white text on the bright `--accent` (#fc5855) was only
  3.15:1, below the 4.5:1 AA threshold for normal text. Introduce a darker
  `--accent-strong` (#dc2626, 4.84:1) for solid CTA buttons/links with white
  text, leaving `--accent` for text/icons/accents (where it still passes).
- label: give the readonly manage-URL input and the password-length range
  slider accessible names via aria-label.

719 unit tests unchanged; all 23 e2e tests pass (14 existing + 9 new).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0181yWku6hbsnpGnB3VediTB
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants