@lssm/lib.accessibility

Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design.

Installation

npm install @lssm/lib.accessibility
# or
bun add @lssm/lib.accessibility

Exports

  • SkipLink: A link to skip navigation, visible on focus
  • VisuallyHidden: Hide content visually but keep it for screen readers
  • SRLiveRegionProvider, useSRLiveRegion: Manage live region announcements
  • RouteAnnouncer: Announce page title/path changes on navigation
  • FocusOnRouteChange: Reset focus to body or main content on navigation
  • useReducedMotion: Detect if the user prefers reduced motion

Example: App Setup

import {
  SRLiveRegionProvider,
  RouteAnnouncer,
  SkipLink
} from '@lssm/lib.accessibility';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SRLiveRegionProvider>
          <SkipLink />
          <RouteAnnouncer />
          <main id="main-content">
            {children}
          </main>
        </SRLiveRegionProvider>
      </body>
    </html>
  );
}

Example: Live Announcements

import { useSRLiveRegion } from '@lssm/lib.accessibility';

export function TodoList() {
  const { announce } = useSRLiveRegion();

  const addTodo = () => {
    // ... add logic
    announce('Todo added successfully', 'polite');
  };

  return <button onClick={addTodo}>Add Todo</button>;
}

WCAG Compliance

These components map directly to WCAG 2.1 Level AA requirements documented in docs/accessibility_wcag_compliance_specs.md:

  • 2.4.1 Bypass Blocks (SkipLink)
  • 4.1.3 Status Messages (LiveRegion)
  • 2.4.3 Focus Order (FocusOnRouteChange)
  • 2.3.3 Animation from Interactions (useReducedMotion)
Previous: Design SystemBack to Libraries