@masters-union/union-stack 0.3.6 → 0.3.8

package/dist/picker.cjs

@@ -131,6 +131,8 @@ var BASE_CSS = `
   overflow: hidden;
   animation: us-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
+/* Container is only a programmatic focus fallback \u2014 no visible focus ring. */
+.us-picker:focus { outline: none; }
 @keyframes us-rise {
   from { opacity: 0; transform: translateY(8px) scale(0.985); }
   to   { opacity: 1; transform: translateY(0) scale(1); }
@@ -334,6 +336,7 @@ var BASE_CSS = `
   font-size: 11px; color: var(--us-muted);
   font-family: var(--us-mono); letter-spacing: 0;
 }
+.us-actions-summary[data-tone="warn"] { color: var(--us-danger); }
 .us-actions-buttons { display: flex; gap: 8px; }
 
 .us-btn {
@@ -1070,6 +1073,7 @@ function iconForMime(mime) {
   if (mime.startsWith("application/zip") || mime.includes("compressed") || mime === "application/x-tar" || mime === "application/gzip") return ICON2.archive;
   return ICON2.file;
 }
+var FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 var Picker = class {
   constructor(client, opts) {
     this.client = client;
@@ -1092,6 +1096,10 @@ var Picker = class {
     this.abortCtrl = new AbortController();
     this.uploadStarted = false;
     this.resolved = false;
+    // Element focused before the modal opened, restored on close (a11y).
+    this.previouslyFocused = null;
+    // Auto-clears the transient notice line in the actions bar.
+    this.noticeTimer = null;
     // ---- mount / dom --------------------------------------------------------
     this.$summary = null;
     this.donePromise = new Promise((res) => {
@@ -1122,7 +1130,13 @@ var Picker = class {
     this.opts.onCancel?.();
     this.close();
   }
+  // Normalized accept string (callers may pass a string or string[]).
+  get acceptStr() {
+    const a = this.opts.accept;
+    return Array.isArray(a) ? a.join(",") : a ?? "";
+  }
   mount() {
+    this.previouslyFocused = document.activeElement ?? null;
     const root = document.createElement("div");
     root.className = "us-picker-backdrop";
     Object.entries(themeToCssVars(this.opts.theme)).forEach(([k, v]) => {
@@ -1132,6 +1146,18 @@ var Picker = class {
       if (e.target === root && !this.uploadStarted) this.cancel();
     });
     const panel = el2("div", "us-picker");
+    this.$panel = panel;
+    const titleId = `us-picker-title-${cryptoId()}`;
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    panel.setAttribute("aria-labelledby", titleId);
+    panel.tabIndex = -1;
+    panel.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && !this.uploadStarted) {
+        e.preventDefault();
+        this.cancel();
+      } else if (e.key === "Tab") this.trapFocus(e);
+    });
     const header = el2("div", "us-picker-header");
     const logoWrap = el2("div", "us-picker-header-logo");
     if (this.opts.branding?.logoUrl) {
@@ -1144,6 +1170,7 @@ var Picker = class {
     }
     header.appendChild(logoWrap);
     const title = el2("div", "us-picker-title", this.opts.branding?.title ?? DEFAULT_TITLE);
+    title.id = titleId;
     header.appendChild(title);
     this.$closeBtn = document.createElement("button");
     this.$closeBtn.type = "button";
@@ -1173,6 +1200,8 @@ var Picker = class {
     const autoUpload = this.opts.autoUpload === true;
     const actions = el2("div", "us-actions");
     this.$summary = el2("div", "us-actions-summary", "");
+    this.$summary.setAttribute("role", "status");
+    this.$summary.setAttribute("aria-live", "polite");
     actions.appendChild(this.$summary);
     const buttons = el2("div", "us-actions-buttons");
     this.$cancel = document.createElement("button");
@@ -1200,7 +1229,26 @@ var Picker = class {
     root.appendChild(panel);
     (this.opts.container ?? document.body).appendChild(root);
     this.$backdrop = root;
-    this.$panel = panel;
+    const target = panel.querySelector('.us-source-tab[data-active="true"]') ?? panel;
+    target.focus();
+  }
+  // Keeps Tab focus cycling within the modal (focus trap).
+  trapFocus(e) {
+    if (!this.$panel) return;
+    const focusable = Array.from(
+      this.$panel.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).filter((node) => !node.hasAttribute("disabled") && node.offsetParent !== null);
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (e.shiftKey && active === first) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
   }
   // Resolves which sources to show, honoring opts.fromSources, defaulting to
   // both. Empty arrays fall back to ['device'] — we never want to leave a
@@ -1213,18 +1261,34 @@ var Picker = class {
   renderSourceTabs(sources) {
     const tabs = el2("div", "us-source-tabs");
     tabs.setAttribute("role", "tablist");
-    for (const src of sources) {
+    tabs.setAttribute("aria-label", "Upload source");
+    sources.forEach((src, i) => {
       const btn = document.createElement("button");
       btn.type = "button";
       btn.className = "us-source-tab";
       btn.setAttribute("role", "tab");
+      btn.setAttribute("aria-selected", "false");
+      btn.tabIndex = -1;
       btn.dataset.source = src;
       btn.innerHTML = src === "device" ? `${ICON2.device} <span>My Device</span>` : `${ICON2.link} <span>Link</span>`;
       btn.onclick = () => this.activateSource(src);
+      btn.onkeydown = (e) => this.onTabKeydown(e, sources, i);
       tabs.appendChild(btn);
-    }
+    });
     return tabs;
   }
+  // Arrow/Home/End navigation across the source tabs.
+  onTabKeydown(e, sources, index) {
+    let next = index;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (index + 1) % sources.length;
+    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (index - 1 + sources.length) % sources.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = sources.length - 1;
+    else return;
+    e.preventDefault();
+    this.activateSource(sources[next]);
+    this.$panel?.querySelector(`.us-source-tab[data-source="${sources[next]}"]`)?.focus();
+  }
   activateSource(source) {
     if (this.$deviceSource) {
       const active = source === "device";
@@ -1235,7 +1299,10 @@ var Picker = class {
     }
     const tabs = this.$panel?.querySelectorAll(".us-source-tab");
     tabs?.forEach((t) => {
-      t.dataset.active = t.dataset.source === source ? "true" : "false";
+      const isActive = t.dataset.source === source;
+      t.dataset.active = isActive ? "true" : "false";
+      t.setAttribute("aria-selected", isActive ? "true" : "false");
+      t.tabIndex = isActive ? 0 : -1;
     });
   }
   renderUrlSource() {
@@ -1312,11 +1379,10 @@ var Picker = class {
     dz.appendChild(el2("div", "us-dropzone-hint", "or click to browse from your device"));
     const constraintBits = [];
     if (this.opts.maxFileSize) constraintBits.push(`max ${formatBytes(this.opts.maxFileSize)}`);
-    if (this.opts.accept) {
-      if (typeof this.opts.accept !== "string") this.opts.accept = this.opts.accept.join(",");
+    if (this.acceptStr) {
       const labels = [];
       const seen = /* @__PURE__ */ new Set();
-      for (const part of this.opts.accept.split(",")) {
+      for (const part of this.acceptStr.split(",")) {
         const raw = part.trim();
         if (!raw || raw === "*/*") continue;
         const label = mimeLabel(raw);
@@ -1338,7 +1404,7 @@ var Picker = class {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = (this.opts.maxFiles ?? 10) > 1;
-    if (this.opts.accept) input.accept = this.opts.accept;
+    if (this.acceptStr) input.accept = this.acceptStr;
     input.style.display = "none";
     input.onchange = () => {
       if (input.files) this.addFiles(Array.from(input.files));
@@ -1353,13 +1419,20 @@ var Picker = class {
         input.click();
       }
     };
-    dz.addEventListener("dragover", (e) => {
+    let dragDepth = 0;
+    dz.addEventListener("dragenter", (e) => {
       e.preventDefault();
+      dragDepth++;
       dz.setAttribute("data-drag", "over");
     });
-    dz.addEventListener("dragleave", () => dz.removeAttribute("data-drag"));
+    dz.addEventListener("dragover", (e) => e.preventDefault());
+    dz.addEventListener("dragleave", () => {
+      dragDepth = Math.max(0, dragDepth - 1);
+      if (dragDepth === 0) dz.removeAttribute("data-drag");
+    });
     dz.addEventListener("drop", (e) => {
       e.preventDefault();
+      dragDepth = 0;
       dz.removeAttribute("data-drag");
       const dropped = e.dataTransfer?.files;
       if (dropped) this.addFiles(Array.from(dropped));
@@ -1371,20 +1444,50 @@ var Picker = class {
       this.editor.close();
       this.editor = null;
     }
+    if (this.noticeTimer) {
+      clearTimeout(this.noticeTimer);
+      this.noticeTimer = null;
+    }
     if (this.$backdrop?.parentNode) this.$backdrop.parentNode.removeChild(this.$backdrop);
     this.$backdrop = null;
     this.$panel = null;
     for (const item of this.items) {
       if (item.objectUrl) URL.revokeObjectURL(item.objectUrl);
     }
+    this.previouslyFocused?.focus?.();
+    this.previouslyFocused = null;
     this.opts.onClose?.();
   }
   // ---- file selection -----------------------------------------------------
+  // Mirrors the native <input accept> matching: exact MIME, "type/*"
+  // wildcards, and ".ext" suffixes. Drag-and-drop bypasses the input filter,
+  // so we re-check here to keep both entry points consistent.
+  fileMatchesAccept(file) {
+    const tokens = this.acceptStr.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    if (tokens.length === 0 || tokens.includes("*/*")) return true;
+    const mime = (file.type || "").toLowerCase();
+    const name = file.name.toLowerCase();
+    return tokens.some((tok) => {
+      if (tok.startsWith(".")) return name.endsWith(tok);
+      if (tok.endsWith("/*")) return mime.startsWith(tok.slice(0, -1));
+      return mime === tok;
+    });
+  }
   addFiles(files) {
     const cap = this.opts.maxFiles ?? Infinity;
+    let rejectedType = 0;
+    const eligible = files.filter((f) => {
+      if (this.fileMatchesAccept(f)) return true;
+      rejectedType++;
+      return false;
+    });
     const remaining = cap - this.items.length;
-    if (remaining <= 0) return;
-    const chosen = files.slice(0, remaining);
+    const chosen = remaining > 0 ? eligible.slice(0, remaining) : [];
+    const overCap = eligible.length - chosen.length;
+    const notices = [];
+    if (rejectedType > 0) notices.push(`${rejectedType} file${rejectedType > 1 ? "s" : ""} skipped \u2014 unsupported type`);
+    if (overCap > 0) notices.push(`${overCap} file${overCap > 1 ? "s" : ""} skipped \u2014 max ${cap} allowed`);
+    if (notices.length) this.flashNotice(notices.join(" \xB7 "));
     for (const file of chosen) {
       if (this.opts.maxFileSize && file.size > this.opts.maxFileSize) {
         const item2 = {
@@ -1616,6 +1719,20 @@ var Picker = class {
     const queued = this.items.filter((i) => i.state === "queued").length;
     this.$confirm.disabled = queued === 0 || this.uploadStarted;
   }
+  // Transient message in the actions bar (e.g. "2 files skipped — too large").
+  flashNotice(text) {
+    if (!this.$summary) return;
+    this.$summary.textContent = text;
+    this.$summary.dataset.tone = "warn";
+    if (this.noticeTimer) clearTimeout(this.noticeTimer);
+    this.noticeTimer = setTimeout(() => {
+      if (this.$summary) {
+        this.$summary.textContent = "";
+        delete this.$summary.dataset.tone;
+      }
+      this.noticeTimer = null;
+    }, 4e3);
+  }
   // ---- upload -------------------------------------------------------------
   async startUpload() {
     if (this.uploadStarted) return;