Bangaaru React Native A11y Linter

A comprehensive React Native accessibility linting extension for VS Code and Cursor IDE that helps developers identify and fix accessibility issues in React Native apps for iOS and cross-platform development.

Features

• Real-time React Native accessibility linting for cross-platform apps
• Platform-specific rule set covering React Native accessibility patterns
• iOS & cross-platform accessibility guidelines compliance checking
• Configurable severity levels (error, warning, info)
• Intelligent suggestions for fixing accessibility issues
• Support for React Native file types: JS, TS, JSX, TSX
• Workspace-wide linting capabilities
• Customizable rules through VS Code settings

React Native Accessibility Rules

The extension checks for the following accessibility issues:

📱 Accessibility Labels & Hints

• Missing accessibilityLabel on interactive elements
• Missing accessibilityLabel on images
• Missing accessibilityHint for complex interactions
• Proper accessibility descriptions for screen readers

🎯 Accessibility Roles

• Missing accessibilityRole on interactive elements
• Proper semantic roles for buttons, links, tabs, etc.
• Correct role assignment for different UI components

👆 Touch Accessibility

• Minimum touch target sizes (44x44 points)
• Proper accessibilityState for disabled elements
• Touch gesture accessibility considerations

📢 Screen Reader Support

• Proper importantForAccessibility usage
• Screen reader navigation optimization
• Decorative content properly hidden from assistive technology

🎛️ Focus Management

• Modal focus trapping with accessibilityViewIsModal
• Proper focus order and navigation
• Focus management in navigation flows

🎨 Visual Accessibility

• Color contrast compliance for mobile displays
• Text readability on various screen sizes
• Visual indicator accessibility

Installation

From VS Code Marketplace

1. Open VS Code or Cursor IDE
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Bangaaru React Native A11y Linter"
4. Click Install

Development Installation

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Press F5 to open a new Extension Development Host window
5. Test the extension in the new window

Usage

Automatic Linting

The extension automatically lints supported files when you:

• Open a file
• Save a file
• Make changes to a file (with a 500ms debounce)

Manual Commands

Access these commands through the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

• A11y Linter: Lint Current File - Lint the currently active file
• A11y Linter: Lint Workspace - Lint all supported files in the workspace
• A11y Linter: Toggle Accessibility Linting - Enable/disable the extension

Context Menu

Right-click in any supported file to access "Lint Current File for Accessibility Issues"

Configuration

Configure the extension through VS Code settings (File > Preferences > Settings, then search for "A11y Linter"):

{
  "a11yLinter.enabled": true,
  "a11yLinter.severity": "warning",
  "a11yLinter.rules": {
    "accessibilityLabel": true,
    "accessibilityHint": true,
    "accessibilityRole": true,
    "touchableAccessibility": true,
    "minimumTouchTarget": true,
    "screenReaderSupport": true,
    "focusManagement": true,
    "colorContrast": true
  }
}

Configuration Options

Individual Rule Configuration

You can enable or disable specific rules:

{
  "a11yLinter.rules": {
    "accessibilityLabel": true, // Check for missing accessibilityLabel
    "accessibilityHint": false, // Disable accessibility hint checks
    "accessibilityRole": true, // Check for missing accessibilityRole
    "touchableAccessibility": true, // Check touchable element accessibility
    "minimumTouchTarget": true, // Check minimum touch target sizes
    "screenReaderSupport": true, // Check screen reader optimization
    "focusManagement": true, // Check focus management
    "colorContrast": true // Check color contrast for mobile
  }
}

Supported File Types

• JavaScript (.js) - React Native components
• TypeScript (.ts) - React Native TypeScript files
• JavaScript React (.jsx) - React Native JSX components
• TypeScript React (.tsx) - React Native TSX components

Examples

Missing Accessibility Label

// ❌ Will trigger warning
<TouchableOpacity onPress={handlePress}>
  <Text>Save</Text>
</TouchableOpacity>

// ✅ Correct usage
<TouchableOpacity
  onPress={handlePress}
  accessibilityLabel="Save document"
>
  <Text>Save</Text>
</TouchableOpacity>

// ❌ Image without accessibility label
<Image source={{uri: 'profile.jpg'}} />

// ✅ Image with proper accessibility label
<Image
  source={{uri: 'profile.jpg'}}
  accessibilityLabel="User profile picture"
/>

Missing Accessibility Role

// ❌ Will trigger warning
<Pressable onPress={handlePress}>
  <Text>Submit</Text>
</Pressable>

// ✅ Correct usage
<Pressable
  onPress={handlePress}
  accessibilityRole="button"
  accessibilityLabel="Submit form"
>
  <Text>Submit</Text>
</Pressable>

Touch Target Size

// ❌ Will trigger warning (too small)
<TouchableOpacity
  onPress={handlePress}
  style={{width: 20, height: 20}}
>
  <Text>×</Text>
</TouchableOpacity>

// ✅ Correct usage (minimum 44x44)
<TouchableOpacity
  onPress={handlePress}
  style={{minWidth: 44, minHeight: 44}}
  accessibilityLabel="Close dialog"
>
  <Text>×</Text>
</TouchableOpacity>

Disabled State Accessibility

// ❌ Will trigger warning
<TouchableHighlight disabled onPress={handlePress}>
  <Text>Submit</Text>
</TouchableHighlight>

// ✅ Correct usage
<TouchableHighlight
  disabled
  onPress={handlePress}
  accessibilityState={{disabled: true}}
  accessibilityLabel="Submit form"
>
  <Text>Submit</Text>
</TouchableHighlight>

Development

Building the Extension

npm install
npm run compile

Running Tests

npm test

Packaging

npm run package

Development Workflow

1. Make changes to the source code
2. Run npm run compile or npm run watch
3. Press F5 to launch Extension Development Host
4. Test your changes in the new window

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Adding New Rules

To add a new accessibility rule:

1. Create a new class extending A11yRule in src/linter.ts
2. Implement the ruleId and check methods
3. Add the rule to the A11yLinter constructor
4. Add the rule to the default configuration in package.json
5. Update the README with rule documentation

Roadmap

• [ ] Integration with axe-core for more comprehensive checks
• [ ] Quick fix actions for common issues
• [ ] Custom rule configuration UI
• [ ] Integration with popular frameworks (React, Vue, Angular)
• [ ] Performance optimizations for large files
• [ ] Accessibility testing report generation

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• axe-core for accessibility testing insights
• WCAG Guidelines for accessibility standards
• VS Code Extension API documentation

Support

If you encounter any issues or have suggestions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Include code examples and expected behavior

Made with ❤️ for accessible React Native mobile development