wikimedia/color-contrast-checker

Automates reporting of color contrast violations for Wikipedia articles.

Color Contrast Monitoring for Dark Mode

🚨 Work in Progress 🚨

The provided scripts are designed to monitor color contrast issues, specifically for dark mode. The process involves creating test cases based on the top Wikipedia articles and running accessibility tests using pa11y axe-core. The results are logged to the console and a CSV file, capturing color contrast violations.

Scripts

Color Contrast Tester
│
├── index.js
│
├── report/
│   ├── index.html
│   └── simplifiedList.csv
│
├── modules/
│   ├── csvWriter.js
│   ├── htmlGenerator.js
│   ├── topArticles.js
│   └── accessibility.test.js
│
└── README.md

Usage

• Ensure you have the required environment variables set: MW_SERVER, MEDIAWIKI_USER, and MEDIAWIKI_PASSWORD.

• Run the tests using the following command:

node index.js --project en.wikipedia

Advanced

Run against mobile:

node index.js --project fr.wikipedia --mobile --query "minervanightmode=1"

Run against mobile against 10 random articles with sleep duration of 0s.

node index.js --project fr.wikipedia --mobile --query "minervanightmode=1" --source random -z 0 --limit 10

Run against desktop night theme against 100 random articles.

node index.js --project fr.wikipedia --query "useskin=vector-2022&vectornightmode=1" --source random --limit 100

Important Note

This tool is currently in development and should be used cautiously. Stay tuned for updates and improvements!

color-contrast-checker's Issues

Debug memory leaks

Problem

We have a memory leak.

Debugger listening on ws://127.0.0.1:9229/c0e5e61e-5d83-4bfa-87fb-ecec3f42ca02
For help, see: https://nodejs.org/en/docs/inspector
(node:11418) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)
(node:11418) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(node:11418) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(node:11418) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGHUP listeners added to [process]. Use emitter.setMaxListeners() to increase limit

Possible To-Do's

• Ensure all await statements properly resolve or reject promises.
• Verify proper handling of async tasks, especially with Puppeteer interactions.
• Confirm all resources (e.g., browser instances, pages) are closed and disposed of correctly.
• Ensure browser.close() is invoked appropriately to close browser instances.
• Check for added event listeners within page contexts and ensure they're removed when no longer needed.
• Review usage of page.evaluate() to inject JavaScript code and ensure proper event listener management.
• Utilize Node.js debugging (?) to profile memory usage.
• Monitor memory consumption during script execution to identify abnormal patterns.

Enhancement: Add Commands for Accessibility Tests with Configurations

Overview

This issue is to enhance the accessibility testing functionality by adding commands that support specific configurations.

Commands to Add:

1. Run Accessibility Tests with Default Configuration:

   node runA11yTests.js --config 'a11y.config.js'

2. Run Accessibility Tests with Dark Mode Configuration:

   node runA11yTests.js --config 'a11y.config.js' --query "?darkmode=1" --output - dir 'a11y-darkmode1'

Success Criteria:

• Running the first command should execute accessibility tests with the default configuration.
• Running the second command should execute accessibility tests with a dark mode configuration and save the output in the 'a11y-darkmode1' directory.