@usefillo/dom 0.12.0 → 0.12.1

package/dist/index.js

@@ -34,6 +34,8 @@ import {
   needsExplicitSubmit,
   radioGroupStep,
   reachablePageSequence,
+  REQUIRED_FIELD_MESSAGE,
+  requiredFieldMessage,
   resolveThemeAppearance,
   shouldAutoSubmit,
   syncCodeForm,
@@ -942,7 +944,7 @@ function checkbox(context) {
       el("p", {
         className: "fillo-error",
         text: context.error,
-        attrs: { role: "alert", id: context.ids.errorId, "data-fillo": "error" }
+        attrs: { id: context.ids.errorId, "data-fillo": "error" }
       })
     );
   return wrap;
@@ -1306,8 +1308,47 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
-function fileActionBtn(className, label, text, onClick) {
-  const btn = el("button", { className, text, attrs: { type: "button", "aria-label": label } });
+function uploadSvg(paths, size = 22) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "fillo-file-state-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  for (const d of paths) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+function fileStateIcon(state) {
+  const mark = el("span", {
+    className: `fillo-file-state fillo-file-state--${state}`,
+    attrs: { "aria-hidden": "true" }
+  });
+  mark.appendChild(
+    state === "done" ? uploadSvg([
+      "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0",
+      "m8.5 12 2.25 2.25 4.75-5"
+    ]) : state === "failed" ? uploadSvg([
+      "M3.75 12a8.25 8.25 0 1 0 16.5 0 8.25 8.25 0 1 0-16.5 0",
+      "M12 7.75v5.5",
+      "M12 16.5h.01"
+    ]) : uploadSvg(["M7.25 3.75h6.5l3 3v13.5h-9.5z", "M13.75 3.75v3h3"])
+  );
+  return mark;
+}
+function closeIcon() {
+  const icon = uploadSvg(["m7 7 10 10M17 7 7 17"], 16);
+  icon.setAttribute("class", "fillo-file-action-icon");
+  return icon;
+}
+function fileActionBtn(className, label, content, onClick) {
+  const btn = el("button", { className, attrs: { type: "button", "aria-label": label } });
+  btn.append(content);
   btn.addEventListener("click", onClick);
   return btn;
 }
@@ -1418,35 +1459,39 @@ function fileUpload(context) {
     const list = el("ul", { className: "fillo-files" });
     for (const file of done) {
       const li = el("li", { className: "fillo-file fillo-file--done" });
-      appendChildren(li, [
+      const content = el("span", { className: "fillo-file-content" });
+      appendChildren(content, [
         el("span", { className: "fillo-file-name", text: file.name }),
-        el("span", { className: "fillo-file-meta", text: formatBytes(file.size) }),
-        el("span", { className: "fillo-sr-only", text: "Uploaded" }),
+        el("span", {
+          className: "fillo-file-meta",
+          text: DEFAULT_FIELD_STRINGS.uploadedFile(formatBytes(file.size))
+        })
+      ]);
+      const actions = el("span", { className: "fillo-file-actions" });
+      actions.appendChild(
         fileActionBtn(
           "fillo-file-remove",
-          `Remove ${file.name}`,
-          "\xD7",
+          `${DEFAULT_FIELD_STRINGS.uploadRemove} ${file.name}`,
+          closeIcon(),
           () => context.setValue(done.filter((f) => f.fileId !== file.fileId))
         )
-      ]);
+      );
+      appendChildren(li, [fileStateIcon("done"), content, actions]);
       list.appendChild(li);
     }
     for (const row of rows) {
       const failed = row.error !== void 0;
       const li = el("li", {
-        className: `fillo-file${failed ? " fillo-file--failed" : ""}`,
-        attrs: failed ? {} : {
-          role: "progressbar",
-          "aria-label": `Uploading ${row.name}`,
-          "aria-valuemin": "0",
-          "aria-valuemax": "100",
-          "aria-valuenow": String(Math.round(row.fraction * 100))
-        }
+        className: `fillo-file${failed ? " fillo-file--failed" : ""}`
       });
-      li.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
+      li.appendChild(fileStateIcon(failed ? "failed" : "uploading"));
+      const content = el("span", { className: "fillo-file-content" });
+      content.appendChild(el("span", { className: "fillo-file-name", text: row.name }));
       if (failed) {
         const actions = el("span", { className: "fillo-file-actions" });
-        if (remaining > 0) {
+        content.appendChild(el("span", { className: "fillo-file-error", text: row.error ?? "" }));
+        li.appendChild(content);
+        if (!row.tooLarge && remaining > 0) {
           actions.appendChild(
             fileActionBtn(
               "fillo-file-retry",
@@ -1459,29 +1504,47 @@ function fileUpload(context) {
         actions.appendChild(
           fileActionBtn(
             "fillo-file-remove",
-            "Dismiss",
-            "\xD7",
+            `${DEFAULT_FIELD_STRINGS.uploadDismiss} ${row.name}`,
+            closeIcon(),
             () => internal.uploadAction?.(row.key, "dismiss")
           )
         );
         li.appendChild(actions);
-        li.appendChild(el("span", { className: "fillo-file-error", text: row.error ?? "" }));
       } else {
         const bar = el("span", { className: "fillo-progress-bar" });
         bar.style.width = `${row.fraction * 100}%`;
-        appendChildren(li, [
+        content.appendChild(
           el("span", {
             className: "fillo-file-meta",
-            text: `${Math.round(row.fraction * 100)}% of ${formatBytes(row.size)}`
-          }),
+            text: DEFAULT_FIELD_STRINGS.uploadingFile(
+              Math.round(row.fraction * 100),
+              formatBytes(row.size)
+            )
+          })
+        );
+        const actions = el("span", { className: "fillo-file-actions" });
+        actions.appendChild(
           fileActionBtn(
             "fillo-file-remove",
-            `Cancel ${row.name}`,
-            "\xD7",
+            `${DEFAULT_FIELD_STRINGS.uploadCancel} ${row.name}`,
+            closeIcon(),
             () => internal.uploadAction?.(row.key, "cancel")
-          ),
+          )
+        );
+        appendChildren(li, [
+          content,
+          actions,
           appendChildren(
-            el("span", { className: "fillo-progress", attrs: { "aria-hidden": "true" } }),
+            el("span", {
+              className: "fillo-progress",
+              attrs: {
+                role: "progressbar",
+                "aria-label": `Uploading ${row.name}`,
+                "aria-valuemin": "0",
+                "aria-valuemax": "100",
+                "aria-valuenow": String(Math.round(row.fraction * 100))
+              }
+            }),
             [bar]
           )
         ]);
@@ -2162,7 +2225,8 @@ var DomFormController = class {
           name: row.name,
           size: row.size,
           fraction: row.fraction,
-          error: row.error
+          error: row.error,
+          tooLarge: row.tooLarge
         });
     }
     return rows;
@@ -2179,6 +2243,7 @@ var DomFormController = class {
     } else if (action === "dismiss") {
       this.inFlight.delete(key);
     } else {
+      if (row.tooLarge) return;
       this.inFlight.delete(key);
       void this.startUpload(row.fieldId, row.file, row.maxFiles);
     }
@@ -2242,6 +2307,7 @@ var DomFormController = class {
     const maxFileSizeMb = this.uploadFileSizeLimitMb ? Math.min(configuredMaxMb, this.uploadFileSizeLimitMb) : configuredMaxMb;
     const maxBytes = maxFileSizeMb * 1024 * 1024;
     const selected = withinLimit.filter((file) => file.size <= maxBytes);
+    const oversizedFiles = withinLimit.filter((file) => file.size > maxBytes);
     const dropped = files.length - withinLimit.length;
     const oversized = withinLimit.length - selected.length;
     if (dropped > 0 || oversized > 0) {
@@ -2251,17 +2317,29 @@ var DomFormController = class {
           `You can attach up to ${maxFiles} file${maxFiles === 1 ? "" : "s"}. ${dropped} ${dropped === 1 ? "file was" : "files were"} not added.`
         );
       }
-      if (oversized > 0) {
-        notices.push(
-          `${oversized} ${oversized === 1 ? "file exceeds" : "files exceed"} the ${maxFileSizeMb} MB limit.`
-        );
-      }
       const text = notices.join(" ");
-      this.uploadNotices.set(field.id, text);
-      this.announce(text);
+      if (text) this.uploadNotices.set(field.id, text);
+      else this.uploadNotices.delete(field.id);
+      if (text) this.announce(text);
     } else {
       this.uploadNotices.delete(field.id);
     }
+    for (const file of oversizedFiles) {
+      const message = DEFAULT_FIELD_STRINGS.fileTooLarge(maxFileSizeMb);
+      const key = `${file.name}-${file.size}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      this.inFlight.set(key, {
+        fieldId: field.id,
+        name: file.name,
+        size: file.size,
+        fraction: 0,
+        error: message,
+        tooLarge: true,
+        file,
+        controller: new AbortController(),
+        maxFiles
+      });
+      this.announceAlert(message);
+    }
     if (selected.length === 0) {
       this.queueRender();
       return;
@@ -2436,11 +2514,6 @@ var DomFormController = class {
   applyFocus(intent, captured) {
     if (typeof document === "undefined") return;
     if (intent === "error") {
-      const summary = this.element.querySelector(".fillo-error-summary");
-      if (summary) {
-        summary.focus();
-        return;
-      }
       const invalid = this.element.querySelector('[aria-invalid="true"]');
       invalid && focusableWithin(invalid)?.focus();
       return;
@@ -2770,8 +2843,6 @@ var DomFormController = class {
         })
       );
     }
-    const summary = this.renderErrorSummary(api);
-    if (summary) content.appendChild(summary);
     const blocks = el("div", { className: "fillo-blocks", attrs: { "data-fillo": "blocks" } });
     for (const block of api.blocks) {
       const rendered = this.renderBlock(pipeBlock(block, this.mutableData, api.form), api);
@@ -2879,45 +2950,6 @@ var DomFormController = class {
     }
     return form;
   }
-  /** GOV.UK error summary (audit P2.8): scoped to the CURRENTLY RENDERED
-   *  page — a failed submit already jumps to the first page with a visible
-   *  error, so every link resolves to something in the live tree. Per-field
-   *  messages lose their own role="alert"; this is the one alert. */
-  renderErrorSummary(api) {
-    const fields = api.blocks.filter(isField).filter((field) => api.errors[field.id]);
-    if (fields.length === 0) return null;
-    const box = el("div", {
-      className: "fillo-error-summary",
-      attrs: { role: "alert", tabindex: "-1", "data-fillo": "error-summary" }
-    });
-    box.appendChild(
-      el("p", {
-        className: "fillo-error-summary-title",
-        text: DEFAULT_FIELD_STRINGS.errorSummaryTitle
-      })
-    );
-    const list = el("ul");
-    for (const field of fields) {
-      const link = el("a", {
-        text: `${field.label}: ${api.errors[field.id]}`,
-        attrs: { href: `#${fieldIds(this.instanceId, field.id).inputId}` }
-      });
-      link.addEventListener("click", (event) => {
-        event.preventDefault();
-        const fieldEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
-          (node) => node.getAttribute("data-field") === field.id
-        );
-        if (!fieldEl) return;
-        const invalid = fieldEl.querySelector('[aria-invalid="true"]') ?? fieldEl;
-        focusableWithin(invalid)?.focus();
-      });
-      const item = el("li");
-      item.appendChild(link);
-      list.appendChild(item);
-    }
-    box.appendChild(list);
-    return box;
-  }
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
     const setValue = (value, options) => {
@@ -2936,7 +2968,7 @@ var DomFormController = class {
     const context = {
       field: block,
       value: api.data[block.id],
-      error: api.errors[block.id],
+      error: api.errors[block.id] === REQUIRED_FIELD_MESSAGE ? requiredFieldMessage(block, DEFAULT_FIELD_STRINGS) : api.errors[block.id],
       ids: fieldIds(this.instanceId, block.id),
       api,
       setValue,