@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-upload/rel-upload.ts

@@ -3,6 +3,7 @@ import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-alert/rel-alert";
 import "../rel-progress/rel-progress";
+import { announce } from "../../utils/announce";
 
 /** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
 export type UploadStatus = "ready" | "uploading" | "success" | "error";
@@ -143,6 +144,8 @@ export class RelUpload extends LitElement {
   private aborter?: AbortController;
   private delayTimer?: ReturnType<typeof setTimeout>;
   private lastSignature = "";
+  private lastHeading = "";
+  private lastAlertText = "";
 
   static styles = css`
     :host {
@@ -601,6 +604,13 @@ export class RelUpload extends LitElement {
     if (rejected.length) this.emit("rel-invalid", { rejected });
     this.emit("rel-files-added", { added, rejected });
     this.emit("rel-change", { files: this.files });
+    const accepted = added.length - rejected.length;
+    if (accepted > 0) {
+      announce(`${accepted} file${accepted === 1 ? "" : "s"} added`);
+    }
+    if (rejected.length > 0) {
+      announce(`${rejected.length} file${rejected.length === 1 ? "" : "s"} rejected`, "assertive");
+    }
     this.notify();
   }
 
@@ -727,6 +737,7 @@ export class RelUpload extends LitElement {
     this.files = this.files.filter((f) => f.id !== id);
     this.emit("rel-remove", { id, file: target?.file });
     this.emit("rel-change", { files: this.files });
+    if (target) announce(`${target.name} removed`);
     this.notify();
   }
 
@@ -738,6 +749,7 @@ export class RelUpload extends LitElement {
     this.delayed = false;
     if (this.inputEl) this.inputEl.value = "";
     this.emit("rel-change", { files: this.files });
+    announce("File list cleared");
     this.notify();
   }
 
@@ -803,6 +815,19 @@ export class RelUpload extends LitElement {
 
   updated() {
     this.notify();
+    const heading = this.files.length ? this.listHeading : "";
+    if (heading !== this.lastHeading) {
+      this.lastHeading = heading;
+      if (heading) {
+        announce(heading, this.phase === "failed" ? "assertive" : "polite");
+      }
+    }
+    const alert = this.alertContent;
+    const alertText = alert ? `${alert.message1}. ${alert.message2}` : "";
+    if (alertText !== this.lastAlertText) {
+      this.lastAlertText = alertText;
+      if (alertText) announce(alertText, "assertive");
+    }
   }
 
   // ── render ────────────────────────────────────────────────────────────────