.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-warning{background:#FFFBEB;border-left:4px solid #F59E0B}
.callout-placeholder{background:#F9FAFB;border:1px dashed #D1D5DB;border-left:4px solid #9CA3AF}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Custom controls

Petrel includes many non-standard WPF controls — data grids, tree views, property panels, and domain-specific visualizations. Each must implement the appropriate UI Automation patterns to be accessible.
Draft guidance
This page is in draft. The UI Automation pattern mappings are being validated against the Petrel control library. Do not treat these as final specifications.
## Purpose

When WPF built-in controls are extended or replaced with custom controls, their accessibility properties must be explicitly implemented. WPF does not automatically provide UI Automation support for custom controls — each control must define its own `AutomationPeer`.

## UI Automation control patterns

Each control type maps to one or more UI Automation control patterns. Implementing the correct pattern allows screen readers and testing tools to interact with the control correctly:

Control type
Required UIA pattern(s)
Custom list / data grid
SelectionPattern, ScrollPattern, GridPattern
Custom tree view
SelectionPattern, ExpandCollapsePattern, ScrollPattern
Toggle button
TogglePattern
Slider / range input
RangeValuePattern
Custom expander
ExpandCollapsePattern
Custom tab control
SelectionPattern, TabPattern
Prototype value. The Petrel-specific control list is being compiled. Confirm with the Petrel development team.
## Do and Don't

DO
Create a custom 
AutomationPeer
subclass for every custom WPF control. Override 
GetPatternCore
to return the appropriate pattern implementations. Test with Accessibility Insights for Windows before submitting to code review.
DON'T
Don't assume that custom controls built on 
Control
or 
FrameworkElement
are automatically accessible. Without an explicit AutomationPeer, screen readers see them as generic containers with no operable controls inside.
## Petrel example

Petrel example placeholder
Examples of AutomationPeer implementations for common Petrel custom controls will be added here as the inventory is completed.
### Related pages

Labels and accessible names
— AutomationProperties
Keyboard and focus
— Keyboard support for custom controls
Accessibility testing
— Testing custom controls with Accessibility Insights