Development Setup

Development Setup

Guide to setting up your development environment for contributing to the Accessibility Widget.

📋 Prerequisites

Before you begin, ensure you have:

• Git - Version control
• Text Editor - VS Code, Sublime Text, or your preferred editor
• Web Browser - Chrome, Firefox, Safari, or Edge
• Local Web Server - For testing (optional but recommended)

🚀 Quick Setup

1. Clone the Repository

git clone https://github.com/airforcerp/Website-Accessibility-Widget.git
cd Website-Accessibility-Widget

2. Explore the Structure

Website-Accessibility-Widget/
├── web/
│   ├── accessibility-plugin.js      # Main plugin code
│   ├── accessibility-plugin.css     # Plugin styles
│   ├── accessibility-config.js       # Configuration
│   ├── example.html                 # HTML example
│   └── example-php.php              # PHP example
├── index.html                        # Demo page
├── README.md                         # Main documentation
└── wiki/                            # Wiki pages

3. Open Example File

Open web/example.html in your browser to see the plugin in action.

🛠️ Development Tools

Recommended Editor Setup

VS Code

Recommended extensions:

• ESLint - JavaScript linting
• Prettier - Code formatting
• Live Server - Local development server
• GitLens - Git integration

Settings

Create .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "javascript.format.indentSize": 4,
  "css.format.indentSize": 4
}

Local Web Server

Option 1: Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Access at: http://localhost:8000

Option 2: Node.js (http-server)

npm install -g http-server
http-server -p 8000

Option 3: VS Code Live Server

1. Install Live Server extension
2. Right-click example.html
3. Select "Open with Live Server"

📁 Project Structure

Main Files

• accessibility-plugin.js (1618 lines)

  • Main plugin logic
  • Widget creation
  • Feature implementations
  • API exports

• accessibility-plugin.css (885 lines)

  • Widget styles
  • Panel styles
  • Feature styles
  • Responsive design

• accessibility-config.js (67 lines)

  • Default configuration
  • User-customizable settings

Key Functions

Widget Creation

• createWidget() - Creates the widget UI
• createControl() - Creates form controls
• togglePanel() - Opens/closes panel

Settings Management

• applySettings() - Applies all settings
• loadPreferences() - Loads saved preferences
• savePreferences() - Saves current preferences

Features

• applyColorBlindnessFilter() - Color filters
• speakText() - Text-to-speech
• enableReadingGuide() - Reading guide
• And many more...

🧪 Testing

Manual Testing

1. Open Example File

   open web/example.html
   # or
   python -m http.server 8000
   # Then visit http://localhost:8000/web/example.html

2. Test Features

   • Click accessibility button
   • Test all features
   • Check browser console for errors
   • Test in multiple browsers

Browser Testing

Test in:

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers

Testing Checklist

• Widget appears and works
• All features function correctly
• No console errors
• Settings persist
• Responsive on mobile
• Keyboard navigation works
• TTS works (where supported)

🔧 Development Workflow

Making Changes

1. Create Branch

   git checkout -b feature/your-feature

2. Make Changes

   • Edit files
   • Test changes
   • Check for errors

3. Test Thoroughly

   • Multiple browsers
   • Mobile devices
   • Different screen sizes

4. Commit Changes

   git add .
   git commit -m "Description of changes"

5. Push and PR

   git push origin feature/your-feature

Code Style

• Indentation: 4 spaces
• Naming: camelCase for variables, kebab-case for CSS
• Comments: Add for complex logic
• Formatting: Consistent style throughout

Debugging

Browser Console

// Check if plugin loaded
console.log(typeof AccessibilityPlugin);

// Get current settings
console.log(AccessibilityPlugin.getSettings());

// Test API methods
AccessibilityPlugin.toggle();

Debug Mode

Add debug logging:

function debugLog(message) {
    if (window.DEBUG_ACCESSIBILITY) {
        console.log('[Accessibility]', message);
    }
}

📦 Building

No Build Step Required

The plugin is pure JavaScript and CSS - no build step needed!

Minification (Optional)

For production, you can minify:

# Using terser for JS
npx terser accessibility-plugin.js -o accessibility-plugin.min.js

# Using cssnano for CSS
npx cssnano accessibility-plugin.css accessibility-plugin.min.css

🐛 Debugging Tips

Common Issues

1. Widget Not Appearing

   • Check file paths
   • Check browser console
   • Verify Boxicons is loaded

2. Features Not Working

   • Check browser compatibility
   • Verify settings are applied
   • Check for JavaScript errors

3. Styles Not Applied

   • Check CSS file is loaded
   • Verify no conflicts
   • Check specificity

Debug Tools

• Browser DevTools: F12
• Console: Check for errors
• Network Tab: Verify file loading
• Elements Tab: Inspect DOM

📚 Resources

Documentation

• API Documentation
• Architecture
• Configuration Guide

External Resources

• Web Speech API
• WCAG Guidelines
• MDN Web Docs

🎯 Next Steps

1. Read Architecture documentation
2. Review Contributing guide
3. Pick an issue or feature to work on
4. Create a branch and start coding!

🆘 Getting Help

• Check Troubleshooting guide
• Review FAQ
• Open an issue on GitHub
• Email: support@airforcerp.com

---

Last Updated: November 2025