Skip to content

Replace mock data with actual axe-core accessibility scanning #16

@ieliofficial

Description

@ieliofficial

The app currently uses mock data from mockScanResults.js. There's existing documentation in the integrating-axe-core-docs branch about how to integrate axe-core, but it hasn't been implemented yet.

Requirements:

  1. Install axe-core and a headless browser (Puppeteer or Playwright recommended for Node.js)
  2. Create a scanning service that:
    • Takes a URL input
    • Launches a headless browser
    • Injects axe-core into the page
    • Runs axe analysis
    • Returns results in a format compatible with the existing UI
  3. Replace the mock data in handleScan with actual API call to the scanning service
  4. Handle errors gracefully (timeout, unreachable sites, etc.)

Architecture note:

This will require a backend service (Express.js) since browsers block cross-origin requests
See docker-compose.yml line 16-23 for the planned backend structure

More: Frontend-only axe-core won't work for external websites because browsers enforce CORS (Cross-Origin Resource Sharing). The app at localhost:5173 cannot directly scan google.com or any other external domain - the browser blocks this for security.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions