Drop zone

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-drop-zone name="attachments" accept="image/png,image/jpeg,.pdf"
               max-size="5mb" max-files="6" multiple>
  <div class="tui-drop-zone__tray">
    <div class="tui-drop-zone__floor">
      <p class="tui-drop-zone__title">Drop files in the tray</p>
      <p class="tui-drop-zone__hint">Takes PNG, JPEG and PDF, up to 5 MB each. 6 files at most.</p>
      <label class="tui-key tui-drop-zone__pick">
        <input class="tui-drop-zone__input" type="file">Choose files
      </label>
    </div>
    <div class="tui-drop-zone__lip">
      <span class="tui-lamp" aria-hidden="true"></span>
      <span class="tui-drop-zone__state">Ready</span>
      <span class="tui-drop-zone__count"></span>
    </div>
  </div>
</tui-drop-zone>

import { dropZoneHTML } from '/kit/kit.mjs';   // also defines <tui-drop-zone>

// An empty <tui-drop-zone> builds the tray above for itself.
const zone = document.querySelector('tui-drop-zone[name="attachments"]');
zone.files;                       // the File objects in the tray
zone.add(someFiles);              // offer files as a drop would
zone.addEventListener('tui-files', (e) => {
  e.detail.added;                 // files that just went in
  e.detail.rejected;              // [{ file, why: 'type' | 'size' | 'duplicate' | 'full', hint }]
});

// A form posts exactly the files in the tray, under the element's name:
new FormData(form).getAll('attachments');

Needs kit.css and kit.mjs. How to install the kit.

• 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.
• The sheets in the tray are a picture of the rows under it, so they are hidden from a screen reader and their × keys are out of the tab order: the rows carry the same files, and their keys do the same thing.
• With reduced motion the floor changes depth at once instead of easing, and sheets are simply there, without settling.

The lip is a raised plate; the floor in it is the kit’s recess with ribs drawn across, each a dark line and a lit one, like the other grooves. Six pixels of lip round a 6px floor make the tray’s 12px corner concentric. Under a drag the floor’s depth is one number, --tui-dz-depth, eased from 1 to a quarter in 160ms: the shadows that make it a recess thin out and the floor sits up a pixel or two, which is all lifting a floor means. Drag events fire for every child under the pointer, so entering and leaving are counted. What comes in, from a drop or from the picker, goes through dropTake, which is pure and tested, and the accepted files are written back into the real input through a DataTransfer, so a form posts exactly what the tray shows. What was just accepted lands as paper: sheets in the kit’s paper tokens, each turned and shifted by its place in the pile, and a new one drops the last 18px and settles in 340ms, one after the other.