User Interface Components

React components that provide the accessibility testing interface within Storybook, including the main panel, vision simulator, and detailed reporting views.

Capabilities

A11Y Panel

Main accessibility panel component that displays test results and provides interactive testing controls.

/**
 * Main accessibility panel component for displaying test results
 * Renders within Storybook's addon panel area
 */
function A11YPanel(): JSX.Element;

The A11YPanel component provides:

• Real-time accessibility test results display
• Interactive violation list with detailed descriptions
• Manual test trigger controls
• Tabbed interface for different result categories (violations, passes, incomplete)
• Integration with Storybook's theming system

A11y Context Provider

Context provider for sharing accessibility state across components.

/**
 * React context provider for sharing accessibility state
 * @param props - Provider props containing children components
 */
function A11yContextProvider(props: { 
  children: React.ReactNode 
}): JSX.Element;

The context provider manages:

• Current accessibility test results
• Loading states during test execution
• Selected violation details
• Panel state and preferences

Usage:

import { A11yContextProvider, A11YPanel } from '@storybook/addon-a11y';

// Wrap the panel with context provider
function AddonPanel() {
  return (
    <A11yContextProvider>
      <A11YPanel />
    </A11yContextProvider>
  );
}

Vision Simulator

Component providing color vision deficiency simulation tools.

/**
 * Vision impairment simulation tool for testing color accessibility
 * Renders as a toolbar component in Storybook
 */
function VisionSimulator(): JSX.Element;

The VisionSimulator provides:

• Color vision deficiency filters (protanopia, deuteranopia, tritanopia, etc.)
• Real-time preview of how content appears to users with color vision differences
• Toggle controls for different vision simulation modes
• Integration with Storybook's toolbar system

Color Filters

Color vision filter controls for applying different accessibility simulations.

/**
 * Color vision filter controls component
 * Provides UI for selecting and applying color vision filters
 */
function ColorFilters(): JSX.Element;

Supported filter types:

• Protanopia: Red color blindness
• Deuteranopia: Green color blindness
• Tritanopia: Blue color blindness
• Protanomaly: Reduced red sensitivity
• Deuteranomaly: Reduced green sensitivity
• Tritanomaly: Reduced blue sensitivity
• Achromatopsia: Complete color blindness
• Achromatomaly: Reduced color sensitivity

Tabs Component

Tabbed interface component for organizing accessibility panel content.

/**
 * Tab interface component for organizing panel content
 * Provides navigation between violations, passes, and incomplete results
 */
function Tabs(): JSX.Element;

Features:

• Dynamic tab badges showing result counts
• Keyboard navigation support
• Active state management
• Accessibility-compliant tab implementation

Test Discrepancy Message

Component for displaying environment-specific test discrepancy warnings.

/**
 * Message component for displaying test environment discrepancy warnings
 * Shows when test results may differ between environments
 */
function TestDiscrepancyMessage(): JSX.Element;

Displays warnings for:

• Browser differences in accessibility API support
• Environment-specific rendering differences
• Test configuration discrepancies
• Links to documentation for troubleshooting

Report Components

Detailed accessibility report display components.

/**
 * Main accessibility report display component
 * Renders comprehensive test results with violation details
 */
function Report(): JSX.Element;

/**
 * Detailed violation information display component
 * Shows specific violation details with remediation guidance
 */
function Details(): JSX.Element;

The Report component provides:

• Categorized results display (violations, warnings, passes)
• Expandable violation details
• Code snippets showing problematic elements
• Remediation suggestions and links to documentation
• Export functionality for sharing results

The Details component shows:

• Rule violation descriptions
• Impact severity levels
• Affected DOM elements with highlighting
• Step-by-step remediation instructions
• Related WCAG success criteria references

Manager Registration

The addon automatically registers its UI components with Storybook's manager:

// Automatic registration happens when importing the manager
import '@storybook/addon-a11y/manager';

This registration adds:

• Panel Registration: Adds the accessibility panel to Storybook's addon panel area
• Tool Registration: Adds the vision simulator to Storybook's toolbar
• Title Component: Custom title component showing violation counts
• Event Handling: Sets up communication between preview and manager

Panel Configuration

// Panel registration configuration
addons.add(PANEL_ID, {
  title: Title, // Custom title component with badge
  type: types.PANEL,
  render: ({ active = true }) => (
    <A11yContextProvider>
      {active ? <A11YPanel /> : null}
    </A11yContextProvider>
  ),
  paramKey: PARAM_KEY,
});

Tool Configuration

// Vision simulator tool registration
addons.add(PANEL_ID, {
  title: '',
  type: types.TOOL,
  match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
  render: () => <VisionSimulator />,
});

Component Styling

All components are styled using Storybook's design system:

• Consistent theming with light/dark mode support
• Responsive design for different screen sizes
• Accessibility-compliant color contrast
• Icon integration using Storybook's icon library

State Management

Components use React hooks and context for state management:

• useAddonState: For managing addon-specific state
• useStorybookApi: For accessing Storybook's API functionality
• Local State: For component-specific UI state
• Event Communication: For preview/manager communication

Accessibility

All UI components follow accessibility best practices:

• Proper ARIA labels and descriptions
• Keyboard navigation support
• Screen reader compatibility
• High contrast mode support
• Focus management and visual indicators