@lessonkit/accessibility

Focus management, reduced-motion helpers, and screen-reader utilities for LessonKit apps.

When to install

• Custom interactive UI outside @lessonkit/react blocks
• Modal dialogs, custom carousels, or roving-tabindex toolbars in your course shell

@lessonkit/react uses this package internally (for example Quiz labels and compound keyboard nav).

Install

npm install @lessonkit/accessibility

Usage

import {
  trapFocus,
  focusFirst,
  prefersReducedMotion,
  shouldAnimate,
  createRovingTabIndex,
} from "@lessonkit/accessibility";

const release = trapFocus(dialogElement, { onEscape: closeDialog });
// call release() when the dialog closes

API

| Export | Purpose | | --- | --- | | prefersReducedMotion() | Media-query check | | shouldAnimate({ default }) | Respect user preference | | focusFirst, getFocusableElements | Focus discovery | | trapFocus(container, opts) | Focus trap for modals | | createRovingTabIndex(opts) | Roving tabindex groups | | visuallyHiddenStyle | Screen-reader-only content |

Docs

Accessibility reference · Theming & accessibility guide · Accessibility conformance · TypeDoc API index

License

Apache-2.0