Accessibility

Screen reader utilities

tw.srOnly              // visually hidden, readable by screen readers
tw.srOnly.focus.notSrOnly  // visible on focus (skip link pattern)

ARIA attribute modifiers

tw.ariaExpanded.bg('blue-50')      // [aria-expanded="true"]
tw.ariaChecked.bg('blue-500')      // [aria-checked="true"]
tw.ariaDisabled.opacity(0.5)       // [aria-disabled="true"]

Data attribute modifiers

// With cx()/when()
import { cx, bg, when, data } from 'typewritingclass'

cx(when(data('active'))(bg('green-100')))
cx(when(data('state="error"'))(bg('red-100')))

Motion preferences

// With cx()/when()
import { cx, transition, duration, css, when, motionSafe, motionReduce } from 'typewritingclass'

cx(
  when(motionSafe)(transition(), duration(300)),
  when(motionReduce)(css({ transition: 'none' })),
)

Forced colors and contrast

import { cx, border, shadow, when, forcedColors, contrastMore } from 'typewritingclass'

cx(when(forcedColors)(border('2px')))
cx(when(contrastMore)(border('2px'), shadow('none')))