Media

#Connecting your storage

Nothing here touches the network. Every upload goes through an onUpload you wire to your own storage, and without one a simulated upload stands in (it warns once in development). Each block awaits it, shows its progress, stops it through the AbortSignal when a file is removed or paused, and keeps whatever it resolves with (a URL, a key) on the file.

The drop zone, the media library and the attachments report progress in percent. With a presigned URL (S3, R2, Vercel Blob), an XMLHttpRequest reports it as the bytes go:

async function onUpload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (percent: number) => void }) {
  const { url, key } = await fetch('/api/uploads', { method: 'POST', body: JSON.stringify({ name: file.name, type: file.type }) }).then((r) => r.json())
  await new Promise<void>((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.upload.onprogress = (event) => onProgress((event.loaded / event.total) * 100)
    xhr.onload = () => (xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)))
    xhr.onerror = () => reject(new Error('The connection dropped.'))
    xhr.onabort = () => reject(new Error('Canceled'))
    signal.addEventListener('abort', () => xhr.abort())
    xhr.open('PUT', url)
    xhr.send(file)
  })
  return { key }
}

The upload tray reports bytes and passes the offset already stored, so a resumable protocol carries on from there after a pause or a lost connection: tus picks it up from its upload URL, S3 multipart from its last part. An uploader that can't resume starts over and reports from 0, and the tray follows. Rejecting retries after each of retryDelays, then shows your message with Retry.

#Accessibility

Every drop target is also a button, or sits beside one, so nothing needs a mouse: the drop zone is the picker's button and describes its rules, the image editor's empty stage is a button, and the library and the composer have Upload and Attach. Pasting works wherever focus is in the block. Refusals are listed with one reason per file, tied to the zone or the field with aria-describedby; outcomes (added, uploaded, failed, all done, removed, moved) are announced politely through one live region per block, and failures assertively. Progress isn't read out percent by percent: each file is a named progress bar with its bytes and time left as its value text.

The upload tray's header is a disclosure button whose name is its summary; each row's ring is its Pause, Resume or Retry, named for the file, and closing mid-upload is an alert dialog. The image editor's stage is a labelled group that describes its keys (arrows move, + and − zoom, [ and ] straighten, R turns, H and V flip, 0 resets); the focal point is a control of its own whose position is read out, and the sliders speak in degrees and percent. The media library is one multi-select listbox with a single tab stop: arrows move in two dimensions, Space picks, Shift picks a run, ⌘A or Ctrl+A picks all and Escape clears, and each option's name includes its place in the selection. Its lightbox is a dialog that steps with the arrow keys and hands focus back to the file's tile. The composer's attachments are buttons named with their size and state; Alt or Option with an arrow moves one and says where it went, Delete removes it and focus moves on, and ⌘↵ or Ctrl+↵ sends.

The Chapter player's waveform is a slider underneath: the arrow keys step, Page Up and Page Down step ten times as far, and the chapter title is announced politely as it changes. The play button is named and carries aria-pressed, the skip buttons say how far they jump, the speed fader is labelled, the clip toggle is pressed while a clip is open, and the chapter now playing is marked aria-current.

Both players are simulated by a clock; wire them to real audio and keep these labels. Under reduced motion the wave is drawn in place and level strips jump to each reading.

In Track arranger every clip is a tab stop: the arrow keys move it, Shift moves it ten times as far, and its trim edges are sliders. Play and rewind are named, and the clock is role="timer" with live announcements off. The gain fader is labelled.

The product card is an article named by its product name (an h2), and its photos are decorative (alt=""); a studio shot becomes an image only when you pass label, and its fallback keeps that name if the photo fails. The colorway swatches are a radio group: each is named by its color, and the arrow keys pick one. Quick add is a button named for the product, and a product with sizes opens a labelled group over the photo Escape closes it and focus returns. A struck-through price is read as was and now.

The device spec card keeps its drawing aria-hidden; the Assembled / Exploded switch and the spec figures are labelled groups, and focusing a figure lights its part the same way hovering does.

Under reduced motion the turn, the push-in, the photo fades and crossfades, the sheet and every cart change happen at once.

Under reduced motion the zone and tray change in place, rows and chips appear and leave at once, progress jumps, the editor's changes land without gliding or springing back, and the lightbox opens without growing. Colors and messages still show every state.