Interaxion

Automated accessibility testing with interaxion by focusring.io.

Interaxion is an accessibility testing engine that validates web applications by interacting with them.

Installation

npm install interaxion

pnpm add interaxion

yarn add interaxion

Usage

Browser-Based Testing (Vitest Browser Mode)

For browser environments that support ES modules, import directly from interaxion/browser:

import { BrowserRunner } from 'interaxion/browser'
import { test, expect } from 'vitest'

test('buttons have visible focus indicators', async () => {
  document.body.innerHTML = `
    <style>
      .bad-button:focus { outline: none; }
      .good-button:focus { outline: 2px solid blue; }
    </style>
    <button class="bad-button">No focus ring</button>
    <button class="good-button">Has focus ring</button>
  `

  const runner = new BrowserRunner()
  const results = await runner.run()

  // Find issues
  const issues = results.patterns.filter(p => p.issues.length > 0)
  expect(issues.length).toBe(1) // Only bad-button has issues
})

Playwright

import { test, expect } from '@playwright/test'

test('page has proper focus indicators', async ({ page, context }) => {
  await page.goto('https://your-app.com')

  // Add interaxion to the page context
  await page.addInitScript(() => {
    ;(window as any).interaxion = {
      // Reference to the module - will be available after import
    }
  })

  // Evaluate interaxion in the browser context
  const results = await page.evaluate(async () => {
    // Dynamic import the browser module
    const { BrowserRunner } = await import('interaxion/browser')
    const runner = new BrowserRunner()
    return runner.run()
  })

  // Check for violations
  expect(results.violations.length).toBe(0)
})

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build
pnpm build

# Type check
pnpm typecheck

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © focusring.io

Related Projects

• axe-core - Comprehensive accessibility testing engine
• Evinced - Automated accessibility testing tools

Acknowledgments

Built with inspiration from axe-core and Evinced and designed to help web developers create accessible applications.