A Firefox Add-On that validates accessibility rules for Appian SAIL code directly in the browser.
Rule 1: Form Input Labels
- ✅ All form inputs have
label
parameter (even iflabelPosition: "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 missingrowHeader
Rule 3: Linked Card Controls
⚠️ Warns whena!cardLayout
has bothlink
parameter and potentially interactive content- Requires manual review for complex nested structures
- Clone this repository
- Open Firefox and navigate to
about:debugging
- Click "This Firefox" in the left sidebar
- Click "Load Temporary Add-on"
- Select the
manifest.json
file from this directory
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/
- Navigate to a page with SAIL code in a CodeMirror editor
- Click the SAILable icon in the Firefox toolbar
- Click "Enable" to start linting
- Violations will be highlighted in the code with tooltips
- View summary in the popup panel
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
The extension:
- Detects CodeMirror editors on web pages
- Parses SAIL code from the DOM structure
- Extracts component types and parameters
- Validates against accessibility rules
- Highlights violations with visual indicators
- Provides detailed feedback via tooltips and popup
- Firefox 57+ (Manifest V2)
- Chrome version coming soon (Manifest V3)
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
MIT License - see LICENSE file for details.