@versini/ui-liveregion

An accessible React live region component for dynamic content announcements.

The LiveRegion component provides ARIA live regions for announcing dynamic content changes to screen readers, essential for accessible web applications with real-time updates.

Table of Contents

• Features
• Installation
• Usage

Features

• ♿ Essential Accessibility: WCAG compliant ARIA live regions
• 🔄 Dynamic Updates: Real-time content announcements for screen readers
• 🎯 Configurable: Different politeness levels (polite, assertive)
• 🌲 Tree-shakeable: Lightweight and optimized for bundle size
• 🔧 TypeScript: Fully typed with comprehensive prop definitions

Installation

npm install @versini/ui-liveregion

Note: This component requires TailwindCSS and the @versini/ui-styles plugin for proper styling. See the installation documentation for complete setup instructions.

Usage

Basic Live Region

import { LiveRegion } from "@versini/ui-liveregion";

function App() {
  const [status, setStatus] = useState("");

  return (
    <>
      <button onClick={() => setStatus("Form saved successfully!")}>
        Save Form
      </button>
      <LiveRegion>{status}</LiveRegion>
    </>
  );
}

Assertive Live Region

import { LiveRegion } from "@versini/ui-liveregion";

function App() {
  const [error, setError] = useState("");

  return (
    <>
      <form onSubmit={handleSubmit}>{/* form fields */}</form>
      <LiveRegion type="assertive">{error}</LiveRegion>
    </>
  );
}

Examples

Form Status Announcements

import { LiveRegion } from "@versini/ui-liveregion";

function ContactForm() {
  const [status, setStatus] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setStatus("Submitting form...");

    try {
      await submitForm();
      setStatus("Form submitted successfully!");
    } catch (error) {
      setStatus("Error submitting form. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        {/* form fields */}
        <button disabled={isSubmitting}>Submit</button>
      </form>
      <LiveRegion>{status}</LiveRegion>
    </>
  );
}