Skip to content

Add automated a11y CI gate using jest-axe (WCAG 2.1 AA) #13005

Description

@mekarpeles

Problem / Opportunity

Open Library has no automated accessibility (a11y) testing in CI. Accessibility regressions can land silently — a Lit component can ship with broken ARIA without any check failing. We have 17 open `Theme: Accessibility` issues and no tooling that would have caught them.

Opportunity: Wire jest-axe into the existing JavaScript test suite so that any PR introducing a WCAG 2.1 AA violation in a Lit component is blocked at CI.

Proposal

Add jest-axe as a devDependency and write WCAG 2.1 AA tests for the three Lit components that currently have manual ARIA attributes but no automated coverage:

  • `openlibrary/components/OlPopover.js`
  • `openlibrary/components/OlOptionsPopover.js`
  • `openlibrary/components/OlToast.js`

Wire `npm run test:a11y` into `.github/workflows/javascript_tests.yml` so violations block merge.

This is Phase 1 of a broader a11y tooling plan. Phase 2 (Playwright + axe-core full-page scans) and Phase 3 (Lighthouse CI) are follow-on work.

Breakdown

  • Install `jest-axe` as devDependency
  • Write tests for `OlPopover`, `OlOptionsPopover`, `OlToast` (default + open states)
  • Add `test:a11y` script to `package.json`
  • Wire into `javascript_tests.yml` CI
  • Verify all 477 existing tests still pass
  • Verify 0 WCAG violations on current components

Success Criteria

  • `npm run test:a11y` passes with 0 violations on merge
  • CI blocks any future PR that introduces a new WCAG violation in a tested component
  • All existing tests continue to pass

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Lead: @lokeshIssues pertaining to front-end design system [css, js, components]Needs: ResponseIssues which require feedback from leadTheme: AccessibilityWork related to disability accessibility. [managed]Type: Feature RequestIssue describes a feature or enhancement we'd like to implement. [managed]

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions