0
# User Interface Components
1

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

4
## Capabilities
5

6
### A11Y Panel
7

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

10
```typescript { .api }
11
/**
12
 * Main accessibility panel component for displaying test results
13
 * Renders within Storybook's addon panel area
14
 */
15
function A11YPanel(): JSX.Element;
16
```
17

18
The A11YPanel component provides:
19
- Real-time accessibility test results display
20
- Interactive violation list with detailed descriptions
21
- Manual test trigger controls
22
- Tabbed interface for different result categories (violations, passes, incomplete)
23
- Integration with Storybook's theming system
24

25
### A11y Context Provider
26

27
Context provider for sharing accessibility state across components.
28

29
```typescript { .api }
30
/**
31
 * React context provider for sharing accessibility state
32
 * @param props - Provider props containing children components
33
 */
34
function A11yContextProvider(props: { 
35
  children: React.ReactNode 
36
}): JSX.Element;
37
```
38

39
The context provider manages:
40
- Current accessibility test results
41
- Loading states during test execution
42
- Selected violation details
43
- Panel state and preferences
44

45
**Usage:**
46

47
```typescript
48
import { A11yContextProvider, A11YPanel } from '@storybook/addon-a11y';
49

50
// Wrap the panel with context provider
51
function AddonPanel() {
52
  return (
53
    <A11yContextProvider>
54
      <A11YPanel />
55
    </A11yContextProvider>
56
  );
57
}
58
```
59

60
### Vision Simulator
61

62
Component providing color vision deficiency simulation tools.
63

64
```typescript { .api }
65
/**
66
 * Vision impairment simulation tool for testing color accessibility
67
 * Renders as a toolbar component in Storybook
68
 */
69
function VisionSimulator(): JSX.Element;
70
```
71

72
The VisionSimulator provides:
73
- Color vision deficiency filters (protanopia, deuteranopia, tritanopia, etc.)
74
- Real-time preview of how content appears to users with color vision differences
75
- Toggle controls for different vision simulation modes
76
- Integration with Storybook's toolbar system
77

78
### Color Filters
79

80
Color vision filter controls for applying different accessibility simulations.
81

82
```typescript { .api }
83
/**
84
 * Color vision filter controls component
85
 * Provides UI for selecting and applying color vision filters
86
 */
87
function ColorFilters(): JSX.Element;
88
```
89

90
Supported filter types:
91
- **Protanopia**: Red color blindness
92
- **Deuteranopia**: Green color blindness  
93
- **Tritanopia**: Blue color blindness
94
- **Protanomaly**: Reduced red sensitivity
95
- **Deuteranomaly**: Reduced green sensitivity
96
- **Tritanomaly**: Reduced blue sensitivity
97
- **Achromatopsia**: Complete color blindness
98
- **Achromatomaly**: Reduced color sensitivity
99

100
### Tabs Component
101

102
Tabbed interface component for organizing accessibility panel content.
103

104
```typescript { .api }
105
/**
106
 * Tab interface component for organizing panel content
107
 * Provides navigation between violations, passes, and incomplete results
108
 */
109
function Tabs(): JSX.Element;
110
```
111

112
Features:
113
- Dynamic tab badges showing result counts
114
- Keyboard navigation support
115
- Active state management
116
- Accessibility-compliant tab implementation
117

118
### Test Discrepancy Message
119

120
Component for displaying environment-specific test discrepancy warnings.
121

122
```typescript { .api }
123
/**
124
 * Message component for displaying test environment discrepancy warnings
125
 * Shows when test results may differ between environments
126
 */
127
function TestDiscrepancyMessage(): JSX.Element;
128
```
129

130
Displays warnings for:
131
- Browser differences in accessibility API support
132
- Environment-specific rendering differences
133
- Test configuration discrepancies
134
- Links to documentation for troubleshooting
135

136
### Report Components
137

138
Detailed accessibility report display components.
139

140
```typescript { .api }
141
/**
142
 * Main accessibility report display component
143
 * Renders comprehensive test results with violation details
144
 */
145
function Report(): JSX.Element;
146

147
/**
148
 * Detailed violation information display component
149
 * Shows specific violation details with remediation guidance
150
 */
151
function Details(): JSX.Element;
152
```
153

154
The Report component provides:
155
- Categorized results display (violations, warnings, passes)
156
- Expandable violation details
157
- Code snippets showing problematic elements
158
- Remediation suggestions and links to documentation
159
- Export functionality for sharing results
160

161
The Details component shows:
162
- Rule violation descriptions
163
- Impact severity levels
164
- Affected DOM elements with highlighting
165
- Step-by-step remediation instructions
166
- Related WCAG success criteria references
167

168
## Manager Registration
169

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

172
```typescript { .api }
173
// Automatic registration happens when importing the manager
174
import '@storybook/addon-a11y/manager';
175
```
176

177
This registration adds:
178
- **Panel Registration**: Adds the accessibility panel to Storybook's addon panel area
179
- **Tool Registration**: Adds the vision simulator to Storybook's toolbar
180
- **Title Component**: Custom title component showing violation counts
181
- **Event Handling**: Sets up communication between preview and manager
182

183
### Panel Configuration
184

185
```typescript { .api }
186
// Panel registration configuration
187
addons.add(PANEL_ID, {
188
  title: Title, // Custom title component with badge
189
  type: types.PANEL,
190
  render: ({ active = true }) => (
191
    <A11yContextProvider>
192
      {active ? <A11YPanel /> : null}
193
    </A11yContextProvider>
194
  ),
195
  paramKey: PARAM_KEY,
196
});
197
```
198

199
### Tool Configuration
200

201
```typescript { .api }
202
// Vision simulator tool registration
203
addons.add(PANEL_ID, {
204
  title: '',
205
  type: types.TOOL,
206
  match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
207
  render: () => <VisionSimulator />,
208
});
209
```
210

211
## Component Styling
212

213
All components are styled using Storybook's design system:
214
- Consistent theming with light/dark mode support
215
- Responsive design for different screen sizes
216
- Accessibility-compliant color contrast
217
- Icon integration using Storybook's icon library
218

219
## State Management
220

221
Components use React hooks and context for state management:
222
- **useAddonState**: For managing addon-specific state
223
- **useStorybookApi**: For accessing Storybook's API functionality
224
- **Local State**: For component-specific UI state
225
- **Event Communication**: For preview/manager communication
226

227
## Accessibility
228

229
All UI components follow accessibility best practices:
230
- Proper ARIA labels and descriptions
231
- Keyboard navigation support
232
- Screen reader compatibility
233
- High contrast mode support
234
- Focus management and visual indicators