Skip to content

A Firefox Add-On that validates accessibility rules for Appian SAIL code directly in the browser.

Notifications You must be signed in to change notification settings

pglevy/sailable

Repository files navigation

SAILable - Appian SAIL Accessibility Linter

A Firefox Add-On that validates accessibility rules for Appian SAIL code directly in the browser.

Features

Layer 1: Static Analysis Linter

Rule 1: Form Input Labels

  • ✅ All form inputs have label parameter (even if labelPosition: "COLLAPSED")
  • ❌ Flags inputs without labels or with empty labels
  • ❌ Flags inputs using only placeholders

Rule 2: Grid Row Headers

  • ✅ Multi-column grids have rowHeader parameter set
  • ❌ Flags a!gridField components missing rowHeader

Rule 3: Linked Card Controls

  • ⚠️ Warns when a!cardLayout has both link parameter and potentially interactive content
  • Requires manual review for complex nested structures

Installation

For Development

  1. Clone this repository
  2. Open Firefox and navigate to about:debugging
  3. Click "This Firefox" in the left sidebar
  4. Click "Load Temporary Add-on"
  5. Select the manifest.json file from this directory

For Distribution

Package the extension:

# Create a zip file with all extension files
zip -r sailable-firefox-addon.zip manifest.json content.js content.css popup.html popup.js icons/

Usage

  1. Navigate to a page with SAIL code in a CodeMirror editor
  2. Click the SAILable icon in the Firefox toolbar
  3. Click "Enable" to start linting
  4. Violations will be highlighted in the code with tooltips
  5. View summary in the popup panel

Supported SAIL Components

The linter recognizes these form field components:

  • a!textField
  • a!paragraphField
  • a!integerField
  • a!decimalField
  • a!dropdownField
  • a!radioButtonField
  • a!checkboxField
  • a!fileUploadField
  • a!dateField
  • a!timeField
  • a!dateTimeField
  • a!pickerField
  • a!gridField
  • a!cardLayout

How It Works

The extension:

  1. Detects CodeMirror editors on web pages
  2. Parses SAIL code from the DOM structure
  3. Extracts component types and parameters
  4. Validates against accessibility rules
  5. Highlights violations with visual indicators
  6. Provides detailed feedback via tooltips and popup

Browser Compatibility

  • Firefox 57+ (Manifest V2)
  • Chrome version coming soon (Manifest V3)

Contributing

This is Layer 1 of a multi-layer validation system. Future layers will include:

  • Layer 2: LLM contextual analysis
  • Layer 3: Design system integration
  • Layer 4: Developer tools integration

License

MIT License - see LICENSE file for details.

About

A Firefox Add-On that validates accessibility rules for Appian SAIL code directly in the browser.

Resources

Stars

Watchers

Forks

Contributors 2

  •  
  •