calcom/cal.com
★ 35k+The open source scheduling platform.
Core UI primitives — DatePicker, Checkbox, Dropdown, ImageUploader — the building blocks that affect every screen.
packages/ui/components/form/datepicker/DatePicker.tsx
packages/ui/components/form/checkbox/Checkbox.tsx
packages/ui/components/dropdown/Dropdown.tsx
packages/ui/components/image-uploader/ImageUploader.tsx
Issues
The 'Choose a file' label has focus:outline-none — this is the primary interactive control inside the dialog, and it has its focus ring explicitly removed. Keyboard users tabbing to this element get no visible indication it's focused.
The CheckIcon inside Checkbox renders at h-4 w-4 (16px) inside a h-4 w-4 root — the control itself is only 16px. The touch target falls well below the 44x44px minimum for mobile.
DropdownMenuTrigger sets ring-0 unconditionally, which removes the focus ring entirely. A background color change alone is not a sufficient focus indicator under WCAG 2.4.7.
Two parallel checkbox implementations exist in the same file — Checkbox (Radix primitive) and CheckboxField (native input). They differ in focus handling, checked color tokens, and size. This creates a consistency risk across the product.
Working well
The Checkbox primitive wraps Radix CheckboxPrimitive.Root instead of rolling a custom div onClick checkbox — this is exactly right. Radix handles keyboard activation and aria state management out of the box.
The recursive getCroppedImg quality ladder (capping resizeRatio at 0.75 and re-processing until quality is acceptable) is a genuinely thoughtful image quality decision.
The destructive dropdown item correctly uses semantic error tokens (hover:bg-error hover:text-error) rather than hardcoding text-red-500.