Consent Manager Dialog

The Consent Manager Dialog provides a clean, focused way for users to customize their privacy preferences. This dialog is required by various privacy regulations like GDPR.

Usage

import { ConsentManagerProvider, CookieBanner, ConsentManagerDialog } from "@c15t/react";

export default function App() {
  return (
    <ConsentManagerProvider options={{
      mode: 'c15t',
      backendURL: 'https://your-instance.c15t.dev',
      consentCategories: ['necessary', 'marketing'],
    }}>
      <CookieBanner /> 
      <ConsentManagerDialog />
    </ConsentManagerProvider>
  );
};

Styling

The Consent Manager Dialog is designed to adapt to your application's visual style. Learn more about our styling system.

Theme Variables

These keys are available on the theme object to customize your dialog.

The dialog also contains the ConsentManagerWidget component so the theme keys are available to customize the widget.

Accessibility Features

The dialog implements several accessibility best practices:

Focus Management

When the dialog opens, it:

1. Traps focus within the dialog
2. Sets initial focus on the first interactive element
3. Remembers and restores the previous focus position when closed

Focus Trapping

The dialog implements focus trapping to ensure keyboard navigation remains within the dialog while it's open. This is crucial for:

• Keyboard users: Prevents users from accidentally interacting with content hidden behind the modal
• Screen reader users: Maintains proper context and prevents confusion
• WCAG compliance: Supports 2.4.3 Focus Order and provides proper modal functionality

How Focus Trapping Works

The ConsentManagerDialog uses the useFocusTrap hook internally to:

1. Capture the element that had focus before the dialog opened
2. Set initial focus to the first interactive element inside the dialog
3. Keep focus cycling within the dialog when users press Tab or Shift+Tab
4. Restore focus to the original element when the dialog closes

You can control focus trapping with the trapFocus prop:

// Default behavior (recommended for accessibility)
<ConsentManagerDialog trapFocus={true} />

// Disable focus trapping (not recommended)
<ConsentManagerDialog trapFocus={false} />

Keyboard Navigation

Users can:

• Close the dialog with the Escape key
• Navigate controls with Tab
• Interact with all elements using only the keyboard

Screen Readers

The dialog announces itself appropriately with:

• Proper ARIA roles and attributes
• Clear labeling of controls
• Status updates when opened/closed

API Reference

ConsentManagerDialog

The main component accepts these props:

Compound Components