autocommit 9f3d39576e chore: initial package split from monorepo

Package: @lilith/ui-accessibility
Split from: lilith/ui.git or lilith/build.git
Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main

2026-04-20 01:11:34 -07:00

2 KiB

Raw Permalink Blame History

@ui/accessibility

React hooks for accessibility features and device detection.

Installation

pnpm add @ui/accessibility

Features

🎯 Zero dependencies - Only peer dependencies on React
♿ Accessibility-first - Respects user preferences
📱 Device detection - Touch vs mouse optimization
🎨 Framework agnostic - Works with any React setup
📦 Tiny bundle - Minimal overhead

Hooks

`useReducedMotion()`

Detects if the user has enabled "reduced motion" in their OS accessibility settings.

import { useReducedMotion } from '@ui/accessibility'
import { motion } from 'framer-motion'

function AnimatedComponent() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      animate={prefersReducedMotion ? {} : { x: 100, opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Content
    </motion.div>
  )
}

`useTouchDevice()`

Detects if the device supports touch input.

import { useTouchDevice } from '@ui/accessibility'

function InteractiveElement() {
  const isTouchDevice = useTouchDevice()

  return (
    <button
      style={{
        minHeight: isTouchDevice ? '44px' : '32px', // Larger touch targets
        cursor: isTouchDevice ? 'pointer' : 'default'
      }}
    >
      {isTouchDevice ? 'Tap' : 'Click'} me
    </button>
  )
}

Best Practices

Respecting Reduced Motion

Always check useReducedMotion() before applying:

Parallax scrolling effects
Particle animations
Auto-playing videos
Rapid color changes
Any motion that could cause discomfort

Touch-Friendly Design

When useTouchDevice() returns true:

Increase touch target size (minimum 44x44px)
Remove hover-dependent interactions
Simplify complex gestures
Consider mobile-first layouts

Browser Support

These hooks use standard Web APIs supported by all modern browsers:

matchMedia() for reduced motion detection
ontouchstart, maxTouchPoints, and media queries for touch detection

2 KiB Raw Permalink Blame History