Skip to content

Drag-and-drop follow-ups: small polish from the SONA-216 review rounds #417

Description

@sparkyfen

#416 added a shared dropFiles attachment in src/lib/drop-files.ts and adopted it on the VR avatar zones and the sticker pack zone (branch sparky/sona-216-admin-upload-zones-drag-and-drop). The gallery upload page was migrated onto it in the same PR. This issue collects the small polish the review rounds deferred.

Deferred polish

  • Both forms: a file input that becomes disabled mid-upload drops keyboard focus to the body. Either use aria-disabled with a guard in the handler, or restore focus in the finally that clears the busy flag.
  • Both forms: the dimmed "Uploading…" label sits under 4.5:1 on the light theme. Dim the border and icon rather than the status text.
  • VR model zone: a drop of a model plus a stray file uploads the model and says nothing about the stray. The error banner is single-valued and is reset by the upload, so reporting this needs a second slot or a toast.
  • Window guard: link drops on blank page space still navigate. Cancelling non-file drops at the window would also cancel text dropped into inputs, so this needs a target check for editable elements.
  • e2e: the busy-zone assertion block and the held-POST scaffolding are duplicated across vr-admin-form.spec.ts and sticker-pack-form.spec.ts; the three-name toast threshold boundary is untested.
  • Both forms: between first paint and hydration neither the zone nor the page-wide guard is attached, so a file dropped in that window follows the browser default and navigates the tab. The form holds no input yet, so nothing is lost; noting it in case an earlier-registered guard is ever wanted.
  • Gallery upload page, error tiles: the error sentence renders inside the 11 px status overlay and fills it at narrow widths, and a tile the page has refused still offers the Parent radio, variant label, and NSFW controls. Move the error text into the tile body and hide the metadata controls on error tiles (the oversized-file tile has the same shape, so this predates Admin upload zones accept drag and drop (VR avatar media and model, sticker packs) #416).
  • Gallery upload page: isGroup counts error tiles, so one valid image plus one refused file flips the form into variant-grouping mode and the parent radio can point at a tile that will never have a URL (save is still blocked by allUploaded). Count only non-error tiles. Predates Admin upload zones accept drag and drop (VR avatar media and model, sticker packs) #416 for oversized tiles.
  • Gallery upload page: the tile upload spinner animates regardless of prefers-reduced-motion; the global reduced-motion block only covers view transitions.
  • Gallery upload page, pre-existing accessibility gaps surfaced by the rounds: the two grouping-mode radios share no name, so arrow keys don't move between them; every tile's remove button is named "Remove file" with no file name; the dimmed add-files tile stays focusable at 0.55 opacity with text under 4.5:1 on the light theme (use a disabled color token instead of opacity).
  • Gallery upload page: the tile status band's uploading spinner and done check are unlabeled SVGs, so a screen reader gets no text for a tile's non-error state (the batch outcome is announced, so this is recoverable). Add an sr-only label per state.
  • Gallery upload page: parentIndex is a position into tiles, so removing a tile (now the normal path for dismissing a refused one) silently moves the parent pick to a different image. Track the parent by tile key. Predates Admin upload zones accept drag and drop (VR avatar media and model, sticker packs) #416.
  • Structure, all three forms: the live-region pattern (a $state counter, a setter that bumps it, and a {#key uid}<span>{text}</span>{/key} wrapper) is written out three times; extract one small helper in $lib. Likewise the picker and paste paths each call partitionByAccept before handing an (accepted, rejected) pair to the handler, so the accept constant is named twice per form; a raw-files entry point on each handler would name it once.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions