|
| 1 | +# Copilot Instructions for Accessibility Checker |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +This is a WordPress plugin called "Accessibility Checker" developed by Equalize Digital. The plugin provides in-post accessibility scanning and guidance to help users audit their websites for accessibility compliance before and after publishing content. It focuses on WCAG (Web Content Accessibility Guidelines) compliance and does not require any API or per-page fees. |
| 6 | + |
| 7 | +**Key Details:** |
| 8 | +- Plugin Name: Accessibility Checker |
| 9 | +- Minimum PHP: 7.4 |
| 10 | +- Text Domain: accessibility-checker |
| 11 | +- Namespace: EqualizeDigital\AccessibilityChecker |
| 12 | + |
| 13 | +## Architecture & Structure |
| 14 | + |
| 15 | +### Core Plugin Structure |
| 16 | +- **Main file**: `accessibility-checker.php` - Plugin bootstrap and constants |
| 17 | +- **Admin classes**: Located in `/admin/` directory with class-based architecture |
| 18 | +- **Core functionality**: Located in `/includes/` directory |
| 19 | +- **Frontend assets**: Built files in `/build/`, source files in `/src/` |
| 20 | +- **Language files**: Located in `/languages/` directory |
| 21 | + |
| 22 | +### Coding Standards |
| 23 | +- Follow WordPress coding standards (WPCS) in all php files |
| 24 | +- Use PSR-4 autoloading with EqualizeDigital\AccessibilityChecker namespace |
| 25 | +- Legacy files are autoloaded using EDAC namespace. |
| 26 | +- Class names use `ClassNameConvention` (CamelCase) |
| 27 | +- Legacy class names use `Class_Name_Convention` (WordPress style) |
| 28 | +- File names use `ClassNameConvention.php` for new classes (CamelCase) |
| 29 | +- Legacy file names use `class-class-name.php` (WordPress style) |
| 30 | +- Use WordPress hooks and filters appropriately |
| 31 | +- Use `edac_` prefix for custom hooks and filters |
| 32 | + |
| 33 | +### PHP Guidelines |
| 34 | +- Minimum PHP 7.4 compatibility |
| 35 | +- Use type hints where appropriate |
| 36 | +- Follow WordPress security best practices (sanitization, validation, nonces) |
| 37 | +- Use WordPress database API (wpdb) for database operations |
| 38 | +- Prefix all functions and classes with `edac_` when in global namespace |
| 39 | + |
| 40 | +### WordPress Integration |
| 41 | +- Use WordPress hooks (actions/filters) for extensibility |
| 42 | +- Follow WordPress plugin development best practices |
| 43 | +- Implement proper activation/deactivation hooks |
| 44 | +- Use WordPress transients for caching |
| 45 | +- Follow WordPress internationalization (i18n) practices |
| 46 | + |
| 47 | +## Development Workflow |
| 48 | + |
| 49 | +Code should always be linted by phpcs and eslint before committing. Tests should be added for new functionality. Tests should also be added for any bug fixes. Use the following commands to run tests and linting: |
| 50 | + |
| 51 | +```bash |
| 52 | +npm run lint:php |
| 53 | +npm run lint:js |
| 54 | +npm run test:php |
| 55 | +npm run test:jest |
| 56 | +``` |
| 57 | + |
| 58 | +There are autofixers available for both PHP and JavaScript linting. Use the following commands to fix linting issues: |
| 59 | + |
| 60 | +```bash |
| 61 | +npm run lint:php:fix |
| 62 | +npm run lint:js:fix |
| 63 | +``` |
| 64 | + |
| 65 | +### Complete Command Reference |
| 66 | + |
| 67 | +#### Testing |
| 68 | +- `npm run test:jest` - Run JavaScript tests |
| 69 | +- `npm run test:php` - Setup and run PHP tests with Docker |
| 70 | +- `npm run test:php:run` - Run PHP tests in existing container |
| 71 | +- `npm run test:php:coverage` - PHP unit tests with coverage report |
| 72 | +- `composer test` - Run PHP tests directly |
| 73 | +- `docker-compose exec phpunit ./vendor/bin/phpunit ./tests/phpunit/path/to/TestFile.php` - Run a single PHPUnit test file (container must be running first) |
| 74 | + |
| 75 | +#### Linting & Code Quality |
| 76 | +- `npm run lint` - Run all linters (PHP + JS) |
| 77 | +- `npm run lint:php` - Run PHP linter (PHPCS) |
| 78 | +- `npm run lint:js` - Run JavaScript linter (ESLint) |
| 79 | +- `npm run lint:php:fix` - Fix PHP linting issues |
| 80 | +- `npm run lint:js:fix` - Fix JavaScript linting issues |
| 81 | +- `composer lint` - Run PHP parallel lint |
| 82 | +- `composer check-cs` - Check PHP code standards |
| 83 | +- `composer fix-cs` - Fix PHP code standards |
| 84 | + |
| 85 | +#### Building |
| 86 | +- `npm run build` - Build production assets with webpack |
| 87 | +- `npm run dev` - Build development assets with watch mode |
| 88 | + |
| 89 | +### Docker Environment |
| 90 | + |
| 91 | +PHP tests use Docker containers: |
| 92 | +- **MySQL 5.7** (`db-phpunit`) - Database for WordPress testing |
| 93 | +- **WordPress Testing Environment** (`phpunit`) - Custom container with WordPress + PHPUnit |
| 94 | + |
| 95 | +### Troubleshooting Development Issues |
| 96 | + |
| 97 | +- **Cypress Issues**: If Cypress download fails, run `npm config set ignore-scripts false && npm run postinstall` |
| 98 | +- **Composer Timeouts**: Handle network timeouts gracefully with partial installations |
| 99 | +- **Docker Issues**: Containers may need to be restarted if they fail to initialize properly |
| 100 | +- **PHP Tests**: WordPress installation in Docker may occasionally need retry |
| 101 | + |
| 102 | +### Code Quality Tools |
| 103 | +- **PHP CodeSniffer**: Configuration in `phpcs.xml` |
| 104 | +- **PHPStan**: Configuration in `phpstan.neon` |
| 105 | +- **PHPUnit**: Test configuration in `phpunit.xml.dist` |
| 106 | +- **ESLint**: JavaScript linting with `.eslintrc` |
| 107 | + |
| 108 | +### Build Process |
| 109 | +- **Webpack**: Frontend asset compilation via `webpack.config.js` |
| 110 | +- **Composer**: PHP dependency management |
| 111 | +- **NPM**: JavaScript dependency management |
| 112 | + |
| 113 | +### Testing |
| 114 | +- PHPUnit tests located in `/tests/phpunit` directory |
| 115 | +- Jest tests for JavaScript in `/tests/jest/` directory. |
| 116 | +- Use `npm run test:jest` for JavaScript tests |
| 117 | +- Use `npm run test:php` for PHP unit tests |
| 118 | +- Use `npm run test:php:coverage` for PHP unit tests with coverage report |
| 119 | +- Use WordPress testing framework where applicable |
| 120 | + |
| 121 | +## Accessibility Focus |
| 122 | + |
| 123 | +This plugin is specifically designed for accessibility auditing, so when contributing: |
| 124 | + |
| 125 | +### WCAG Compliance |
| 126 | +- Follow WCAG 2.1 AA guidelines in all code |
| 127 | +- Ensure proper semantic HTML structure |
| 128 | +- Implement proper ARIA attributes |
| 129 | +- Maintain keyboard navigation support |
| 130 | +- Ensure proper color contrast |
| 131 | + |
| 132 | +### Accessibility Patterns |
| 133 | +- Implement proper focus management |
| 134 | +- Provide alternative text for images |
| 135 | +- Use proper heading hierarchy |
| 136 | +- Ensure screen reader compatibility |
| 137 | + |
| 138 | +## Key Components |
| 139 | + |
| 140 | +### Scanner Engine |
| 141 | +- Automated accessibility rule checking |
| 142 | +- WCAG guideline implementation |
| 143 | +- Issue detection and reporting |
| 144 | +- Powered by axe-core library with custom rules |
| 145 | + |
| 146 | +### Admin Interface |
| 147 | +- Settings pages with accessibility considerations |
| 148 | +- Meta boxes for post-level scanning |
| 149 | +- Dashboard widgets and statistics |
| 150 | +- Welcome pages and upgrade promotions |
| 151 | + |
| 152 | +### Frontend Features |
| 153 | +- Highlight accessibility issues on frontend |
| 154 | +- User-facing accessibility fixes |
| 155 | +- Statement generation capabilities |
| 156 | + |
| 157 | +## Dependencies & Libraries |
| 158 | + |
| 159 | +### PHP Dependencies (Composer) |
| 160 | +- WordPress coding standards |
| 161 | +- PHPStan for static analysis |
| 162 | +- Custom forked textstatistics library |
| 163 | + |
| 164 | +### JavaScript Dependencies (NPM) |
| 165 | +- Webpack for bundling |
| 166 | +- ESLint for code quality |
| 167 | +- Various build tools and utilities |
| 168 | + |
| 169 | +## File Naming Conventions |
| 170 | + |
| 171 | +### PHP Files |
| 172 | +- Classes: `ClassName.php` |
| 173 | +- Legacy Classes: `class-class-name.php` |
| 174 | +- Functions: `functions-purpose.php` |
| 175 | +- Includes: `purpose.php` |
| 176 | + |
| 177 | +### JavaScript Files |
| 178 | +- Components: `ComponentName.js` |
| 179 | +- Utilities: `utilityName.js` |
| 180 | +- Bundles: `bundleName.bundle.js` |
| 181 | + |
| 182 | +### CSS Files |
| 183 | +- Stylesheets: `style-name.css` |
| 184 | +- Admin styles: `admin-purpose.css` |
| 185 | + |
| 186 | +## Database & Performance |
| 187 | + |
| 188 | +- Use WordPress database API exclusively |
| 189 | +- Implement proper caching strategies |
| 190 | +- Consider performance impact at all times |
| 191 | +- Use WordPress transients for temporary data storage where appropriate |
| 192 | + |
| 193 | +## Internationalization |
| 194 | + |
| 195 | +- All user-facing text must be translatable |
| 196 | +- Use `accessibility-checker` text domain |
| 197 | +- Follow WordPress i18n best practices |
| 198 | +- Support RTL languages where applicable |
| 199 | +- Strings in javascript also need translation support using `wp.i18n` functions |
| 200 | + |
| 201 | +## Security Considerations |
| 202 | + |
| 203 | +- Sanitize all user inputs |
| 204 | +- Validate and escape all outputs |
| 205 | +- Use WordPress nonces for form submissions |
| 206 | +- Follow WordPress security guidelines |
| 207 | +- Implement proper capability checks |
| 208 | + |
| 209 | +## Plugin Hooks & Filters |
| 210 | + |
| 211 | +When adding new functionality: |
| 212 | +- Provide appropriate hooks for extensibility |
| 213 | +- Use descriptive hook names with `edac_` prefix |
| 214 | +- Document all custom hooks in docblocks |
| 215 | +- Consider backward compatibility |
| 216 | + |
| 217 | + |
| 218 | +## When Working on This Codebase |
| 219 | + |
| 220 | +1. **Always consider accessibility implications** of any changes |
| 221 | +2. **Test with screen readers** when modifying frontend components |
| 222 | +3. **Follow WordPress plugin guidelines** strictly |
| 223 | +4. **Maintain backward compatibility** with existing installations |
| 224 | +5. **Document any new features** thoroughly |
| 225 | +6. **Write tests** for new functionality |
| 226 | +7. **Consider performance impact** of any changes |
| 227 | + |
| 228 | +## Common Patterns |
| 229 | + |
| 230 | +### Class Structure |
| 231 | +```php |
| 232 | +namespace EqualizeDigital\AccessibilityChecker; |
| 233 | + |
| 234 | +class ExampleClass { |
| 235 | + public function __construct() { |
| 236 | + // never add actions right in the constructor |
| 237 | + } |
| 238 | + |
| 239 | + public function init() { |
| 240 | + // Implementation |
| 241 | + } |
| 242 | +} |
| 243 | +``` |
| 244 | + |
| 245 | +### Hook Implementation |
| 246 | +```php |
| 247 | +// Add filter with proper priority |
| 248 | +add_filter( 'edac_custom_filter', [ $this, 'filter_callback' ], 10, 2 ); |
| 249 | + |
| 250 | +// Use descriptive hook names |
| 251 | +do_action( 'edac_after_scan_complete', $post_id, $results ); |
| 252 | +``` |
| 253 | + |
| 254 | +### Error Handling, Code Review & Collaboration, and Performance Optimization |
| 255 | +- Use WordPress error handling functions (e.g., WP_Error) for PHP errors. |
| 256 | +- Log errors and warnings in a way that does not expose sensitive information. |
| 257 | +- Gracefully handle JavaScript errors to avoid breaking accessibility features. |
| 258 | +- Submit pull requests with clear descriptions and testing instructions. |
| 259 | +- Tag accessibility-related changes for focused review. |
| 260 | +- Use GitHub Actions workflows for automated linting and testing. |
| 261 | +- Minimize DOM operations in JavaScript for frontend scanning. |
| 262 | +- Avoid blocking queries in PHP, especially during scans. |
| 263 | +- Profile and optimize accessibility scans for large posts/pages. |
| 264 | + |
| 265 | +### Accessibility Testing Tools |
| 266 | +- Use axe-core browser extension for manual accessibility checks. |
| 267 | +- Test with multiple screen readers (NVDA, JAWS, VoiceOver). |
| 268 | +- Validate color contrast with tools like Color Contrast Analyzer. |
| 269 | + |
| 270 | +### Release Management |
| 271 | +- Follow semantic versioning for plugin releases. |
| 272 | +- Update changelog.txt and readme.txt for each release. |
| 273 | +- Tag releases in GitHub and WordPress.org. |
| 274 | + |
| 275 | +## Additional Guidance for Copilot and Contributors |
| 276 | + |
| 277 | +### Documentation |
| 278 | +- Use PHPDoc for all public classes, methods, and properties. |
| 279 | +- Document custom hooks and filters with clear descriptions and parameter types. |
| 280 | +- Update README.md and changelog.txt for any user-facing or API changes. |
| 281 | +- Add inline comments for complex accessibility logic or non-obvious code. |
| 282 | + |
| 283 | +### Testing Best Practices |
| 284 | +- Write unit tests for new PHP functions and classes. |
| 285 | +- Add integration tests for major features and accessibility rules. |
| 286 | +- Use Jest for JavaScript unit tests and axe-core for accessibility assertions. |
| 287 | +- Test with multiple browsers and assistive technologies. |
| 288 | + |
| 289 | +### Accessibility-First Development |
| 290 | +- Prioritize accessibility in UI/UX decisions and code reviews. |
| 291 | +- Avoid introducing overlays or solutions that mask real accessibility issues. |
| 292 | +- Prefer native HTML elements over custom widgets unless necessary. |
| 293 | +- Ensure all interactive elements are reachable and usable by keyboard. |
| 294 | + |
| 295 | +### Performance & Scalability |
| 296 | +- Profile accessibility scans for large posts and optimize queries. |
| 297 | +- Use batch processing for bulk scans to avoid timeouts. |
| 298 | +- Cache scan results where possible, but always allow for manual refresh. |
| 299 | + |
| 300 | +### Security & Privacy |
| 301 | +- Never log or expose sensitive user data in error messages or debug output. |
| 302 | +- Validate all AJAX requests and REST endpoints with nonces and capability checks. |
| 303 | +- Escape all output, especially in admin screens and user-generated content. |
| 304 | + |
| 305 | +### Release & Maintenance |
| 306 | +- Use semantic versioning and tag releases in both GitHub and WordPress.org. |
| 307 | +- Deprecate legacy code with clear docblocks and migration notes. |
| 308 | +- Monitor for new WCAG updates and update rules as needed. |
| 309 | + |
| 310 | +--- |
| 311 | + |
| 312 | +## Accessibility Issue Types (for reference) |
| 313 | +- Color contrast |
| 314 | +- Missing or incorrect alt text |
| 315 | +- Improper heading structure |
| 316 | +- ARIA misuse or missing attributes |
| 317 | +- Keyboard navigation issues |
| 318 | +- Form labeling and instructions |
| 319 | +- Link purpose and context |
| 320 | +- Dynamic content updates (ARIA live regions) |
| 321 | + |
| 322 | +--- |
| 323 | + |
| 324 | +## Quick Reference: Accessibility Checklist |
| 325 | +- Semantic HTML structure |
| 326 | +- ARIA attributes used correctly |
| 327 | +- Keyboard navigation supported |
| 328 | +- Sufficient color contrast |
| 329 | +- Focus management implemented |
| 330 | +- Images have descriptive alt text |
| 331 | +- Heading hierarchy logical |
| 332 | +- Screen reader compatibility |
| 333 | +- Forms are accessible and labeled |
| 334 | +- No accessibility regressions introduced |
| 335 | + |
| 336 | +--- |
| 337 | + |
| 338 | +## Resources |
| 339 | + |
| 340 | +### Documentation & Guidelines |
| 341 | +- [WordPress Plugin Handbook](https://developer.wordpress.org/plugins/) |
| 342 | +- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) |
| 343 | +- [axe-core Documentation](https://github.com/dequelabs/axe-core) |
| 344 | +- [WordPress Accessibility Coding Standards](https://make.wordpress.org/core/handbook/best-practices/accessibility/) |
| 345 | + |
| 346 | +### Testing & Development Tools |
| 347 | +- [WAVE Web Accessibility Evaluation Tool](https://wave.webaim.org/) |
| 348 | +- [Deque axe DevTools](https://www.deque.com/axe/devtools/) |
| 349 | +- [Color Contrast Analyzer](https://developer.paciellogroup.com/resources/contrastanalyser/) |
| 350 | + |
| 351 | +### Screen Readers |
| 352 | +- [NVDA Screen Reader](https://www.nvaccess.org/) |
| 353 | +- [JAWS Screen Reader](https://www.freedomscientific.com/products/software/jaws/) |
| 354 | +- [VoiceOver (macOS/iOS)](https://www.apple.com/accessibility/) |
| 355 | + |
| 356 | +This plugin helps make the web more accessible - keep that mission in mind with every contribution! |
0 commit comments