Drop zone

An in-tray for files. A machined lip stands round a ribbed floor; the floor rises a little when a file is dragged over it, and a lamp on the lip lights. What goes in is listed as printed rows, a refusal says why, and the key inside the tray is a real file input.

Drag files over the tray, or press Choose files. Add four samples to see two go in and two turned away.

• The picker is a real <input type="file"> inside the key, so it sits in the tab order, is named by the key’s words and opens with Enter or Space. Nothing depends on dragging.
• The hint is attached to the input with aria-describedby, so the types and the limit are read before anyone chooses.
• Every addition, removal and refusal is said in a polite live region: what changed and how many files are in the tray now.
• A refusal names the file and gives the rule in words. Its row stays on the list until it is dismissed, and its red lamp is a second signal beside the words.
• The lit lamp and the raised floor say a drag is over the tray; the word beside the lamp (“Release to add”) says it too, so neither colour nor movement carries it alone.
• Each row’s key names its file (“Remove site-plan.pdf”). After a file goes, focus lands on the next row’s key, or back on Choose files.
• With reduced motion the floor changes depth at once instead of easing.