Craftled

Modal / Dialog. Work through the list before you ship.

Product Checklist/Component/Modal / Dialog

0 / 20 completed0%

Project focusShowing core items only · 5 hidden

Priority:

Design & UI/UX

0/6

Designed all states: default, hover, focus, disabled, loading, error, empty

Critical

Component works across all breakpoints (mobile, tablet, desktop)

Critical

Consistent with the design system (tokens, spacing, typography)

Important

Dark mode variant works correctly

Important

Animations respect prefers-reduced-motion

Important

Consistent visual feedback on interaction (hover, active, focus)

Important

Accessibility

0/6

Keyboard operable (Tab, Enter, Space, Escape, Arrow keys where applicable)

Critical

Correct ARIA role, labels, and live regions

Critical

Focus management is correct (trapping in modals, returning on close)

Critical

Works with screen reader (VoiceOver / NVDA / JAWS)

Important

Color contrast 4.5:1 for text, 3:1 for UI elements

Critical

Error messages are announced to screen readers

Important

Performance

0/4

No unnecessary re-renders (memo, useCallback where appropriate)

Important

Large lists use virtualization (tanstack-virtual)

Important

Images inside component use next/image or lazy loading

Important

CSS animations use GPU-composited properties (transform, opacity)

Optional

Testing & QA

0/4

Unit tests covering all props and user interactions

Critical

Accessibility tests (jest-axe or playwright-axe)

Important

Cross-browser tested (Chrome, Firefox, Safari)

Important

Edge cases tested (empty data, very long strings, many items)

Important

Craftled

Store About Consulting House Contact Blueprint Invoice Generator Tools Product Checklist Terms Privacy llms.txt

X
GitHub
LinkedIn
Dribbble
Instagram
Behance
Pinterest
YouTube