Components › Records & data › Attachment › File drop

File drop

canon

The one surface for choosing a file: drop zone with a glyph, label, accepted formats, upload progress and an inline error.

Owner approved v2 on 3 Oct 2026 (acrm !4548): replaced Import .drop, the identity image .idimg-pick and the Documents step-1 zone. Import on dev = approved design, 0 px difference (1440 and 390). Canon since 4 Oct 2026: also used by step 1 of the Documents form-less dialog (acrm !4574), checked on dev at 1440 and 390.

Used in 3 files · 3 areas · 3× — components/IdentityImageDialog, components/evidence, pages/ImportPage

@acrm/ui <FileDrop>.acrm-filedrop-wrap .acrm-filedrop .fd-ic .fd-label +3SourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Tab focuses the surface; Enter or Space opens the file dialog.
  • While uploading or disabled the surface leaves the tab order (tabIndex=-1).

ARIA

  • role="button" on the surface, its name is the label text.
  • aria-describedby → the formats line, plus the error line when there is one.
  • aria-busy="true" while uploading; the Progress inside has role="progressbar" with its own aria-label.
  • aria-disabled="true" when inert.
  • The error line is aria-live="polite" and is always in the DOM (empty when there is no error) so the announcement fires.

Focus

2 px --accent outline, 2 px offset, on :focus-visible.

Contrast

Label --fg on --surface-75; formats --fg-muted is supplementary text (owner 3 Oct 2026); error --critical-ink meets AA.

Known limits

  • Only the first file is taken.
  • The type check trusts an empty MIME type (browsers leave it empty for .ico) — the server decides by content.
  • Drag-over is not announced to screen readers; it is a mouse-only affordance.

Source: docs/attachment/file-drop.a11y.md · GitLab