Build an accessible document drop zone
Accept documents through drag-and-drop, keyboard file selection, and clipboard paste.Description
Requirements
Export a DocumentDropZone component from src/App.tsx.
Expose an operable drop target whose accessible name is Upload documents.
Enter or Space on the target activates a native file input labelled Choose documents.
Prevent default drag behavior and pass accepted dropped File objects to onFiles in order.
Read File clipboard items on paste and pass accepted files through the same callback.
Expose visible and programmatic feedback while accepted files are dragged over the target.
Apply exact MIME, wildcard MIME, and dot-extension tokens from the accept array consistently.
Announce accepted counts and rejected-file feedback through a stable live region.
When disabled, expose disabled semantics and suppress picker, drop, paste, and onFiles activity.
Keyboard picker
Focus Upload documents and press Enter
The native Choose documents input is activated
Keyboard users receive the same browser file picker.
Accepted paste
accept is ['.pdf','image/*'] and clipboard contains PDF, PNG, and ZIP files
onFiles receives PDF and PNG in clipboard order
The same accept policy applies to non-picker entry paths.
Constraints
Do not mutate FileList, DataTransferItemList, or File objectsIgnore clipboard items that are not filesPreserve the original accepted-file order
Hints
Hint 1
Normalize each input source into a plain File array before filtering.
Hint 2
Parse accept once into predicates for extension, exact MIME, and type wildcard tokens.
Hint 3
Forward keyboard activation to the native input instead of recreating the browser picker.