Common Actions

Common interaction patterns for modals, forms and navigation based on components documented in ZUD and UX best practices.

Modal TypeStructureActionsAccessibility
Confirmation Modal

Confirm destructive or important actions

confirmation-modal

Icon + Title + Description + Actions

Cancel (secondary)Confirm (primary/destructive)
Escape: Cancel
Enter: Confirm
Tab: Navigate actions

Focus trap, clear labels, appropriate ARIA roles

Feedback Modal

Collect user feedback and input

feedback-modal-content

Title + Form Fields + Submit Actions

CancelSubmitSave Draft (optional)
Escape: Cancel
Ctrl+Enter: Submit
Tab: Field navigation

Form labels, error messages, completion status

Upload Modal

File upload with progress indication

uploading-img-modal

Upload Area + Progress + Preview + Actions

CancelUploadReplace
Escape: Cancel
Enter: Upload
Delete: Remove

Upload status, file descriptions, progress announcements

Carousel Modal

Display media or content in slideshow format

carousel-modal

Navigation + Content + Controls

PreviousNextCloseFullscreen
Escape: Close
Arrow keys: Navigate
Space: Play/pause

Slide indicators, alternative text, keyboard navigation

Improvement Modal

Display improvement suggestions and actions

improve-maturity-modal

Current State + Recommendations + Action Plan

DismissView DetailsStart Improvement
Escape: Dismiss
Enter: Primary action
Tab: Navigation

Progress context, recommendation clarity, action outcomes

Modal Best Practices

UX Guidelines

  • • Clear purpose and context
  • • Minimal cognitive load
  • • Obvious exit options
  • • Progressive disclosure

Technical Implementation

  • • Focus trap management
  • • Backdrop click handling
  • • Escape key support
  • • Scroll lock on background