@webability/react-native — Accessibility SDK for React Native

Bridges to the native iOS + Android WebAbility SDKs so a single audit() call works on both platforms.

Install

npm install @webability/react-native
cd ios && pod install

Usage

import { audit, generateFix, upload } from '@webability/react-native'

// Audit the current screen
const result = await audit({ screenName: 'home' })
console.log(`Score: ${result.score}, ${result.summary.total} issues`)

// AI fix for the first critical issue (returns RN-specific code)
const fix = await generateFix(result.issues[0], 'react-native')
console.log(fix.alternatives[0].frameworkCode)
// → "<TouchableOpacity accessibilityLabel=\"Close\" ... />"

// Upload to dashboard
await upload(result, { projectId: 'my-app', apiKey: process.env.WEBABILITY_API_KEY })

Jest matchers

import { audit } from '@webability/react-native'

test('home screen is accessible', async () => {
  const result = await audit({ screenName: 'home' })
  expect(result.summary.critical).toBe(0)
  expect(result.score).toBeGreaterThan(90)
})

Detox integration

import { device, expect, element, by } from 'detox'
import { audit } from '@webability/react-native'

describe('Checkout flow', () => {
  it('passes accessibility audit at every step', async () => {
    await device.launchApp()

    await expect(element(by.id('home'))).toBeVisible()
    expect((await audit({ screenName: 'home' })).summary.critical).toBe(0)

    await element(by.id('buy-now')).tap()
    expect((await audit({ screenName: 'cart' })).summary.critical).toBe(0)
  })
})

In-app overlay

In a DEBUG build, shake the device to toggle the floating panel. Or call toggleOverlay() from a debug menu.

import { toggleOverlay } from '@webability/react-native'

// In your dev menu
<DevButton onPress={toggleOverlay}>Show A11y Overlay</DevButton>

What's audited

The same WCAG-mapped detectors as the native SDKs:

• 1.4.3 Contrast
• 2.5.8 Touch targets
• 1.1.1 Labels / contentDescription
• 1.4.4 Dynamic type
• 1.3.1 Heading hierarchy
• 2.4.3 Focus order
• 2.3.3 Reduced motion
• 1.4.1 Color-only meaning
• 3.3.2 Required form indicators

How it works

┌─────────────────────────────────┐
│   React Native App (your code)  │
└────────────────┬────────────────┘
                 │
       audit() / generateFix()
                 │
        ┌────────┴────────┐
        ▼                 ▼
  ┌───────────┐    ┌────────────┐
  │ iOS Native│    │   Android  │
  │  SDK      │    │   SDK      │
  └─────┬─────┘    └──────┬─────┘
        │                 │
        ▼                 ▼
  Apple's Audit API  Google a11y-test-framework
  + custom Swift     + custom Kotlin detectors
  detectors

Native SDKs do the heavy lifting (UI tree walk, WCAG check, view introspection). The RN bridge just exposes results to JS.