Components
Resource editors and detail dialogs
Use a consistent temporary editing surface, while checking each dialog’s actual focus contract.
On this page
Purpose and usage
Use a consistent temporary editing surface, while checking each dialog’s actual focus contract.
Use for object-level edits or expanded context that would otherwise interrupt the main workflow.
Anatomy
| Part | Contract |
|---|---|
| Heading | Names the current object or operation. |
| Content | Relevant task or resource fields. |
| Actions | Save/cancel or close according to the context. |
| Focus boundary | Must be established by each implementation. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Link editor | Create/edit title, URL, category, description. |
| Event editor | Create/edit date/time and supporting detail. |
| Block detail | Expanded project/event/time-away context through a portal. |
State coverage
| State | Implemented behavior |
|---|---|
| New | Empty resource draft. |
| Editing | Existing resource fields populate the form. |
| Invalid link | Inline URL feedback; normalizeWebUrl validates protocol. |
| Dismissal | Escape/outside handling varies by dialog. |
Interaction and responsive behavior
- Keep resource draft state local until the user chooses Save.
- Normalize external URLs before rendering them as links.
- Do not share one generic focus claim across all overlays.
Accessibility contract
- ProjectItemModal locks body scrolling, requests initial focus, handles Escape, and restores previous focus. Its source does not implement a Tab focus trap; the detail modal has a separate implementation.
- Block detail locks body scrolling, focuses its panel, and restores previous focus when removed.
- Presence of aria-modal does not prove focus containment. Verify Tab/Shift+Tab and screen-reader context.
Known gaps and readiness
Automated focus checks are reported separately; full screen-reader verification remains pending. Portal specimens are rendered from the real source.
Composition example
<ProjectLinkModal link={selectedLink}
onClose={closeEditor} onSave={saveLink} />Source references
| File | Responsibility |
|---|---|
| app/components/project-item-modal.tsx | Shared resource dialog and field wrapper |
| app/components/project-link-modal.tsx | Link editing and URL validation |
| app/components/project-event-modal.tsx | Event editing |
| app/components/agenda-block-detail-modal.tsx | Expanded read-only block context |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1