npm package: @krunalshah/accessibility-widget
Description: Accessible, customizable accessibility widget for React applications
Author: Krunal Shah
Latest version: 1.1.5

# @krunalshah/accessibility-widget

A customizable accessibility widget for React applications. Provides comprehensive accessibility features with zero configuration required.

## Features

### Display Settings
- **Text Size**: Adjustable text scaling (100%, 125%, 150%, 175%)
- **High Contrast**: Enhanced color contrast for better visibility
- **Reduce Motion**: Disable animations for motion-sensitive users
- **Big Cursor**: Larger mouse cursor for easier tracking
- **Custom Focus**: Enhanced focus indicators with customizable appearance

### Vision Settings
- **Color Blindness Filters**: Simulations for protanopia, deuteranopia, and tritanopia
- **Highlight Links**: Make links more visible with outlines

### Reading Settings
- **Line Height**: Increase text spacing for readability
- **Dyslexia Font**: OpenDyslexic font for dyslexic users (embedded, no setup needed)
- **Reading Guide**: Horizontal line that follows the cursor
- **Text-to-Speech**: Read selected text aloud with adjustable speech rate

### Keyboard Shortcuts
- `Alt + A` - Toggle accessibility panel
- `Alt + C` - Toggle high contrast
- `Alt + M` - Toggle reduce motion
- `Alt + R` - Reset all settings

### Accessibility
- Full keyboard navigation support
- Screen reader announcements for all setting changes
- Focus trap in the settings panel
- WCAG 2.1 AA compliant

## Installation

```bash
npm install @krunalshah/accessibility-widget
```

## Automatic Updates with Dependabot

To keep your accessibility widget up to date automatically, add Dependabot to your project:

1. Create `.github/dependabot.yml` in your project:

```yaml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      accessibility:
        patterns:
          - "@krunalshah/accessibility-widget"
```

2. Dependabot will automatically create PRs when new versions are published.

## Usage

```tsx
import { AccessibilityWidget } from '@krunalshah/accessibility-widget'
import '@krunalshah/accessibility-widget/styles'

function App() {
  return (
    <>
      {/* Your app content */}
      <AccessibilityWidget />
    </>
  )
}
```

### Next.js

Add the widget to your root layout:

```tsx
// app/layout.tsx
import { AccessibilityWidget } from '@krunalshah/accessibility-widget'
import '@krunalshah/accessibility-widget/styles'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <AccessibilityWidget />
      </body>
    </html>
  )
}
```

### Using the Hook

You can also use the accessibility settings hook independently:

```tsx
import { useAccessibilitySettings } from '@krunalshah/accessibility-widget'

function MyComponent() {
  const {
    settings,
    toggleSetting,
    resetSettings,
    setColorBlindnessMode,
    updateFocusIndicator,
    setTTSRate,
  } = useAccessibilitySettings()

  return (
    <div>
      <p>High contrast: {settings.highContrast ? 'On' : 'Off'}</p>
      <button onClick={() => toggleSetting('highContrast')}>
        Toggle High Contrast
      </button>
    </div>
  )
}
```

### Text-to-Speech Hook

Use the text-to-speech functionality in your own components:

```tsx
import { useTextToSpeech } from '@krunalshah/accessibility-widget'

function MyComponent() {
  const { speak, stop, isSpeaking } = useTextToSpeech(true, 1.0)

  return (
    <button onClick={() => speak('Hello world!')}>
      {isSpeaking ? 'Speaking...' : 'Speak'}
    </button>
  )
}
```

### Keyboard Shortcuts Hook

Add keyboard shortcut support to your custom implementation:

```tsx
import {
  useAccessibilitySettings,
  useAccessibilityKeyboardShortcuts,
} from '@krunalshah/accessibility-widget'

function MyComponent() {
  const { toggleSetting, resetSettings } = useAccessibilitySettings()
  const [isPanelOpen, setIsPanelOpen] = useState(false)

  useAccessibilityKeyboardShortcuts(
    () => setIsPanelOpen((prev) => !prev),
    toggleSetting,
    resetSettings,
    true // enabled
  )

  return <div>{/* Your UI */}</div>
}
```

## Customization

The widget uses CSS custom properties for theming. Override these in your CSS:

```css
:root {
  --color-primary: #1E3A5F;
  --color-primary-dark: #152B47;
  --color-accent: #E5B94E;
  --color-white: #FFFFFF;
  --color-gray-100: #F0EDE8;
  --color-gray-200: #E0DBD3;
  --color-gray-300: #C4BCB0;
  --color-gray-500: #706860;
  --color-gray-600: #524B45;
  --color-gray-700: #3D3832;
  --color-gray-800: #2A2622;
}
```

## API

### AccessibilityWidget

The main widget component. No props required.

### useAccessibilitySettings()

Returns an object with:

- `settings`: Current accessibility settings
- `updateSetting(key, value)`: Update a specific setting
- `toggleSetting(key)`: Toggle a boolean setting
- `resetSettings()`: Reset all settings to defaults
- `setColorBlindnessMode(mode)`: Set color blindness filter
- `updateFocusIndicator(updates)`: Update focus indicator settings
- `setTTSRate(rate)`: Set text-to-speech rate (0.5 to 2.0)
- `isLoaded`: Whether settings have loaded from localStorage
- `announcement`: Current screen reader announcement

### useTextToSpeech(enabled, rate)

Returns an object with:

- `speak(text)`: Speak the given text
- `stop()`: Stop speaking
- `pause()`: Pause speech
- `resume()`: Resume speech
- `isSpeaking`: Whether currently speaking

### useAccessibilityKeyboardShortcuts(togglePanel, toggleSetting, resetSettings, enabled)

Adds keyboard shortcut support (Alt+A, Alt+C, Alt+M, Alt+R).

### AccessibilitySettings

```typescript
interface AccessibilitySettings {
  // Display
  textSize: '100' | '125' | '150' | '175'
  highContrast: boolean
  reduceMotion: boolean
  bigCursor: boolean
  focusIndicator: {
    enabled: boolean
    thickness: '2px' | '4px' | '6px'
    color: string
    style: 'solid' | 'dashed' | 'dotted'
  }

  // Vision
  colorBlindnessMode: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia'
  highlightLinks: boolean

  // Reading
  lineHeight: boolean
  dyslexiaFont: boolean
  readingGuide: boolean
  ttsEnabled: boolean
  ttsRate: number // 0.5 to 2.0
}
```

## Browser Support

- Chrome/Edge 88+
- Firefox 78+
- Safari 14+

## WCAG Compliance

This widget helps websites achieve WCAG 2.1 Level AA compliance by providing:

- **1.4.3 Contrast (Minimum)**: High contrast mode
- **1.4.4 Resize Text**: Text size adjustment up to 175%
- **1.4.12 Text Spacing**: Line height adjustment
- **2.1.1 Keyboard**: Full keyboard accessibility
- **2.3.1 Three Flashes or Below Threshold**: Reduce motion option
- **2.4.7 Focus Visible**: Custom focus indicators

## Standards Monitoring

This package includes automated monitoring of accessibility standards websites. A GitHub Action runs weekly to check for updates on:

- W3C WAI (WCAG guidelines)
- WebAIM (best practices)
- A11y Project (community standards)

When changes are detected, an issue is automatically created to review potential updates.

## License

MIT