From 4fa2a43eaf6312a0e74efe7727469f3f57c1d444 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 22 Sep 2026 20:25:37 +0300
Subject: [PATCH 1/8] feat(file-dropzone): add new TEDI-Ready component #588

---
 skills/tedi-angular/references/components.md  |   48 +-
 .../file-dropzone-file.directive.ts           |   48 +
 .../file-dropzone.component.html              |  101 ++
 .../file-dropzone.component.scss              |   73 ++
 .../file-dropzone.component.spec.ts           | 1122 +++++++++++++++++
 .../file-dropzone/file-dropzone.component.ts  |  595 +++++++++
 .../file-dropzone/file-dropzone.stories.ts    |  479 +++++++
 .../form/file-dropzone/file-dropzone.types.ts |   36 +
 .../components/form/file-dropzone/index.ts    |    3 +
 src/tedi/components/form/index.ts             |    1 +
 src/tedi/services/translation/translations.ts |   55 +-
 src/tedi/utils/file.util.ts                   |   18 +
 src/tedi/utils/index.ts                       |    1 +
 tsconfig.lib.json                             |    2 +-
 14 files changed, 2578 insertions(+), 4 deletions(-)
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.component.html
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.component.scss
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.component.ts
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
 create mode 100644 src/tedi/components/form/file-dropzone/file-dropzone.types.ts
 create mode 100644 src/tedi/components/form/file-dropzone/index.ts
 create mode 100644 src/tedi/utils/file.util.ts

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index cb16bdba7..a16c53f33 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -110,10 +110,11 @@ the part of this document worth maintaining by hand.
 
 ### The `/tedi` and `/community` entry points collide
 
-This is the highest-value trap in the Angular library and it has no React equivalent. **25 selectors
+This is the highest-value trap in the Angular library and it has no React equivalent. **27 selectors
 are declared in both entry points, under identical class names**, including `tedi-card`,
 `tedi-modal`, `tedi-accordion`, `tedi-tabs`, `tedi-dropdown`, `tedi-form-field`, `tedi-pagination`,
-`tedi-search`, `tedi-tag`, `[tedi-floating-button]`, and the checkbox/radio group family.
+`tedi-search`, `tedi-tag`, `[tedi-floating-button]`, `tedi-file-dropzone`, and the checkbox/radio
+group family.
 
 `CardComponent` from `/community` and `CardComponent` from `/tedi` are different components with
 different input APIs behind the same `<tedi-card>` tag. Consequences:
@@ -200,6 +201,49 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   `icon` input, not from projection, so you cannot swap in your own `tedi-icon` or add trailing
   content. It is decorative and `aria-hidden`, which means the projected text is the whole accessible
   name — if the icon carries meaning the text doesn't, compose a heading and an icon yourself.
+- **`tedi-file-dropzone`'s `files` has no separate "default" input** — unlike the React version, which
+  needs `defaultFiles` alongside `files` to distinguish uncontrolled from controlled. The binding
+  picks the mode: `[files]` seeds the list and leaves the dropzone owning it, `[(files)]` keeps the
+  parent in sync, `[formControl]` hands it to the form. Bind a stable reference, though: an inline
+  literal (`[files]="[{ name: 'a.pdf' }]"`) is a new array on every check, so it is written back each
+  time and discards whatever the user added.
+- **`tedi-file-dropzone` validates itself.** It registers on `NG_VALIDATORS`, so a `formControl` bound
+  to it fails with a `rejectedFiles` error (carrying the offending files) while any rejected file is
+  still listed — you don't add a validator for that. `Validators.required` alone would pass on a list
+  of visibly broken files, since `keepRejectedFiles` keeps them in the value. Same shape as Angular
+  Material's datepicker: the constraint comes from the component's own inputs (`accept`, `maxSize`), so
+  the component owns the rule. No `registerOnValidatorChange` is needed — `validate()` is a pure
+  function of the control value, which Angular already revalidates on every change.
+- **`tedi-file-dropzone` emits `fileRemove` alongside `filesChange`.** `filesChange` gives the new list;
+  `fileRemove` gives the single entry the user deleted, so an in-flight upload can be aborted or a blob
+  URL revoked without diffing the two arrays.
+- **`tedi-file-dropzone` selects files, it does not upload them.** It validates against `accept` and
+  `maxSize` and hands you the list; the upload, and setting each file's `isLoading` / `isValid` as it
+  progresses, is yours. `keepRejectedFiles` decides what happens to a file that fails `accept` or
+  `maxSize`: on (the default) keeps it in the list with its reason in that file's `error`, leaving the
+  dropzone's own border neutral — so the form value holds it with `isValid: false` and you must filter
+  on `isValid` before uploading. Off discards it instead and summarises every rejection in one message
+  under the dropzone, which also paints the border red. `error` is writable, so a failure the upload
+  came back with lands on the file it belongs to.
+- **Selecting a file that is already listed is skipped**, matched on name, size and mtime — so two
+  different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to
+  replace the built-in `tedi-attachment` row when a file needs a progress bar, an icon or its own
+  feedback.
+- **`tedi-file-dropzone`'s `label` is the text inside the dropzone**, not a field label above it, and
+  it names the file input — so the control is never nameless. Don't add a second `<label tedi-label>`
+  for `inputId`, and don't wrap it in `tedi-form-field` (which projects one): the drop zone is itself a
+  `<label>` around the input, so another one is a `form-field-multiple-labels` finding and assistive
+  tech handles it inconsistently. Fold the field name into `label` instead. `tedi-form-field` is also
+  wrong here because it places its projected feedback text after the file list rather than under the
+  dropzone.
+- **The drop zone is a `<label>` on purpose**, which is why no field label can sit above it. It needs no
+  JS — clicking anywhere opens the picker and the input stays the focus target. Carbon, USWDS, GOV.UK
+  and Polaris all make the zone a `div`/`button` instead, precisely so a field label can sit above it,
+  and pay for it with `input.click()` plus a duplicated hidden label, an `aria-label` or an
+  `aria-labelledby`; TEDI has no label above the zone in Figma or React, so that trade isn't worth
+  making. If one is ever needed, follow GOV.UK — `<button aria-labelledby="<field label id> <zone text
+  id>">` in place of the wrapping `<label>`. Adding an `ariaLabelledby` input to the current markup
+  would not work, since `aria-labelledby` overrides the wrapping label instead of appending to it.
 
 ### Search suggestions
 
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts b/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts
new file mode 100644
index 000000000..505198e08
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts
@@ -0,0 +1,48 @@
+import { Directive, inject, TemplateRef } from "@angular/core";
+import { FileDropzoneFile } from "./file-dropzone.types";
+
+export interface FileDropzoneFileContext {
+  /** The file this row renders, bound by `let-file` without naming a key. */
+  $implicit: FileDropzoneFile;
+  /** Removes this file from the dropzone. */
+  remove: () => void;
+  /** Translated accessible name for the remove control, including the file name. */
+  removeLabel: string;
+}
+
+/**
+ * Replaces the built-in `tedi-attachment` row for every selected file. Use it
+ * to add a progress bar, extra actions or per-file feedback.
+ *
+ * @example
+ * ```html
+ * <tedi-file-dropzone multiple [(files)]="files">
+ *   <ng-template tediFileDropzoneFile let-file let-remove="remove" let-removeLabel="removeLabel">
+ *     <tedi-attachment [name]="file.name" icon="description">
+ *       @if (file.isLoading) {
+ *         <tedi-progress-bar [value]="progressFor(file)" />
+ *       }
+ *       <tedi-attachment-actions>
+ *         <button tedi-button variant="neutral" [attr.aria-label]="removeLabel" (click)="remove()">
+ *           <tedi-icon name="delete" [size]="18" color="inherit" />
+ *         </button>
+ *       </tedi-attachment-actions>
+ *     </tedi-attachment>
+ *   </ng-template>
+ * </tedi-file-dropzone>
+ * ```
+ */
+@Directive({
+  selector: "[tediFileDropzoneFile]",
+  standalone: true,
+})
+export class FileDropzoneFileDirective {
+  readonly template = inject<TemplateRef<FileDropzoneFileContext>>(TemplateRef);
+
+  static ngTemplateContextGuard(
+    _directive: FileDropzoneFileDirective,
+    _context: unknown,
+  ): _context is FileDropzoneFileContext {
+    return true;
+  }
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.html b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
new file mode 100644
index 000000000..fc97cce78
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
@@ -0,0 +1,101 @@
+<label
+  class="tedi-file-dropzone__zone"
+  [class.tedi-file-dropzone__zone--invalid]="isInvalid()"
+  [class.tedi-file-dropzone__zone--valid]="isValid()"
+  [class.tedi-file-dropzone__zone--drop-over]="isDragActive()"
+  (dragenter)="handleDragEnter($event)"
+  (dragover)="handleDragOver($event)"
+  (dragleave)="handleDragLeave()"
+  (drop)="handleDrop($event)"
+>
+  <input
+    #fileInput
+    class="tedi-file-dropzone__input sr-only"
+    type="file"
+    [id]="resolvedId()"
+    [attr.name]="name()"
+    [attr.accept]="accept()"
+    [multiple]="multiple()"
+    [disabled]="isDisabled()"
+    [attr.aria-invalid]="isInvalid() || null"
+    [attr.aria-describedby]="describedBy.attribute()"
+    (change)="handleSelection($event)"
+    (blur)="handleBlur()"
+  />
+  <tedi-icon
+    class="tedi-file-dropzone__icon"
+    name="attach_file"
+    [size]="24"
+    [color]="isDisabled() ? 'inherit' : 'secondary'"
+  />
+  <span class="tedi-file-dropzone__label">{{ resolvedLabel() }}</span>
+</label>
+
+@if (rejectionError(); as error) {
+  <tedi-feedback-text [id]="feedbackIds().error" [text]="error" type="error" />
+}
+
+@if (feedbackText(); as feedback) {
+  <tedi-feedback-text
+    [id]="feedbackIds().feedback"
+    [text]="feedback.text"
+    [type]="feedback.type ?? 'hint'"
+    [position]="feedback.position ?? 'left'"
+  />
+}
+
+@if (restrictionsHint(); as hint) {
+  <tedi-feedback-text [id]="feedbackIds().hint" [text]="hint" />
+}
+
+@if (files().length) {
+  <ul
+    class="tedi-file-dropzone__files"
+    [attr.aria-label]="selectedFilesLabel()"
+  >
+    @for (row of fileRows(); track row.file) {
+      <li class="tedi-file-dropzone__file">
+        @if (fileTemplate(); as template) {
+          <ng-container
+            [ngTemplateOutlet]="template.template"
+            [ngTemplateOutletContext]="row.context"
+          />
+        } @else {
+          <tedi-attachment
+            [name]="row.name"
+            [fileSize]="row.size"
+            [error]="row.file.error"
+            [invalid]="row.file.isValid === false"
+          >
+            <tedi-attachment-actions>
+              <button
+                tedi-button
+                type="button"
+                variant="neutral"
+                [disabled]="isDisabled()"
+                [attr.aria-label]="row.removeLabel"
+                (click)="removeFile(row.file)"
+              >
+                <tedi-icon name="delete" [size]="18" color="inherit" />
+              </button>
+            </tedi-attachment-actions>
+          </tedi-attachment>
+        }
+        @if (row.file.isValid === false) {
+          <span class="sr-only">{{ rejectedLabel() }}: {{ row.name }}</span>
+        }
+      </li>
+    }
+  </ul>
+}
+
+<div
+  class="tedi-file-dropzone__announcement sr-only"
+  role="status"
+  aria-live="polite"
+  aria-atomic="true"
+>
+  @for (entry of announcements(); track entry.id) {
+    <span>{{ entry.text }}</span>
+  }
+</div>
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
new file mode 100644
index 000000000..0d5c8d8d1
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
@@ -0,0 +1,73 @@
+.tedi-file-dropzone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-04);
+}
+
+.tedi-file-dropzone__zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);
+  color: var(--file-dropzone-text-default);
+  text-align: center;
+  cursor: pointer;
+  background-color: var(--file-dropzone-background-default);
+  border: var(--tedi-borders-02) dotted var(--file-dropzone-border-default);
+  border-radius: var(--form-field-radius);
+  transition:
+    color 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--file-dropzone-background-hover);
+    border-color: var(--file-dropzone-border-hover);
+  }
+
+  &:active {
+    border-color: var(--file-dropzone-border-active);
+  }
+
+  &:has(input:focus-visible) {
+    outline: var(--tedi-borders-02) solid var(--file-dropzone-border-focus);
+    outline-offset: var(--tedi-borders-01);
+    border-color: var(--file-dropzone-border-focus);
+  }
+}
+
+.tedi-file-dropzone__input {
+  // Core's .sr-only ships an invalid `clip-path: rect(0, 0, 0, 0)`, so nothing
+  // clips it and axe cannot resolve the file input's background. Drop once fixed.
+  clip-path: inset(50%);
+}
+
+.tedi-file-dropzone__zone--drop-over.tedi-file-dropzone__zone {
+  color: var(--file-dropzone-text-drop-over);
+  background-color: var(--file-dropzone-background-drop-over);
+  border-color: var(--file-dropzone-border-drop-over);
+}
+
+.tedi-file-dropzone__zone--invalid.tedi-file-dropzone__zone {
+  border-color: var(--form-general-feedback-error-border);
+}
+
+.tedi-file-dropzone__zone--valid.tedi-file-dropzone__zone {
+  border-color: var(--form-general-feedback-success-border);
+}
+
+.tedi-file-dropzone--disabled .tedi-file-dropzone__zone {
+  color: var(--general-text-disabled);
+  cursor: not-allowed;
+  background-color: var(--file-dropzone-background-disabled);
+  border-color: var(--file-dropzone-border-disabled);
+}
+
+.tedi-file-dropzone__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-08);
+  padding-left: 0;
+  margin: var(--layout-grid-gutters-04) 0 0;
+  list-style: none;
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
new file mode 100644
index 000000000..701f317b5
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -0,0 +1,1122 @@
+import { Component, signal } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { TediTranslationService } from "../../../services/translation/translation.service";
+import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token";
+import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
+import { FileDropzoneComponent } from "./file-dropzone.component";
+import { FileDropzoneFileDirective } from "./file-dropzone-file.directive";
+import { FileDropzoneFile } from "./file-dropzone.types";
+
+class TranslationMock {
+  translate(key: string, ...args: unknown[]) {
+    return args.length ? `${key}:${args.join(",")}` : key;
+  }
+  track(key: string) {
+    return () => key;
+  }
+}
+
+const breakpointMock = {
+  isBelowBreakpoint: () => signal(false).asReadonly(),
+};
+
+// `lastModified` is pinned because it defaults to `Date.now()`, which would make
+// two fabricated files differ by milliseconds — a real file picked twice carries
+// the same mtime, which is what the duplicate check relies on.
+const announced = (fixture: ComponentFixture<unknown>): string =>
+  (
+    fixture.debugElement.query(By.css(".tedi-file-dropzone__announcement"))
+      .nativeElement as HTMLElement
+  ).textContent?.trim() ?? "";
+
+const makeFile = (
+  name: string,
+  size = 100,
+  type = "application/pdf",
+  lastModified = 1_700_000_000_000,
+): File => {
+  const file = new File(["x"], name, { type, lastModified });
+  Object.defineProperty(file, "size", { value: size });
+  return file;
+};
+
+const fileInput = (fixture: ComponentFixture<unknown>): HTMLInputElement =>
+  fixture.debugElement.query(By.css("input[type=file]")).nativeElement;
+
+const selectFiles = (fixture: ComponentFixture<unknown>, files: File[]) => {
+  const input = fileInput(fixture);
+  Object.defineProperty(input, "files", { value: files, configurable: true });
+  input.dispatchEvent(new Event("change"));
+  fixture.detectChanges();
+};
+
+const dispatchDrag = (
+  fixture: ComponentFixture<unknown>,
+  type: string,
+  files: File[] = [],
+) => {
+  const zone = fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+    .nativeElement as HTMLElement;
+  const event = new Event(type, { bubbles: true }) as Event & {
+    dataTransfer: unknown;
+  };
+  event.dataTransfer = { files, types: ["Files"], dropEffect: "none" };
+  zone.dispatchEvent(event);
+  fixture.detectChanges();
+  return zone;
+};
+
+const baseProviders = [
+  { provide: TediTranslationService, useClass: TranslationMock },
+  { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+  { provide: BreakpointService, useValue: breakpointMock },
+];
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent],
+  template: `<tedi-file-dropzone
+    inputId="described-by-dropzone"
+    aria-describedby="described-by-dropzone external-help"
+    [maxSize]="1024 ** 2"
+  />`,
+})
+class DescribedByHostComponent {}
+
+describe("FileDropzoneComponent", () => {
+  let fixture: ComponentFixture<FileDropzoneComponent>;
+  let component: FileDropzoneComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileDropzoneComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(FileDropzoneComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  const text = (selector: string) =>
+    fixture.debugElement
+      .query(By.css(selector))
+      ?.nativeElement.textContent.trim();
+
+  it("creates and shows the translated label", () => {
+    expect(component).toBeTruthy();
+    expect(text(".tedi-file-dropzone__label")).toBe("file-dropzone.label");
+  });
+
+  it("uses a custom label when given", () => {
+    fixture.componentRef.setInput("label", "Lohista failid siia");
+    fixture.detectChanges();
+
+    expect(text(".tedi-file-dropzone__label")).toBe("Lohista failid siia");
+  });
+
+  it("names the input from the dropzone label", () => {
+    const input = fileInput(fixture);
+    const zone = fixture.debugElement.query(
+      By.css("label.tedi-file-dropzone__zone"),
+    ).nativeElement as HTMLLabelElement;
+
+    expect(zone.contains(input)).toBe(true);
+    expect(zone.textContent).toContain("file-dropzone.label");
+  });
+
+  it("gives each instance its own generated id", () => {
+    @Component({
+      standalone: true,
+      imports: [FileDropzoneComponent],
+      template: `<tedi-file-dropzone [maxSize]="1" /><tedi-file-dropzone
+          [maxSize]="1"
+        />`,
+    })
+    class TwoDropzonesComponent {}
+
+    const pair = TestBed.createComponent(TwoDropzonesComponent);
+    pair.detectChanges();
+
+    const [first, second] = pair.debugElement
+      .queryAll(By.css("input[type=file]"))
+      .map((el) => el.nativeElement as HTMLInputElement);
+
+    expect(first.id).not.toBe(second.id);
+    // The feedback ids are derived from it, so a collision would cross-wire
+    // one dropzone's aria-describedby to the other's hint.
+    expect(first.getAttribute("aria-describedby")).not.toBe(
+      second.getAttribute("aria-describedby"),
+    );
+  });
+
+  it("associates an external label through inputId", () => {
+    fixture.componentRef.setInput("inputId", "attachments");
+    fixture.detectChanges();
+
+    expect(fileInput(fixture).id).toBe("attachments");
+  });
+
+  it("disables the input and marks the host", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.disabled).toBe(true);
+    expect(
+      fixture.nativeElement.classList.contains("tedi-file-dropzone--disabled"),
+    ).toBe(true);
+  });
+
+  it("forwards accept and multiple to the input", () => {
+    fixture.componentRef.setInput("accept", ".pdf,.txt");
+    fixture.componentRef.setInput("multiple", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.getAttribute("accept")).toBe(".pdf,.txt");
+    expect(input.multiple).toBe(true);
+  });
+
+  describe("selection", () => {
+    it("adds a picked file and announces it", () => {
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+      expect(announced(fixture)).toBe("file-upload.added:1");
+    });
+
+    it("clears the input value so the same file can be picked again", () => {
+      const input = fileInput(fixture);
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(input.value).toBe("");
+    });
+
+    it("replaces the file when not multiple", () => {
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("second.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "second.pdf",
+      ]);
+    });
+
+    it("skips a file that is already listed", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+      expect(announced(fixture)).toBe(
+        "file-upload.duplicates-skipped:'report.pdf'",
+      );
+    });
+
+    it("keeps a same-named file that differs in size", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("IMG_0001.jpg", 100)]);
+      selectFiles(fixture, [makeFile("IMG_0001.jpg", 250)]);
+
+      expect(component.files().map((file) => file.size)).toEqual([100, 250]);
+    });
+
+    it("adds the new files and skips only the repeats in one selection", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("first.pdf"), makeFile("second.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "first.pdf",
+        "second.pdf",
+      ]);
+    });
+
+    it("appends files when multiple", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("second.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "first.pdf",
+        "second.pdf",
+      ]);
+    });
+  });
+
+  describe("validation", () => {
+    it("rejects a file with a disallowed extension", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text.tedi-feedback-text--error")).toContain(
+        "file-upload.extension-rejected",
+      );
+    });
+
+    it("accepts a wildcard MIME group", () => {
+      fixture.componentRef.setInput("accept", "image/*");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("photo.png", 100, "image/png")]);
+
+      expect(component.files().map((file) => file.name)).toEqual(["photo.png"]);
+    });
+
+    it("accepts an exact MIME type", () => {
+      fixture.componentRef.setInput("accept", "application/pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+    });
+
+    it("rejects a file over maxSize", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text.tedi-feedback-text--error")).toContain(
+        "file-upload.size-rejected",
+      );
+    });
+
+    it("keeps rejected files marked invalid with keepRejectedFiles", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("ok.pdf"),
+        makeFile("bad.txt", 100, "text/plain"),
+      ]);
+
+      expect(component.files().map((file) => file.isValid)).toEqual([
+        true,
+        false,
+      ]);
+      expect(
+        fixture.debugElement.queryAll(By.css(".tedi-attachment--error")).length,
+      ).toBe(1);
+    });
+
+    it("gives each individually rejected file its own message", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("bad.txt", 100, "text/plain"),
+        makeFile("big.pdf", 2 * 1024 ** 2),
+      ]);
+
+      expect(component.files().map((file) => file.error)).toEqual([
+        "file-dropzone.file-rejected-extension",
+        "file-dropzone.file-rejected-size",
+      ]);
+      expect(
+        fixture.debugElement
+          .queryAll(By.css(".tedi-attachment__feedback"))
+          .map((el) => el.nativeElement.textContent.trim()),
+      ).toEqual([
+        "file-dropzone.file-rejected-extension",
+        "file-dropzone.file-rejected-size",
+      ]);
+    });
+
+    it("summarises rejections under the dropzone without keepRejectedFiles", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("ok.pdf"),
+        makeFile("bad.txt", 100, "text/plain"),
+      ]);
+
+      expect(component.files().map((file) => file.name)).toEqual(["ok.pdf"]);
+      expect(
+        text(
+          "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+        ),
+      ).toContain("file-upload.extension-rejected");
+    });
+
+    it("clears the summary on the next selection with no rejections", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      const summary = () =>
+        text(
+          "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+        );
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(summary()).toContain("file-upload.extension-rejected");
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      expect(summary()).toBeUndefined();
+    });
+
+    it("drops the aggregate error when files carry their own", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(
+        fixture.debugElement.query(
+          By.css(
+            "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+          ),
+        ),
+      ).toBeNull();
+      expect(announced(fixture)).toBe(
+        "file-upload.extension-rejected:'bad.txt'",
+      );
+    });
+
+    it("renders a consumer-supplied error on a preloaded file", () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "scan.png", isValid: false, error: "Vale formaat" },
+      ]);
+      fixture.detectChanges();
+
+      expect(text(".tedi-attachment__feedback")).toBe("Vale formaat");
+    });
+
+    it("lists a rejected file so the user can see and remove it", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      expect(text(".tedi-attachment__title")).toBe("notes.txt");
+      expect(
+        fixture.debugElement.queryAll(By.css(".tedi-attachment--error")).length,
+      ).toBe(1);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("leaves the border alone when rejected files carry their own reason", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(component.files().map((file) => file.error)).toEqual([
+        "file-dropzone.file-rejected-extension",
+      ]);
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).not.toContain("tedi-file-dropzone__zone--invalid");
+    });
+
+    it("marks the zone invalid while an error is shown", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
+
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).toContain("tedi-file-dropzone__zone--invalid");
+    });
+  });
+
+  describe("feedback", () => {
+    it("shows the restrictions hint and the rejection error at the same time", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      expect(messages.length).toBe(2);
+      expect(messages[0].nativeElement.textContent).toContain(
+        "file-upload.extension-rejected",
+      );
+      expect(messages[1].nativeElement.textContent).toContain(
+        "file-upload.accept",
+      );
+    });
+
+    it("renders the size limit in the unit that reads best", () => {
+      fixture.componentRef.setInput("maxSize", 500 * 1024);
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toContain("500 KB");
+
+      fixture.componentRef.setInput("maxSize", 10 * 1024 ** 2);
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toContain("10 MB");
+    });
+
+    it("keeps errors when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      expect(messages.length).toBe(1);
+      expect(messages[0].nativeElement.textContent).toContain(
+        "file-upload.extension-rejected",
+      );
+    });
+
+    it("describes the input by every message below it", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("feedbackText", { text: "Custom hint" });
+      fixture.detectChanges();
+
+      const input = fileInput(fixture);
+      const id = input.id;
+
+      expect(input.getAttribute("aria-describedby")).toBe(
+        `${id}-feedback ${id}-hint`,
+      );
+    });
+
+    it("merges a consumer's own aria-describedby with its own ids", () => {
+      const host = TestBed.createComponent(DescribedByHostComponent);
+      host.detectChanges();
+
+      const input = fileInput(host);
+      expect(input.getAttribute("aria-describedby")).toBe(
+        `described-by-dropzone external-help ${input.id}-hint`,
+      );
+    });
+
+    it("marks the zone invalid from an error feedbackText", () => {
+      fixture.componentRef.setInput("feedbackText", {
+        text: "Sobimatu fail",
+        type: "error",
+      });
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).toContain("tedi-file-dropzone__zone--invalid");
+    });
+  });
+
+  describe("drag and drop", () => {
+    it("marks the zone while a file is dragged over it", () => {
+      const zone = dispatchDrag(fixture, "dragenter");
+      expect(zone.classList).toContain("tedi-file-dropzone__zone--drop-over");
+
+      dispatchDrag(fixture, "dragleave");
+      expect(zone.classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("adds dropped files and clears the drop state", () => {
+      dispatchDrag(fixture, "dragenter");
+      const zone = dispatchDrag(fixture, "drop", [makeFile("dropped.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "dropped.pdf",
+      ]);
+      expect(zone.classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("validates dropped files, which bypass the accept attribute", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "drop", [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("accepts the drag as a copy so the browser does not open the file", () => {
+      const zone = fixture.debugElement.query(
+        By.css(".tedi-file-dropzone__zone"),
+      ).nativeElement as HTMLElement;
+      const event = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & {
+        dataTransfer: { types: string[]; dropEffect: string };
+      };
+      event.dataTransfer = { types: ["Files"], dropEffect: "none" };
+      zone.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(event.dataTransfer.dropEffect).toBe("copy");
+    });
+
+    it("ignores drops while disabled", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "drop", [makeFile("dropped.pdf")]);
+
+      expect(component.files()).toEqual([]);
+    });
+  });
+
+  describe("file list", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+      selectFiles(fixture, [makeFile("report.pdf", 1024)]);
+    });
+
+    it("labels the list and renders an attachment per file", () => {
+      const list = fixture.debugElement.query(
+        By.css(".tedi-file-dropzone__files"),
+      ).nativeElement as HTMLElement;
+
+      expect(list.getAttribute("aria-label")).toBe(
+        "file-dropzone.selected-files",
+      );
+      expect(list.querySelectorAll("tedi-attachment").length).toBe(1);
+    });
+
+    it("hides the file size unless showFileSize is set", () => {
+      expect(text(".tedi-attachment__size")).toBeUndefined();
+
+      fixture.componentRef.setInput("showFileSize", true);
+      fixture.detectChanges();
+
+      expect(text(".tedi-attachment__size")).toBe("1 KB");
+    });
+
+    it("emits the removed file, and only for a real removal", () => {
+      const removed: string[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file.name ?? ""));
+
+      selectFiles(fixture, [makeFile("second.pdf")]);
+      expect(removed).toEqual([]);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(removed).toEqual(["report.pdf"]);
+    });
+
+    it("does not emit while disabled", () => {
+      const removed: FileDropzoneFile[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file));
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      component["removeFile"](component.files()[0]);
+      fixture.detectChanges();
+
+      expect(removed).toEqual([]);
+      expect(component.files().length).toBe(1);
+    });
+
+    it("removes a file through its remove button", () => {
+      const remove = fixture.debugElement.query(
+        By.css(".tedi-attachment__actions button"),
+      ).nativeElement as HTMLButtonElement;
+
+      expect(remove.getAttribute("aria-label")).toBe("remove report.pdf");
+
+      remove.click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(announced(fixture)).toBe("file-upload.removed:report.pdf");
+    });
+
+    it("moves focus to the previous file's remove button", async () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+        { id: "3", name: "c.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      const buttons = () =>
+        fixture.debugElement
+          .queryAll(By.css(".tedi-attachment__actions button"))
+          .map((el) => el.nativeElement as HTMLButtonElement);
+
+      buttons()[1].click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(buttons()[0]);
+    });
+
+    it("moves focus to the new first row when the first file goes", async () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      fixture.debugElement
+        .queryAll(By.css(".tedi-attachment__actions button"))[0]
+        .nativeElement.click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement,
+      );
+    });
+
+    it("returns focus to the drop zone when the last file goes", async () => {
+      fixture.debugElement
+        .query(By.css(".tedi-attachment__actions button"))
+        .nativeElement.click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__input"))
+          .nativeElement,
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    const zoneEl = () =>
+      fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+        .nativeElement as HTMLElement;
+
+    it("ignores a selection that carries no files", () => {
+      const input = fileInput(fixture);
+      Object.defineProperty(input, "files", {
+        value: null,
+        configurable: true,
+      });
+      input.dispatchEvent(new Event("change"));
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(announced(fixture)).toBe("");
+    });
+
+    it("ignores a drop that carries no dataTransfer", () => {
+      zoneEl().dispatchEvent(new Event("drop", { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("ignores a drag that carries no dataTransfer", () => {
+      zoneEl().dispatchEvent(new Event("dragenter", { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("ignores a drag of something that is not a file", () => {
+      const event = new Event("dragenter", { bubbles: true }) as Event & {
+        dataTransfer: unknown;
+      };
+      event.dataTransfer = { types: ["text/plain"], files: [] };
+      zoneEl().dispatchEvent(event);
+      fixture.detectChanges();
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("ignores drag events while disabled", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "dragenter", [makeFile("report.pdf")]);
+      const overEvent = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: unknown };
+      overEvent.dataTransfer = { types: ["Files"], dropEffect: "none" };
+      zoneEl().dispatchEvent(overEvent);
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+      expect(overEvent.defaultPrevented).toBe(false);
+    });
+
+    it("renders a file that has no name", () => {
+      fixture.componentRef.setInput("files", [{ id: "1" }]);
+      fixture.detectChanges();
+
+      expect(text(".tedi-attachment__title")).toBe("");
+      expect(
+        fixture.debugElement
+          .query(By.css(".tedi-attachment__actions button"))
+          .nativeElement.getAttribute("aria-label"),
+      ).toBe("remove ");
+    });
+
+    it("announces a removal for a file that has no name", () => {
+      fixture.componentRef.setInput("files", [{ id: "1" }]);
+      fixture.detectChanges();
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(announced(fixture)).toBe("file-upload.removed:");
+    });
+
+    it("matches an extensionless file on its MIME type", () => {
+      fixture.componentRef.setInput("accept", "text/plain");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("README", 100, "text/plain")]);
+
+      expect(component.files().map((file) => file.isValid)).toEqual([true]);
+    });
+
+    it("rejects an extensionless file when accept lists extensions", () => {
+      fixture.componentRef.setInput("accept", ".txt");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("README", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+    });
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, ReactiveFormsModule],
+  template: `<tedi-file-dropzone
+    [formControl]="control"
+    accept=".pdf"
+    multiple
+  />`,
+})
+class ReactiveFormsHostComponent {
+  control = new FormControl<FileDropzoneFile[]>([]);
+}
+
+describe("FileDropzoneComponent with reactive forms", () => {
+  let fixture: ComponentFixture<ReactiveFormsHostComponent>;
+  let host: ReactiveFormsHostComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(ReactiveFormsHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("writes the control value into the list", () => {
+    host.control.setValue([{ id: "1", name: "preloaded.pdf" }]);
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-attachment__title"))
+        .nativeElement.textContent,
+    ).toContain("preloaded.pdf");
+  });
+
+  it("pushes picked files back to the control", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+
+    expect(host.control.value?.map((file) => file.name)).toEqual([
+      "report.pdf",
+    ]);
+  });
+
+  it("marks the control touched on blur", () => {
+    const input = fileInput(fixture);
+
+    expect(host.control.touched).toBe(false);
+    input.dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("empties the list when the control is reset", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+    host.control.reset();
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css("tedi-attachment"))).toBeNull();
+  });
+
+  it("fails the control while a rejected file is listed", () => {
+    host.control.setValue([
+      { id: "1", name: "ok.pdf" },
+      { id: "2", name: "bad.png", isValid: false },
+    ]);
+    fixture.detectChanges();
+
+    expect(host.control.invalid).toBe(true);
+    expect(host.control.errors?.["rejectedFiles"]).toEqual([
+      expect.objectContaining({ name: "bad.png" }),
+    ]);
+  });
+
+  it("passes once no rejected file is left", () => {
+    host.control.setValue([{ id: "1", name: "ok.pdf" }]);
+    fixture.detectChanges();
+
+    expect(host.control.valid).toBe(true);
+    expect(host.control.errors).toBeNull();
+  });
+
+  it("revalidates when the user removes the rejected file", () => {
+    selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+    expect(host.control.invalid).toBe(true);
+
+    (
+      fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+        .nativeElement as HTMLButtonElement
+    ).click();
+    fixture.detectChanges();
+
+    expect(host.control.invalid).toBe(false);
+    expect(host.control.value).toEqual([]);
+  });
+
+  it("disables the input from the control", () => {
+    host.control.disable();
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.disabled).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FileDropzoneFileDirective],
+  template: `
+    <tedi-file-dropzone multiple>
+      <ng-template
+        tediFileDropzoneFile
+        let-file
+        let-remove="remove"
+        let-removeLabel="removeLabel"
+      >
+        <span class="custom-row">{{ file.name }}</span>
+        <button
+          type="button"
+          class="custom-remove"
+          [attr.aria-label]="removeLabel"
+          (click)="remove()"
+        >
+          Remove
+        </button>
+      </ng-template>
+    </tedi-file-dropzone>
+  `,
+})
+class TemplateHostComponent {}
+
+describe("FileDropzoneComponent with a custom file template", () => {
+  let fixture: ComponentFixture<TemplateHostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TemplateHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(TemplateHostComponent);
+    fixture.detectChanges();
+    selectFiles(fixture, [makeFile("report.pdf")]);
+  });
+
+  it("renders the projected template instead of the attachment", () => {
+    expect(
+      fixture.debugElement.query(By.css(".custom-row")).nativeElement
+        .textContent,
+    ).toContain("report.pdf");
+    expect(fixture.debugElement.query(By.css("tedi-attachment"))).toBeNull();
+  });
+
+  it("hands the template a translated label for its remove control", () => {
+    expect(
+      fixture.debugElement
+        .query(By.css(".custom-remove"))
+        .nativeElement.getAttribute("aria-label"),
+    ).toBe("remove report.pdf");
+  });
+
+  it("accepts any context shape at compile time", () => {
+    // The guard exists purely so `let-file` is typed inside the template; it is
+    // never consulted at runtime, so nothing else would execute it.
+    expect(
+      FileDropzoneFileDirective.ngTemplateContextGuard(
+        null as never,
+        undefined,
+      ),
+    ).toBe(true);
+  });
+
+  it("removes the file through the template context", () => {
+    (
+      fixture.debugElement.query(By.css(".custom-remove"))
+        .nativeElement as HTMLButtonElement
+    ).click();
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css(".custom-row"))).toBeNull();
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FormsModule],
+  template: `<tedi-file-dropzone
+    [(ngModel)]="files"
+    name="attachments"
+    multiple
+  />`,
+})
+class NgModelHostComponent {
+  files: FileDropzoneFile[] = [];
+}
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FileDropzoneFileDirective],
+  template: `
+    <tedi-file-dropzone multiple>
+      <ng-template tediFileDropzoneFile let-file let-remove="remove">
+        <span class="plain-row" (click)="remove()">{{ file.name }}</span>
+      </ng-template>
+    </tedi-file-dropzone>
+  `,
+})
+class FocuslessTemplateHostComponent {}
+
+describe("FileDropzoneComponent with a template that has no focusable row", () => {
+  it("falls back to the drop zone when the previous row cannot take focus", async () => {
+    TestBed.configureTestingModule({
+      imports: [FocuslessTemplateHostComponent],
+      providers: baseProviders,
+    });
+    const fixture = TestBed.createComponent(FocuslessTemplateHostComponent);
+    fixture.detectChanges();
+    selectFiles(fixture, [makeFile("a.pdf"), makeFile("b.pdf")]);
+    fixture.detectChanges();
+
+    const rows = fixture.debugElement.queryAll(By.css(".plain-row"));
+    expect(rows.length).toBe(2);
+
+    (rows[1].nativeElement as HTMLElement).click();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(
+      fixture.debugElement.query(By.css(".tedi-file-dropzone__input"))
+        .nativeElement,
+    );
+  });
+});
+
+describe("FileDropzoneComponent with template-driven forms", () => {
+  let fixture: ComponentFixture<NgModelHostComponent>;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [NgModelHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(NgModelHostComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it("writes a picked file back to the bound model", async () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.files.map((f) => f.name)).toEqual([
+      "report.pdf",
+    ]);
+  });
+
+  it("renders a model value set by the host", async () => {
+    fixture.componentInstance.files = [{ id: "1", name: "preloaded.pdf" }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-attachment__title"))
+        .nativeElement.textContent,
+    ).toContain("preloaded.pdf");
+  });
+});
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
new file mode 100644
index 000000000..982993875
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -0,0 +1,595 @@
+import { NgTemplateOutlet } from "@angular/common";
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  ElementRef,
+  forwardRef,
+  inject,
+  Injector,
+  input,
+  model,
+  OnInit,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+} from "@angular/forms";
+import { TediTranslationService } from "../../../services/translation/translation.service";
+import { generateUUID } from "../../../helpers/generate-uuid";
+import { formatFileSize } from "../../../utils/file.util";
+import { IconComponent } from "../../base/icon/icon.component";
+import { ButtonComponent } from "../../buttons/button/button.component";
+import { AttachmentComponent } from "../../helpers/attachment/attachment.component";
+import { AttachmentActionsComponent } from "../../helpers/attachment/attachment-actions.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+import { deriveControlState } from "../form-field/derive-control-state";
+import { controlDescribedBy } from "../form-field/control-described-by";
+import {
+  FileDropzoneFileContext,
+  FileDropzoneFileDirective,
+} from "./file-dropzone-file.directive";
+import { FileDropzoneFeedback, FileDropzoneFile } from "./file-dropzone.types";
+
+type FileRejectionReason = "extension" | "size";
+
+let fileDropzoneIdCounter = 0;
+
+const FOCUSABLE =
+  'button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Identifies a file well enough to spot a repeat selection. Name alone is not
+ * enough — `IMG_0001.jpg` collides across devices — so size and mtime join it.
+ */
+const fileIdentity = (file: FileDropzoneFile): string =>
+  `${file.name}:${file.size}:${file.lastModified}`;
+
+@Component({
+  selector: "tedi-file-dropzone",
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    IconComponent,
+    ButtonComponent,
+    AttachmentComponent,
+    AttachmentActionsComponent,
+    FeedbackTextComponent,
+  ],
+  templateUrl: "./file-dropzone.component.html",
+  styleUrl: "./file-dropzone.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileDropzoneComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => FileDropzoneComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    class: "tedi-file-dropzone",
+    "[class.tedi-file-dropzone--disabled]": "isDisabled()",
+  },
+})
+export class FileDropzoneComponent
+  implements OnInit, ControlValueAccessor, Validator
+{
+  private readonly translations = inject(TediTranslationService);
+  private readonly injector = inject(Injector);
+  private announceId = 0;
+  protected readonly announcements = signal<{ id: number; text: string }[]>([]);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly fileInput =
+    viewChild<ElementRef<HTMLInputElement>>("fileInput");
+
+  /**
+   * Files held by the dropzone, and the value written by `formControl` /
+   * `ngModel`. Bind it one-way to seed the list and leave the dropzone owning
+   * it from there, or two-way to stay in sync with it. Every change emits on
+   * the `filesChange` output this `model()` generates.
+   *
+   * Bind a stable reference — a field or a signal. An inline literal
+   * (`[files]="[{ name: 'a.pdf' }]"`) is a new array on every check, so it is
+   * written back each time and discards whatever the user added.
+   */
+  readonly files = model<FileDropzoneFile[]>([]);
+  /**
+   * Id of the file input. Generated when not set.
+   */
+  readonly inputId = input<string>();
+  /**
+   * `name` attribute of the file input, used when the surrounding form is
+   * submitted natively.
+   */
+  readonly name = input<string>();
+  /**
+   * Text inside the dropzone, which also names the file input. Falls back to
+   * the translated `file-dropzone.label`.
+   */
+  readonly label = input<string>();
+  /**
+   * Allowed file types as a comma-separated list of extensions and MIME types
+   * (`".pdf,.txt"`, `"image/png"`, `"image/*"`). Forwarded to the input's
+   * `accept` attribute and re-checked on drop, which bypasses it.
+   */
+  readonly accept = input<string>();
+  /**
+   * Largest accepted file size, in bytes — the unit `File.size` is in. The
+   * restrictions hint renders it in whichever unit reads best, so a sub-megabyte
+   * limit still shows as e.g. `500 KB`.
+   */
+  readonly maxSize = input<number>();
+  /**
+   * Whether more than one file can be held at a time. A single-file dropzone
+   * replaces its file on the next selection.
+   * @default false
+   */
+  readonly multiple = input(false, { transform: booleanAttribute });
+  /**
+   * Keeps rejected files in the list, each carrying its own reason, so the user
+   * can see which of their files failed and remove it. Turn it off to discard a
+   * rejected file instead and summarise every rejection in one message under
+   * the dropzone.
+   * @default true
+   */
+  readonly keepRejectedFiles = input(true, { transform: booleanAttribute });
+  /**
+   * Whether the allowed types and maximum size are summarised in a hint below
+   * the dropzone. Turn it off when the same information is shown elsewhere —
+   * rejection errors still render.
+   * @default true
+   */
+  readonly showRestrictions = input(true, { transform: booleanAttribute });
+  /**
+   * Whether each file's size is shown next to its name.
+   * @default false
+   */
+  readonly showFileSize = input(false, { transform: booleanAttribute });
+  /**
+   * Feedback text below the dropzone. An `error` type also paints the dropzone
+   * border red.
+   */
+  readonly feedbackText = input<FileDropzoneFeedback>();
+  /**
+   * Disables the dropzone from a parent template. Combined with the
+   * reactive-forms disabled state.
+   */
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /**
+   * Forces the error state on, or off, regardless of the reactive-forms state.
+   * Leave unset to let the control derive it.
+   */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  /**
+   * Emits the file the user removed. `filesChange` carries the new list; this
+   * says which entry left it, so an in-flight upload can be aborted or a blob
+   * URL revoked without diffing the two.
+   */
+  readonly fileRemove = output<FileDropzoneFile>();
+
+  private readonly derived = deriveControlState();
+  private readonly formDisabled = signal(false);
+  private readonly dragDepth = signal(0);
+  /**
+   * Summarises the rejections from the last selection. Describes files that
+   * were discarded rather than listed, so it cannot be derived from `files()`.
+   */
+  protected readonly rejectionError = signal<string | undefined>(undefined);
+  private readonly fallbackId = `tedi-file-dropzone-${fileDropzoneIdCounter++}`;
+
+  protected readonly fileTemplate = contentChild(FileDropzoneFileDirective);
+
+  protected readonly isDisabled = computed(
+    () => this.disabled() || this.formDisabled(),
+  );
+
+  protected readonly isInvalid = computed(
+    () =>
+      this.invalid() ||
+      !!this.rejectionError() ||
+      this.feedbackText()?.type === "error" ||
+      this.derived.invalid(),
+  );
+
+  protected readonly isValid = computed(
+    () => !this.isInvalid() && this.feedbackText()?.type === "valid",
+  );
+
+  protected readonly resolvedId = computed(
+    () => this.inputId() ?? this.fallbackId,
+  );
+
+  protected readonly resolvedLabel = computed(
+    () => this.label() ?? this.translations.translate("file-dropzone.label"),
+  );
+
+  protected readonly isDragActive = computed(() => this.dragDepth() > 0);
+
+  protected readonly selectedFilesLabel = this.translations.track(
+    "file-dropzone.selected-files",
+  );
+
+  protected readonly rejectedLabel = this.translations.track(
+    "file-dropzone.rejected",
+  );
+
+  /**
+   * Everything the file list binds, resolved once per `files()` change. Keeps
+   * the template free of calls that would re-run — and re-allocate strings — on
+   * every check.
+   */
+  protected readonly fileRows = computed(() => {
+    const template = this.fileTemplate();
+    const showSize = this.showFileSize();
+    const removeLabel = this.translations.translate("remove");
+
+    return this.files().map((file) => {
+      const name = file.name ?? "";
+      const label = `${removeLabel} ${name}`;
+
+      return {
+        file,
+        name,
+        removeLabel: label,
+        size:
+          showSize && typeof file.size === "number"
+            ? formatFileSize(file.size)
+            : undefined,
+        context: template
+          ? ({
+              $implicit: file,
+              remove: () => this.removeFile(file),
+              removeLabel: label,
+            } satisfies FileDropzoneFileContext)
+          : undefined,
+      };
+    });
+  });
+
+  private readonly acceptTokens = computed(
+    () =>
+      this.accept()
+        ?.split(",")
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean) ?? [],
+  );
+
+  /**
+   * Rendered alongside — not instead of — a rejection error, so an error never
+   * hides the restrictions the user has to satisfy.
+   */
+  protected readonly restrictionsHint = computed(() => {
+    if (!this.showRestrictions()) return undefined;
+
+    const accept = this.accept();
+    const maxSize = this.maxSize();
+    const parts = [
+      accept &&
+        `${this.translations.translate("file-upload.accept")} ${accept.replaceAll(",", ", ")}`,
+      maxSize &&
+        `${this.translations.translate("file-upload.max-size")} ${formatFileSize(maxSize)}`,
+    ].filter(Boolean);
+
+    return parts.join(". ") || undefined;
+  });
+
+  protected readonly feedbackIds = computed(() => {
+    const id = this.resolvedId();
+    return {
+      error: `${id}-error`,
+      feedback: `${id}-feedback`,
+      hint: `${id}-hint`,
+    };
+  });
+
+  /**
+   * The ids are pushed through `controlDescribedBy` rather than bound directly,
+   * so a consumer's own `aria-describedby` on the host is merged in instead of
+   * being stranded on a wrapper the input never references.
+   */
+  readonly describedBy = controlDescribedBy();
+
+  private onChange: (files: FileDropzoneFile[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor() {
+    effect(() => {
+      const ids = this.feedbackIds();
+      this.describedBy.set(
+        [
+          this.rejectionError() ? ids.error : null,
+          this.feedbackText() ? ids.feedback : null,
+          this.restrictionsHint() ? ids.hint : null,
+        ].filter((id): id is string => !!id),
+      );
+    });
+  }
+
+  ngOnInit(): void {
+    this.derived.connect();
+  }
+
+  writeValue(files: FileDropzoneFile[] | null): void {
+    this.files.set(files ?? []);
+  }
+
+  registerOnChange(fn: (files: FileDropzoneFile[]) => void): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * Fails the control while any rejected file is still listed. Without it a
+   * `Validators.required` control reports valid on a list of visibly broken
+   * files, since `keepRejectedFiles` keeps them in the value.
+   */
+  validate(control: AbstractControl): ValidationErrors | null {
+    const rejected = ((control.value ?? []) as FileDropzoneFile[]).filter(
+      (file) => file.isValid === false,
+    );
+
+    return rejected.length ? { rejectedFiles: rejected } : null;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+
+  protected handleSelection(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.addFiles(Array.from(input.files ?? []));
+    // Without this the same file cannot be picked twice in a row: the input
+    // holds it, so re-selecting it fires no `change`.
+    input.value = "";
+  }
+
+  protected handleBlur(): void {
+    this.onTouched();
+  }
+
+  protected handleDragEnter(event: DragEvent): void {
+    if (this.isDisabled() || !this.hasFiles(event)) return;
+
+    event.preventDefault();
+    this.dragDepth.update((depth) => depth + 1);
+  }
+
+  protected handleDragOver(event: DragEvent): void {
+    if (this.isDisabled() || !this.hasFiles(event)) return;
+
+    // Without preventDefault the browser opens the dropped file in the tab.
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  }
+
+  protected handleDragLeave(): void {
+    this.dragDepth.update((depth) => Math.max(0, depth - 1));
+  }
+
+  protected handleDrop(event: DragEvent): void {
+    this.dragDepth.set(0);
+    if (this.isDisabled()) return;
+
+    event.preventDefault();
+    this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+    this.onTouched();
+  }
+
+  protected removeFile(file: FileDropzoneFile): void {
+    if (this.isDisabled()) return;
+
+    const removedIndex = this.files().indexOf(file);
+
+    this.commit(this.files().filter((current) => current !== file));
+    this.fileRemove.emit(file);
+    this.onTouched();
+    this.announce(
+      this.translations.translate("file-upload.removed", file.name ?? ""),
+    );
+    this.restoreFocus(removedIndex);
+  }
+
+  /**
+   * The button the user just pressed leaves the DOM with its row, so focus would
+   * fall to `<body>`, losing the user's place. Move it to the *previous* file's
+   * remove button rather than the next one, so repeated presses cannot walk
+   * destructively down the list. Removing the first file has no previous row, so
+   * focus goes to the one that replaced it; removing the last goes to the drop zone.
+   */
+  private restoreFocus(removedIndex: number): void {
+    afterNextRender(
+      () => {
+        const rows = this.host.nativeElement.querySelectorAll(
+          ".tedi-file-dropzone__file",
+        );
+
+        if (!rows.length) {
+          this.fileInput()?.nativeElement.focus();
+          return;
+        }
+
+        const row = rows[Math.max(removedIndex - 1, 0)];
+
+        (
+          row.querySelector<HTMLElement>(FOCUSABLE) ??
+          this.fileInput()?.nativeElement
+        )?.focus();
+      },
+      { injector: this.injector },
+    );
+  }
+
+  private addFiles(selected: File[]): void {
+    if (!selected.length) return;
+
+    const keepRejected = this.keepRejectedFiles();
+    const rejected: { reason: FileRejectionReason; file: File }[] = [];
+
+    // Picking the same file twice almost always means the user lost track of
+    // what they had already added, so the repeat is skipped rather than listed
+    // twice. Matching on more than the name keeps two genuinely different files
+    // that share one — scans and camera exports collide constantly.
+    const listed = new Set(this.files().map(fileIdentity));
+    const duplicates = selected.filter((file) =>
+      listed.has(fileIdentity(file)),
+    );
+    const fresh = selected.filter((file) => !listed.has(fileIdentity(file)));
+
+    const candidates = fresh.map((file) => {
+      const reason = this.reasonFor(file);
+      if (reason) rejected.push({ reason, file });
+
+      return Object.assign(file, {
+        id: generateUUID(),
+        isLoading: false,
+        isValid: !reason,
+        error:
+          reason && keepRejected
+            ? this.translations.translate(
+                `file-dropzone.file-rejected-${reason}`,
+              )
+            : undefined,
+      }) as FileDropzoneFile;
+    });
+
+    // Rejected files are listed only when each carries its own reason;
+    // otherwise they are dropped and the summary below speaks for them.
+    const kept = keepRejected
+      ? candidates
+      : candidates.filter((file) => file.isValid);
+    const multiple = this.multiple();
+
+    if (kept.length) {
+      this.commit(multiple ? [...this.files(), ...kept] : [kept[0]]);
+    }
+
+    if (rejected.length) {
+      const message = this.rejectionMessage(rejected);
+      this.rejectionError.set(keepRejected ? undefined : message);
+      this.announce(message);
+      return;
+    }
+
+    this.rejectionError.set(undefined);
+
+    if (duplicates.length) {
+      this.announce(
+        this.translations.translate(
+          "file-upload.duplicates-skipped",
+          duplicates.map((file) => `'${file.name}'`).join(", "),
+        ),
+      );
+    }
+
+    if (kept.length) {
+      this.announce(
+        this.translations.translate(
+          "file-upload.added",
+          String(multiple ? kept.length : 1),
+        ),
+      );
+    }
+  }
+
+  private commit(files: FileDropzoneFile[]): void {
+    this.files.set(files);
+    this.onChange(files);
+  }
+
+  private hasFiles(event: DragEvent): boolean {
+    return event.dataTransfer?.types.includes("Files") ?? false;
+  }
+
+  private isAcceptedSize(file: File): boolean {
+    const maxSize = this.maxSize();
+    return !maxSize || file.size <= maxSize;
+  }
+
+  /**
+   * Mirrors how the browser reads the `accept` attribute, so a dropped file is
+   * held to the same rule as a picked one: an extension, an exact MIME type, or
+   * a `type/*` group.
+   */
+  private isAcceptedType(file: File): boolean {
+    const tokens = this.acceptTokens();
+    if (!tokens.length) return true;
+
+    const extension = file.name.includes(".")
+      ? `.${file.name.split(".").pop()?.toLowerCase()}`
+      : "";
+    const mimeType = file.type.toLowerCase();
+
+    return tokens.some((token) => {
+      if (token.startsWith(".")) return token === extension;
+      if (token.endsWith("/*")) {
+        return !!mimeType && mimeType.startsWith(token.slice(0, -1));
+      }
+
+      return token === mimeType;
+    });
+  }
+
+  private reasonFor(file: FileDropzoneFile): FileRejectionReason | undefined {
+    if (!this.isAcceptedType(file as File)) return "extension";
+    if (!this.isAcceptedSize(file as File)) return "size";
+
+    return undefined;
+  }
+
+  /**
+   * Groups the rejected files by reason into one message. Returns `undefined`
+   * when none of them is a file the dropzone itself rejected.
+   */
+  private rejectionMessage(
+    rejected: { reason: FileRejectionReason; file: File }[],
+  ): string {
+    return (["extension", "size"] as const)
+      .map((reason) => {
+        const names = rejected
+          .filter((rejection) => rejection.reason === reason)
+          .map((rejection) => `'${rejection.file.name}'`);
+
+        return names.length
+          ? this.translations.translate(
+              `file-upload.${reason}-rejected`,
+              names.join(", "),
+            )
+          : null;
+      })
+      .filter(Boolean)
+      .join(". ");
+  }
+
+  /**
+   * Feeds the component's own live region. CDK's `LiveAnnouncer` is deliberately
+   * not used: it rewrites `aria-live` on every call, and screen readers re-register
+   * a region mutated that way and drop the pending message. Each announcement is
+   * rendered as a fresh node so that repeating the same text still announces.
+   */
+  private announce(text: string): void {
+    if (text) {
+      this.announcements.set([{ id: ++this.announceId, text }]);
+    }
+  }
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
new file mode 100644
index 000000000..66a5be0d2
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -0,0 +1,479 @@
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+} from "@angular/core";
+import { FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import {
+  argsToTemplate,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
+import { FileDropzoneComponent } from "./file-dropzone.component";
+import { FileDropzoneFileDirective } from "./file-dropzone-file.directive";
+import { FileDropzoneFile } from "./file-dropzone.types";
+import { AlertComponent } from "../../notifications/alert/alert.component";
+import { AttachmentComponent } from "../../helpers/attachment/attachment.component";
+import { AttachmentActionsComponent } from "../../helpers/attachment/attachment-actions.component";
+import { ButtonComponent } from "../../buttons/button/button.component";
+import { ColComponent } from "../../helpers/grid/col/col.component";
+import { RowComponent } from "../../helpers/grid/row/row.component";
+import { IconComponent } from "../../base/icon/icon.component";
+import { ProgressBarComponent } from "../../loader/progress-bar/progress-bar.component";
+import { TextComponent } from "../../base/text/text.component";
+
+const STATES = [
+  { id: "Default", label: "Default" },
+  { id: "Hover", label: "Hover" },
+  { id: "Active", label: "Active" },
+  {
+    id: "Error",
+    label: "Error",
+    feedbackText: {
+      text: "Fail on liiga suur. Valige mõni teine fail või vähendage suurust.",
+      type: "error" as const,
+    },
+  },
+  { id: "DropOver", label: "Drop over", dropOver: true },
+  { id: "Disabled", label: "Disabled", disabled: true },
+  { id: "Focus", label: "Focus" },
+];
+
+/**
+ * `drop-over` is live drag state, not an input — the showcase row has to raise a
+ * real `dragenter` carrying files for the dropzone to react to it.
+ */
+@Directive({ selector: "[storyDropOver]", standalone: true })
+class StoryDropOverDirective implements AfterViewInit {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly storyDropOver = input(false);
+
+  ngAfterViewInit(): void {
+    if (!this.storyDropOver()) return;
+
+    const zone = this.host.nativeElement.querySelector(
+      ".tedi-file-dropzone__zone",
+    );
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([""], "example.pdf"));
+    zone?.dispatchEvent(
+      new DragEvent("dragenter", {
+        dataTransfer,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  }
+}
+
+/**
+ * Lets a story show the summary the dropzone writes for itself, by actually
+ * dropping a file it will reject. A hardcoded `feedbackText` would be a second,
+ * stale error line the moment the user selects anything.
+ */
+@Directive({ selector: "[storyRejectedDrop]", standalone: true })
+class StoryRejectedDropDirective implements AfterViewInit {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly storyRejectedDrop = input<string>();
+
+  ngAfterViewInit(): void {
+    const name = this.storyRejectedDrop();
+    if (!name) return;
+
+    const zone = this.host.nativeElement.querySelector(
+      ".tedi-file-dropzone__zone",
+    );
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([""], name));
+    ["dragenter", "dragover", "drop"].forEach((type) =>
+      zone?.dispatchEvent(
+        new DragEvent(type, { dataTransfer, bubbles: true, cancelable: true }),
+      ),
+    );
+  }
+}
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.75.90?node-id=11335-185781&m=dev" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/70876f-file-dropzone" target="_blank">Zeroheight ↗</a>
+ */
+export default {
+  title: "TEDI-Ready/Components/Form/FileDropzone",
+  component: FileDropzoneComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FileDropzoneFileDirective,
+        AlertComponent,
+        AttachmentComponent,
+        AttachmentActionsComponent,
+        ButtonComponent,
+        ProgressBarComponent,
+        IconComponent,
+        RowComponent,
+        ColComponent,
+        TextComponent,
+        StoryDropOverDirective,
+        StoryRejectedDropDirective,
+      ],
+    }),
+  ],
+  argTypes: {
+    files: {
+      description:
+        "Files held by the dropzone, and the value written by `formControl` / `ngModel`. Bind one-way to seed the list and leave the dropzone owning it, two-way to stay in sync. Bind a stable reference — an inline literal is a new array on every check and discards what the user added.",
+      control: false,
+      table: {
+        category: "inputs",
+        type: { summary: "FileDropzoneFile[]" },
+        defaultValue: { summary: "[]" },
+      },
+    },
+    inputId: {
+      description: "Id of the file input. Generated when not set.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    name: {
+      description:
+        "`name` attribute of the file input, for native form submits.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    label: {
+      description:
+        "Text inside the dropzone, which also names the file input. Falls back to the translated `file-dropzone.label`.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    accept: {
+      description:
+        "Allowed file types as a comma-separated list of extensions and MIME types. Re-checked on drop, which bypasses the `accept` attribute.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    maxSize: {
+      description:
+        "Largest accepted file size, in bytes. The restrictions hint renders it in whichever unit reads best.",
+      control: "number",
+      table: { category: "inputs", type: { summary: "number" } },
+    },
+    multiple: {
+      description:
+        "Whether more than one file can be held. A single-file dropzone replaces its file on the next selection.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    keepRejectedFiles: {
+      description:
+        "Keeps rejected files in the list, each carrying its own reason. Turn it off to discard a rejected file instead and summarise every rejection in one message under the dropzone.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    showRestrictions: {
+      description:
+        "Whether the allowed types and maximum size are summarised in a hint below the dropzone. Rejection errors render either way.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    showFileSize: {
+      description: "Whether each file's size is shown next to its name.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    feedbackText: {
+      description:
+        "Feedback text below the dropzone. An `error` type also paints the border red.",
+      control: "object",
+      table: {
+        category: "inputs",
+        type: { summary: "ComponentInputs<FeedbackTextComponent>" },
+      },
+    },
+    disabled: {
+      description: "Disables the dropzone.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    invalid: {
+      description:
+        "Forces the error state on, or off, regardless of the reactive-forms state.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    fileRemove: {
+      description:
+        "Emits the file the user removed — `filesChange` carries the new list, this says which entry left it.",
+      table: { category: "outputs", type: { summary: "FileDropzoneFile" } },
+    },
+    filesChange: {
+      description: "Emits the new list whenever files are added or removed.",
+      table: { category: "outputs", type: { summary: "FileDropzoneFile[]" } },
+    },
+  },
+  args: {
+    name: "file-dropzone",
+  },
+  parameters: { controls: { disable: true } },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone ${argsToTemplate(args)} />
+      </div>
+    `,
+  }),
+} as Meta<FileDropzoneComponent>;
+
+type Story = StoryObj<FileDropzoneComponent>;
+
+export const Default: Story = {
+  parameters: { controls: { disable: false } },
+};
+
+/**
+ * `accept` and `maxSize` are summarised in a hint below the dropzone. Set
+ * `showRestrictions` to `false` when the same information is already shown
+ * elsewhere, or pass your own `feedbackText`.
+ */
+export const WithHint: Story = {
+  args: {
+    accept: ".jpg,.png,.pdf",
+    maxSize: 1024 ** 2,
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    accept: ".jpg,.png,.pdf",
+    maxSize: 1024 ** 2,
+    files: [
+      { id: "1", name: "report.pdf" },
+      { id: "2", name: "report_1.pdf" },
+      { id: "3", name: "report_2.pdf" },
+    ],
+  },
+};
+
+export const WithFileSize: Story = {
+  args: {
+    multiple: true,
+    showFileSize: true,
+    files: [
+      { id: "1", name: "arve_2026_06.pdf", size: 1_200_000 },
+      { id: "2", name: "aastaaruanne_2025.pdf", size: 5_400_000 },
+    ],
+  },
+};
+
+/**
+ * The default. A rejected file stays in the list carrying its own reason, so the
+ * user can see which file failed and remove it. The dropzone's border stays
+ * neutral — the failure belongs to the file, not the field.
+ */
+export const KeepingRejectedFiles: Story = {
+  name: "Validation: keeping rejected files",
+  args: {
+    multiple: true,
+    accept: ".pdf,.txt",
+    files: [
+      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
+      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
+      { id: "3", name: "Kodukülastusakt_Triin_3.pdf" },
+      {
+        id: "4",
+        name: "Kodukülastusakt_Triin.png",
+        isValid: false,
+        error: "Failiformaat ei ole lubatud",
+      },
+    ],
+  },
+};
+
+/**
+ * The opt-out. With `keepRejectedFiles` turned off the rejected file is
+ * discarded, so only the files that passed remain and the failure is reported
+ * once under the dropzone, which turns its border red.
+ */
+export const DiscardingRejectedFiles: Story = {
+  name: "Validation: discarding rejected files",
+  args: {
+    accept: ".pdf,.txt",
+    maxSize: 1024 ** 2,
+    multiple: true,
+    keepRejectedFiles: false,
+    files: [
+      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
+      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
+    ],
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone ${argsToTemplate(args)} storyRejectedDrop="Kodukülastusakt_Triin.png" />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * An `*tediFileDropzoneFile` template replaces the built-in attachment row. It
+ * receives each file and a `remove` callback, so anything the `tedi-attachment`
+ * supports — a leading icon, a progress bar, per-file feedback, extra
+ * actions — can be composed per file.
+ */
+export const WithCustomFileTemplate: Story = {
+  render: () => {
+    const files: FileDropzoneFile[] = [
+      { id: "1", name: "arve_2026_06.pdf", size: 1_200_000 },
+      { id: "2", name: "aastaaruanne_2025.pdf", size: 24_500, isValid: false },
+      { id: "3", name: "esitlus.mp4", size: 140_000_000, isLoading: true },
+    ];
+
+    return {
+      props: { files, progress: 64 },
+      template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone multiple [files]="files" accept=".pdf,.mp4">
+          <ng-template tediFileDropzoneFile let-file let-remove="remove" let-removeLabel="removeLabel">
+            <tedi-attachment
+              [name]="file.name"
+              icon="description"
+              [error]="file.isValid === false ? 'Fail on liiga suur. Lubatud on failid suurusega kuni 1 MB' : undefined"
+            >
+              @if (file.isLoading) {
+                <tedi-progress-bar [value]="progress" />
+              }
+              <tedi-attachment-actions>
+                <button tedi-button variant="neutral" [attr.aria-label]="removeLabel" (click)="remove()">
+                  <tedi-icon name="delete" [size]="18" color="inherit" />
+                </button>
+              </tedi-attachment-actions>
+            </tedi-attachment>
+          </ng-template>
+        </tedi-file-dropzone>
+      </div>
+      `,
+    };
+  },
+};
+
+export const States: Story = {
+  parameters: {
+    // The states live on the dropzone's inner label, not on the component host,
+    // and the addon only rewrites `:hover` to a class on the styled element
+    // itself — so these selectors have to reach that label.
+    pseudo: {
+      hover: "#Hover .tedi-file-dropzone__zone",
+      active: "#Active .tedi-file-dropzone__zone",
+      focusVisible: "#Focus input",
+    },
+  },
+  render: () => ({
+    props: { STATES },
+    template: `
+      <tedi-row [cols]="1" [gapY]="4">
+        @for (state of STATES; track state.id) {
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">{{ state.label }}</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-file-dropzone
+                [id]="state.id"
+                [inputId]="state.id + '-input'"
+                [maxSize]="30 * 1024 ** 2"
+                [disabled]="!!state.disabled"
+                [feedbackText]="state.feedbackText"
+                [storyDropOver]="!!state.dropOver"
+              />
+            </tedi-col>
+          </tedi-row>
+        }
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Rejected files stay in the value with `isValid: false`, so the control holds
+ * what the user picked rather than a silently filtered subset. The dropzone
+ * validates itself, so the control fails with a `rejectedFiles` error while one
+ * is listed — no validator of your own needed. Still filter on `isValid` before
+ * uploading.
+ */
+export const WithReactiveForms: Story = {
+  render: () => {
+    const control = new FormControl<FileDropzoneFile[]>([], {
+      nonNullable: true,
+      validators: [Validators.required],
+    });
+
+    return {
+      props: {
+        control,
+        invalidCount: () =>
+          control.value.filter((file) => file.isValid === false).length,
+      },
+      template: `
+        <tedi-row [cols]="1" [gapY]="3">
+          <tedi-col>
+            <tedi-file-dropzone
+              multiple
+              accept=".pdf,.txt"
+              [maxSize]="1024 ** 2"
+              [formControl]="control"
+            />
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{
+                  {
+                    files: control.value.length,
+                    invalidFiles: invalidCount(),
+                    touched: control.touched,
+                    dirty: control.dirty,
+                    invalid: control.invalid
+                  } | json
+                }}</pre>
+            </tedi-alert>
+          </tedi-col>
+        </tedi-row>
+      `,
+    };
+  },
+};
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
new file mode 100644
index 000000000..a77085e34
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -0,0 +1,36 @@
+import { ComponentInputs } from "../../../types/inputs.type";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+
+/**
+ * `tedi-feedback-text` inputs, with everything but the message optional.
+ */
+export type FileDropzoneFeedback = Partial<
+  ComponentInputs<FeedbackTextComponent>
+> & { text: string };
+
+/**
+ * A file held by the dropzone. Real selections are `File` objects carrying the
+ * extra fields; a preloaded entry only needs a `name`.
+ */
+export interface FileDropzoneFile extends Partial<File> {
+  /**
+   * Stable identifier, used to track the file across re-renders. Generated for
+   * files the user selects.
+   */
+  id?: string;
+  /**
+   * Whether an upload is in flight for this file. Left to the consumer to set
+   * and clear — the dropzone only selects files, it does not upload them.
+   */
+  isLoading?: boolean;
+  /**
+   * Whether the file passed the `accept` and `maxSize` checks.
+   */
+  isValid?: boolean;
+  /**
+   * Validation message rendered under this file. Set for files the dropzone
+   * rejects itself; set it yourself on preloaded files, or to surface an error
+   * the upload returned.
+   */
+  error?: string;
+}
diff --git a/src/tedi/components/form/file-dropzone/index.ts b/src/tedi/components/form/file-dropzone/index.ts
new file mode 100644
index 000000000..d94e61941
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/index.ts
@@ -0,0 +1,3 @@
+export * from "./file-dropzone.component";
+export * from "./file-dropzone-file.directive";
+export * from "./file-dropzone.types";
diff --git a/src/tedi/components/form/index.ts b/src/tedi/components/form/index.ts
index adc07b28a..6568085d0 100644
--- a/src/tedi/components/form/index.ts
+++ b/src/tedi/components/form/index.ts
@@ -9,6 +9,7 @@ export * from "./radio-card-group/radio-card-group.component";
 export * from "./date-field";
 export * from "./date-picker/date-picker.component";
 export * from "./feedback-text/feedback-text.component";
+export * from "./file-dropzone";
 export * from "./label/label.component";
 export * from "./label-row";
 export * from "./number-field/number-field.component";
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index 909f8ef17..6329887b3 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -293,10 +293,63 @@ export const translationsMap = {
   "file-dropzone.label": {
     description: "Default label for dropzone",
     components: ["FileDropzone"],
-    et: "Lohista failid siia või klõpsa, et sirvida",
+    et: "Lohista failid siia või klõpsa failide valimiseks",
     en: "Drop files here, or click to browse",
     ru: "Перетащите файлы сюда или нажмите, чтобы выбрать",
   },
+  "file-dropzone.selected-files": {
+    description: "Accessible name for the list of selected files",
+    components: ["FileDropzone"],
+    et: "Valitud failid",
+    en: "Selected files",
+    ru: "Выбранные файлы",
+  },
+  "file-dropzone.rejected": {
+    description:
+      "Screen-reader only label marking a file in the list that failed validation",
+    components: ["FileDropzone"],
+    et: "Vigane fail",
+    en: "Invalid file",
+    ru: "Недопустимый файл",
+  },
+  "file-dropzone.file-rejected-extension": {
+    description:
+      "Validation message shown under a single file that has a disallowed type",
+    components: ["FileDropzone"],
+    et: "Failiformaat ei ole lubatud",
+    en: "File format is not allowed",
+    ru: "Формат файла не разрешен",
+  },
+  "file-dropzone.file-rejected-size": {
+    description:
+      "Validation message shown under a single file that is too large",
+    components: ["FileDropzone"],
+    et: "Fail on liiga suur",
+    en: "File is too large",
+    ru: "Файл слишком велик",
+  },
+  "file-upload.added": {
+    description: "Announced to assistive technology when files are added",
+    components: ["FileDropzone"],
+    et: (count: string) => `Lisatud ${count} fail(i)`,
+    en: (count: string) => `${count} file(s) added`,
+    ru: (count: string) => `Добавлено файлов: ${count}`,
+  },
+  "file-upload.duplicates-skipped": {
+    description:
+      "Announced when files already in the list are skipped on a repeat selection",
+    components: ["FileDropzone"],
+    et: (files: string) => `Fail(id) ${files} on juba lisatud`,
+    en: (files: string) => `File(s) ${files} have already been added`,
+    ru: (files: string) => `Файл(ы) ${files} уже добавлены`,
+  },
+  "file-upload.removed": {
+    description: "Announced to assistive technology when a file is removed",
+    components: ["FileDropzone"],
+    et: (file: string) => `Fail ${file} eemaldatud`,
+    en: (file: string) => `File ${file} removed`,
+    ru: (file: string) => `Файл ${file} удален`,
+  },
   "file-dropzone.error": {
     description: "Error label for dropzone",
     components: ["FileDropzone"],
diff --git a/src/tedi/utils/file.util.ts b/src/tedi/utils/file.util.ts
new file mode 100644
index 000000000..e5e7f1767
--- /dev/null
+++ b/src/tedi/utils/file.util.ts
@@ -0,0 +1,18 @@
+const BYTES_IN_KB = 1024;
+
+const BYTES_IN_MB = BYTES_IN_KB ** 2;
+const BYTES_IN_GB = BYTES_IN_KB ** 3;
+
+const round = (value: number): string => value.toFixed(1).replace(/\.0$/, "");
+
+/**
+ * Formats a byte count as a human-readable size string (`"0.9 MB"`).
+ */
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  if (bytes < BYTES_IN_KB) return `${bytes} B`;
+  if (bytes < BYTES_IN_MB) return `${round(bytes / BYTES_IN_KB)} KB`;
+  if (bytes < BYTES_IN_GB) return `${round(bytes / BYTES_IN_MB)} MB`;
+
+  return `${round(bytes / BYTES_IN_GB)} GB`;
+}
diff --git a/src/tedi/utils/index.ts b/src/tedi/utils/index.ts
index 972225b08..a985a8d1b 100644
--- a/src/tedi/utils/index.ts
+++ b/src/tedi/utils/index.ts
@@ -1,6 +1,7 @@
 export * from "./cookies.util";
 export * from "./date.util";
 export * from "./elements.util";
+export * from "./file.util";
 export * from "./matchers.util";
 export * from "./tag-overflow.util";
 export * from "./time.util";
diff --git a/tsconfig.lib.json b/tsconfig.lib.json
index 8a1b4c912..ca9eeaeae 100644
--- a/tsconfig.lib.json
+++ b/tsconfig.lib.json
@@ -11,7 +11,7 @@
   "exclude": [
     "dist",
     "node_modules",
-    "*.spec.ts",
+    "**/*.spec.ts",
     "**/*.stories.ts",
     "jest.config.ts"
   ]

From 7337f562132ae47f4e8c1a2f8da831aa058ce565 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 10:57:10 +0300
Subject: [PATCH 2/8] feat(file-dropzone): add CR fixes #588

---
 .../file-dropzone.component.spec.ts           | 43 +++++++++++++++++--
 .../file-dropzone/file-dropzone.component.ts  | 22 ++++++----
 .../file-dropzone/file-dropzone.stories.ts    |  7 +--
 3 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
index 701f317b5..fe39ef933 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -786,7 +786,20 @@ describe("FileDropzoneComponent", () => {
       );
     });
 
-    it("ignores drag events while disabled", () => {
+    it("leaves a non-file dragover to the browser", () => {
+      const event = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: { types: string[]; dropEffect: string } };
+      event.dataTransfer = { types: ["text/plain"], dropEffect: "copy" };
+      zoneEl().dispatchEvent(event);
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(event.dataTransfer.dropEffect).toBe("copy");
+    });
+
+    it("refuses the drag while disabled without letting the browser take it", () => {
       fixture.componentRef.setInput("disabled", true);
       fixture.detectChanges();
 
@@ -794,14 +807,36 @@ describe("FileDropzoneComponent", () => {
       const overEvent = new Event("dragover", {
         bubbles: true,
         cancelable: true,
-      }) as Event & { dataTransfer: unknown };
-      overEvent.dataTransfer = { types: ["Files"], dropEffect: "none" };
+      }) as Event & { dataTransfer: { types: string[]; dropEffect: string } };
+      overEvent.dataTransfer = { types: ["Files"], dropEffect: "copy" };
       zoneEl().dispatchEvent(overEvent);
 
       expect(zoneEl().classList).not.toContain(
         "tedi-file-dropzone__zone--drop-over",
       );
-      expect(overEvent.defaultPrevented).toBe(false);
+      // Claimed, so the browser cannot navigate to the file, but refused.
+      expect(overEvent.defaultPrevented).toBe(true);
+      expect(overEvent.dataTransfer.dropEffect).toBe("none");
+    });
+
+    it("swallows a drop while disabled instead of opening the file", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      const dropEvent = new Event("drop", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: unknown };
+      dropEvent.dataTransfer = {
+        files: [makeFile("report.pdf")],
+        types: ["Files"],
+        dropEffect: "none",
+      };
+      zoneEl().dispatchEvent(dropEvent);
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(dropEvent.defaultPrevented).toBe(true);
     });
 
     it("renders a file that has no name", () => {
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index 982993875..e62c96455 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -116,8 +116,10 @@ export class FileDropzoneComponent
    */
   readonly inputId = input<string>();
   /**
-   * `name` attribute of the file input, used when the surrounding form is
-   * submitted natively.
+   * `name` attribute of the file input. The files do not travel with a native
+   * form submit: dropped files never reach the input, and its value is cleared
+   * after each selection so the same file can be picked again. Read them from
+   * `files` or the bound control.
    */
   readonly name = input<string>();
   /**
@@ -174,8 +176,9 @@ export class FileDropzoneComponent
    */
   readonly disabled = input(false, { transform: booleanAttribute });
   /**
-   * Forces the error state on, or off, regardless of the reactive-forms state.
-   * Leave unset to let the control derive it.
+   * Marks the dropzone as invalid. The error state is also derived from the
+   * bound control and from rejected files, so this only forces it on.
+   * @default false
    */
   readonly invalid = input(false, { transform: booleanAttribute });
   /**
@@ -376,11 +379,14 @@ export class FileDropzoneComponent
   }
 
   protected handleDragOver(event: DragEvent): void {
-    if (this.isDisabled() || !this.hasFiles(event)) return;
+    if (!this.hasFiles(event)) return;
 
-    // Without preventDefault the browser opens the dropped file in the tab.
+    // Without preventDefault the browser opens the dropped file in the tab, so
+    // a disabled zone has to claim the drag too — and then refuse it.
     event.preventDefault();
-    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = this.isDisabled() ? "none" : "copy";
+    }
   }
 
   protected handleDragLeave(): void {
@@ -389,9 +395,9 @@ export class FileDropzoneComponent
 
   protected handleDrop(event: DragEvent): void {
     this.dragDepth.set(0);
+    event.preventDefault();
     if (this.isDisabled()) return;
 
-    event.preventDefault();
     this.addFiles(Array.from(event.dataTransfer?.files ?? []));
     this.onTouched();
   }
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
index 66a5be0d2..e58b3c09b 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -144,7 +144,7 @@ export default {
     },
     name: {
       description:
-        "`name` attribute of the file input, for native form submits.",
+        "`name` attribute of the file input. The files do not travel with a native form submit: dropped files never reach the input, and its value is cleared after each selection so the same file can be picked again. Read them from `files` or the bound control.",
       control: "text",
       table: { category: "inputs", type: { summary: "string" } },
     },
@@ -215,7 +215,8 @@ export default {
       },
     },
     disabled: {
-      description: "Disables the dropzone.",
+      description:
+        "Disables the dropzone from a parent template. Combined with the reactive-forms disabled state, so this only forces it on.",
       control: "boolean",
       table: {
         category: "inputs",
@@ -225,7 +226,7 @@ export default {
     },
     invalid: {
       description:
-        "Forces the error state on, or off, regardless of the reactive-forms state.",
+        "Marks the dropzone as invalid. The error state is also derived from the bound control and from rejected files, so this only forces it on.",
       control: "boolean",
       table: {
         category: "inputs",

From ed538613550b071e10ac620ae4e9df0fd1684fbd Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 23 Sep 2026 14:31:39 +0300
Subject: [PATCH 3/8] chore(file-dropzone): bump core to 6.11.1 and drop the
 clip-path workaround #588

---
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 src/package.json                                          | 2 +-
 .../form/file-dropzone/file-dropzone.component.scss       | 6 ------
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1557d36b5..d17282197 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0-semantic-version",
       "dependencies": {
         "@tanstack/angular-table": "^8.21.4",
-        "@tedi-design-system/core": "^6.8.1"
+        "@tedi-design-system/core": "^6.11.1"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "20.3.27",
@@ -12431,9 +12431,9 @@
       }
     },
     "node_modules/@tedi-design-system/core": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.8.1.tgz",
-      "integrity": "sha512-CbiGY4SNcbn005coA7O40D9kDKtcFJSxLoang25IWqFQda+My0qynlenvsJDsnGpwkqx7u5ddkFTlU3bJUtgXA==",
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.11.1.tgz",
+      "integrity": "sha512-6ocg/DUodf5alJNkDDfVqs2LY5qazc2clfoU0WlTZ5p9u9PiiiThTo9l5/jfgwkLZcs5KkdSDNp3a/5z6VHBnA==",
       "engines": {
         "node": ">=24.0.0",
         "npm": ">=11.0.0"
diff --git a/package.json b/package.json
index 6d7bd5f41..d677d5bee 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "^6.8.1"
+    "@tedi-design-system/core": "^6.11.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "20.3.27",
diff --git a/src/package.json b/src/package.json
index 28ca420d1..5b369f0da 100644
--- a/src/package.json
+++ b/src/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "^6.8.1"
+    "@tedi-design-system/core": "^6.11.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
index 0d5c8d8d1..710b0ec41 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
@@ -36,12 +36,6 @@
   }
 }
 
-.tedi-file-dropzone__input {
-  // Core's .sr-only ships an invalid `clip-path: rect(0, 0, 0, 0)`, so nothing
-  // clips it and axe cannot resolve the file input's background. Drop once fixed.
-  clip-path: inset(50%);
-}
-
 .tedi-file-dropzone__zone--drop-over.tedi-file-dropzone__zone {
   color: var(--file-dropzone-text-drop-over);
   background-color: var(--file-dropzone-background-drop-over);

From 48313a6560e2fe7c0e3721d98302eb0bde8d7301 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Mon, 28 Sep 2026 17:01:59 +0300
Subject: [PATCH 4/8] feat(file-dropzone): add WCAG fixes #588

---
 skills/tedi-angular/references/components.md  |  33 +--
 .../file-dropzone.component.html              |  55 +++--
 .../file-dropzone.component.scss              |   8 +-
 .../file-dropzone.component.spec.ts           | 195 ++++++++++++++----
 .../file-dropzone/file-dropzone.component.ts  | 132 ++++++++----
 .../file-dropzone/file-dropzone.stories.ts    |  20 +-
 .../form/file-dropzone/file-dropzone.types.ts |   4 +
 .../attachment/attachment.component.html      |   2 +-
 .../attachment/attachment.component.spec.ts   |  26 +++
 .../attachment/attachment.component.ts        |   4 +
 src/tedi/services/translation/translations.ts |  16 +-
 11 files changed, 362 insertions(+), 133 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 27bd1d786..c5a2358c0 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -229,21 +229,24 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to
   replace the built-in `tedi-attachment` row when a file needs a progress bar, an icon or its own
   feedback.
-- **`tedi-file-dropzone`'s `label` is the text inside the dropzone**, not a field label above it, and
-  it names the file input — so the control is never nameless. Don't add a second `<label tedi-label>`
-  for `inputId`, and don't wrap it in `tedi-form-field` (which projects one): the drop zone is itself a
-  `<label>` around the input, so another one is a `form-field-multiple-labels` finding and assistive
-  tech handles it inconsistently. Fold the field name into `label` instead. `tedi-form-field` is also
-  wrong here because it places its projected feedback text after the file list rather than under the
-  dropzone.
-- **The drop zone is a `<label>` on purpose**, which is why no field label can sit above it. It needs no
-  JS — clicking anywhere opens the picker and the input stays the focus target. Carbon, USWDS, GOV.UK
-  and Polaris all make the zone a `div`/`button` instead, precisely so a field label can sit above it,
-  and pay for it with `input.click()` plus a duplicated hidden label, an `aria-label` or an
-  `aria-labelledby`; TEDI has no label above the zone in Figma or React, so that trade isn't worth
-  making. If one is ever needed, follow GOV.UK — `<button aria-labelledby="<field label id> <zone text
-  id>">` in place of the wrapping `<label>`. Adding an `ariaLabelledby` input to the current markup
-  would not work, since `aria-labelledby` overrides the wrapping label instead of appending to it.
+- **`tedi-file-dropzone`'s `label` is the text inside the drop zone**, not a field label above it. It is
+  the accessible name of the zone, so the control is never nameless. Don't add a `<label tedi-label>`
+  for `inputId` and don't wrap it in `tedi-form-field`: the file input is `display: none` and cannot be
+  labelled, and `tedi-form-field` would also place its projected feedback after the file list rather
+  than under the dropzone. Fold the field name into `label` instead.
+- **The drop zone is a `div[role="button"]`, not a `<label>` or a native `<button>`** — the same shape
+  React and react-dropzone use, and the reason is screen readers, not styling. The file input is
+  `display: none` and out of the tab order: while it was the focus target, closing the file dialog
+  handed focus back to it and VoiceOver discarded the status message every time. A native `<button>`
+  behaves differently again and was also unreliable there. Because a `role="button"` div has no native
+  activation, Enter and Space are wired by hand in `handleKeydown`, and `disabled` is `aria-disabled`
+  plus `tabindex="-1"` with both the click and key paths guarded. Carbon, USWDS, GOV.UK and Polaris all
+  avoid making the file input the focus target for the same reason.
+- **Selections are announced assertively and on a delay; removals are polite and immediate.** Closing
+  the file dialog leaves the screen reader busy for a moment, and a message inserted during it is
+  dropped rather than queued. Removal involves no dialog, so it needs neither. Announcements go through
+  `ToastAnnouncerService`, whose regions live on `<body>`: a live region inside the component is
+  silently dropped when the rows around it re-render, which is what happens on every selection.
 
 ### Search suggestions
 
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.html b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
index fc97cce78..428a6761f 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.html
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
@@ -1,27 +1,22 @@
-<label
+<div
+  #zone
+  role="button"
   class="tedi-file-dropzone__zone"
   [class.tedi-file-dropzone__zone--invalid]="isInvalid()"
   [class.tedi-file-dropzone__zone--valid]="isValid()"
   [class.tedi-file-dropzone__zone--drop-over]="isDragActive()"
+  [attr.tabindex]="isDisabled() ? -1 : 0"
+  [attr.aria-disabled]="isDisabled() || null"
+  [attr.aria-invalid]="isInvalid() || null"
+  [attr.aria-describedby]="describedBy.attribute()"
+  (click)="openPicker()"
+  (keydown)="handleKeydown($event)"
+  (blur)="handleBlur()"
   (dragenter)="handleDragEnter($event)"
   (dragover)="handleDragOver($event)"
   (dragleave)="handleDragLeave()"
   (drop)="handleDrop($event)"
 >
-  <input
-    #fileInput
-    class="tedi-file-dropzone__input sr-only"
-    type="file"
-    [id]="resolvedId()"
-    [attr.name]="name()"
-    [attr.accept]="accept()"
-    [multiple]="multiple()"
-    [disabled]="isDisabled()"
-    [attr.aria-invalid]="isInvalid() || null"
-    [attr.aria-describedby]="describedBy.attribute()"
-    (change)="handleSelection($event)"
-    (blur)="handleBlur()"
-  />
   <tedi-icon
     class="tedi-file-dropzone__icon"
     name="attach_file"
@@ -29,7 +24,21 @@
     [color]="isDisabled() ? 'inherit' : 'secondary'"
   />
   <span class="tedi-file-dropzone__label">{{ resolvedLabel() }}</span>
-</label>
+</div>
+
+<input
+  #fileInput
+  class="tedi-file-dropzone__input"
+  type="file"
+  tabindex="-1"
+  aria-hidden="true"
+  [id]="resolvedId()"
+  [attr.name]="name()"
+  [attr.accept]="accept()"
+  [multiple]="multiple()"
+  [disabled]="isDisabled()"
+  (change)="handleSelection($event)"
+/>
 
 @if (rejectionError(); as error) {
   <tedi-feedback-text [id]="feedbackIds().error" [text]="error" type="error" />
@@ -81,21 +90,7 @@
             </tedi-attachment-actions>
           </tedi-attachment>
         }
-        @if (row.file.isValid === false) {
-          <span class="sr-only">{{ rejectedLabel() }}: {{ row.name }}</span>
-        }
       </li>
     }
   </ul>
 }
-
-<div
-  class="tedi-file-dropzone__announcement sr-only"
-  role="status"
-  aria-live="polite"
-  aria-atomic="true"
->
-  @for (entry of announcements(); track entry.id) {
-    <span>{{ entry.text }}</span>
-  }
-</div>
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
index 710b0ec41..7ad0e92f5 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
@@ -8,7 +8,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
   padding: var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);
+  font: inherit;
   color: var(--file-dropzone-text-default);
   text-align: center;
   cursor: pointer;
@@ -29,7 +31,7 @@
     border-color: var(--file-dropzone-border-active);
   }
 
-  &:has(input:focus-visible) {
+  &:focus-visible {
     outline: var(--tedi-borders-02) solid var(--file-dropzone-border-focus);
     outline-offset: var(--tedi-borders-01);
     border-color: var(--file-dropzone-border-focus);
@@ -57,6 +59,10 @@
   border-color: var(--file-dropzone-border-disabled);
 }
 
+.tedi-file-dropzone__input {
+  display: none;
+}
+
 .tedi-file-dropzone__files {
   display: flex;
   flex-direction: column;
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
index fe39ef933..5e14b96a0 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -2,6 +2,7 @@ import { Component, signal } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { By } from "@angular/platform-browser";
+import { ToastAnnouncerService } from "../../../services/toast/toast-announcer.service";
 import { TediTranslationService } from "../../../services/translation/translation.service";
 import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token";
 import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
@@ -25,11 +26,26 @@ const breakpointMock = {
 // `lastModified` is pinned because it defaults to `Date.now()`, which would make
 // two fabricated files differ by milliseconds — a real file picked twice carries
 // the same mtime, which is what the duplicate check relies on.
-const announced = (fixture: ComponentFixture<unknown>): string =>
-  (
-    fixture.debugElement.query(By.css(".tedi-file-dropzone__announcement"))
-      .nativeElement as HTMLElement
-  ).textContent?.trim() ?? "";
+const announcer = { announce: jest.fn(), clear: jest.fn(), destroy: jest.fn() };
+
+beforeEach(() => announcer.announce.mockClear());
+
+/** Last message handed to the root-level announcer. */
+/** Waits past the add-path delay, then reads the last announced message. */
+const announced = async (): Promise<string> => {
+  // Mirrors ADD_ANNOUNCE_DELAY in the component, which is deliberately private.
+  await new Promise((resolve) => setTimeout(resolve, 300 + 150));
+
+  return announcer.announce.mock.calls.at(-1)?.[0] ?? "";
+};
+
+/** Politeness of the last announcement. */
+const announcedAs = (): string | undefined =>
+  announcer.announce.mock.calls.at(-1)?.[1];
+
+const zoneOf = (fixture: ComponentFixture<unknown>): HTMLElement =>
+  fixture.debugElement.query(By.css('[role="button"].tedi-file-dropzone__zone'))
+    .nativeElement as HTMLElement;
 
 const makeFile = (
   name: string,
@@ -69,6 +85,7 @@ const dispatchDrag = (
 };
 
 const baseProviders = [
+  { provide: ToastAnnouncerService, useValue: announcer },
   { provide: TediTranslationService, useClass: TranslationMock },
   { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
   { provide: BreakpointService, useValue: breakpointMock },
@@ -116,14 +133,53 @@ describe("FileDropzoneComponent", () => {
     expect(text(".tedi-file-dropzone__label")).toBe("Lohista failid siia");
   });
 
-  it("names the input from the dropzone label", () => {
+  it("names the drop zone from the dropzone label", () => {
+    const zone = zoneOf(fixture);
     const input = fileInput(fixture);
-    const zone = fixture.debugElement.query(
-      By.css("label.tedi-file-dropzone__zone"),
-    ).nativeElement as HTMLLabelElement;
 
-    expect(zone.contains(input)).toBe(true);
     expect(zone.textContent).toContain("file-dropzone.label");
+    expect(zone.getAttribute("tabindex")).toBe("0");
+    // The input stays out of the tab order so that closing the file dialog
+    // cannot hand focus back to it — the button is the control.
+    expect(input.getAttribute("tabindex")).toBe("-1");
+    expect(input.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("opens the file picker from the drop zone", () => {
+    const input = fileInput(fixture);
+    const click = jest.spyOn(input, "click");
+
+    // The input is display:none, so the zone has to forward the activation.
+    zoneOf(fixture).click();
+    expect(click).toHaveBeenCalledTimes(1);
+
+    // A role="button" div has no native keyboard activation.
+    for (const key of ["Enter", " "]) {
+      zoneOf(fixture).dispatchEvent(
+        new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+      );
+    }
+
+    expect(click).toHaveBeenCalledTimes(3);
+  });
+
+  it("stays inert while disabled", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+    const click = jest.spyOn(input, "click");
+    const zone = zoneOf(fixture);
+
+    expect(zone.getAttribute("tabindex")).toBe("-1");
+    expect(zone.getAttribute("aria-disabled")).toBe("true");
+
+    zone.click();
+    zone.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+    );
+
+    expect(click).not.toHaveBeenCalled();
   });
 
   it("gives each instance its own generated id", () => {
@@ -142,12 +198,15 @@ describe("FileDropzoneComponent", () => {
     const [first, second] = pair.debugElement
       .queryAll(By.css("input[type=file]"))
       .map((el) => el.nativeElement as HTMLInputElement);
+    const [firstZone, secondZone] = pair.debugElement
+      .queryAll(By.css('[role="button"].tedi-file-dropzone__zone'))
+      .map((el) => el.nativeElement as HTMLElement);
 
     expect(first.id).not.toBe(second.id);
     // The feedback ids are derived from it, so a collision would cross-wire
     // one dropzone's aria-describedby to the other's hint.
-    expect(first.getAttribute("aria-describedby")).not.toBe(
-      second.getAttribute("aria-describedby"),
+    expect(firstZone.getAttribute("aria-describedby")).not.toBe(
+      secondZone.getAttribute("aria-describedby"),
     );
   });
 
@@ -182,13 +241,13 @@ describe("FileDropzoneComponent", () => {
   });
 
   describe("selection", () => {
-    it("adds a picked file and announces it", () => {
+    it("adds a picked file and announces it", async () => {
       selectFiles(fixture, [makeFile("report.pdf")]);
 
       expect(component.files().map((file) => file.name)).toEqual([
         "report.pdf",
       ]);
-      expect(announced(fixture)).toBe("file-upload.added:1");
+      expect(await announced()).toBe("file-upload.added:1");
     });
 
     it("clears the input value so the same file can be picked again", () => {
@@ -207,7 +266,46 @@ describe("FileDropzoneComponent", () => {
       ]);
     });
 
-    it("skips a file that is already listed", () => {
+    it("announces a skip alongside what was added", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [makeFile("report.pdf"), makeFile("other.pdf")]);
+
+      // Announced together: separate calls would overwrite each other and only
+      // the last would ever be read.
+      expect(await announced()).toBe(
+        "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+      );
+    });
+
+    it("announces a rejection, a skip and an addition from one selection", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [
+        makeFile("report.pdf"),
+        makeFile("notes.txt", 100, "text/plain"),
+        makeFile("other.pdf"),
+      ]);
+
+      expect(await announced()).toBe(
+        "file-upload.extension-rejected:'notes.txt'. " +
+          "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+      );
+    });
+
+    it("announces additions assertively so the file dialog cannot bury them", async () => {
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(await announced()).toBe("file-upload.added:1");
+      expect(announcedAs()).toBe("assertive");
+    });
+
+    it("skips a file that is already listed", async () => {
       fixture.componentRef.setInput("multiple", true);
       fixture.detectChanges();
 
@@ -217,7 +315,7 @@ describe("FileDropzoneComponent", () => {
       expect(component.files().map((file) => file.name)).toEqual([
         "report.pdf",
       ]);
-      expect(announced(fixture)).toBe(
+      expect(await announced()).toBe(
         "file-upload.duplicates-skipped:'report.pdf'",
       );
     });
@@ -389,7 +487,7 @@ describe("FileDropzoneComponent", () => {
       expect(summary()).toBeUndefined();
     });
 
-    it("drops the aggregate error when files carry their own", () => {
+    it("drops the aggregate error when files carry their own", async () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("multiple", true);
       fixture.componentRef.setInput("keepRejectedFiles", true);
@@ -404,7 +502,7 @@ describe("FileDropzoneComponent", () => {
           ),
         ),
       ).toBeNull();
-      expect(announced(fixture)).toBe(
+      expect(await announced()).toBe(
         "file-upload.extension-rejected:'bad.txt'",
       );
     });
@@ -418,6 +516,33 @@ describe("FileDropzoneComponent", () => {
       expect(text(".tedi-attachment__feedback")).toBe("Vale formaat");
     });
 
+    it("reports every restriction a file breaks, not just the first", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 50);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
+
+      expect(component.files()[0].error).toBe(
+        "file-dropzone.file-rejected-extension. file-dropzone.file-rejected-size",
+      );
+    });
+
+    it("names a file breaking both restrictions once in the summary", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 50);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
+
+      const summary = text("tedi-feedback-text");
+
+      expect(summary).toContain("'notes.txt'");
+      expect(summary.match(/'notes.txt'/g)?.length).toBe(1);
+    });
+
     it("lists a rejected file so the user can see and remove it", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("keepRejectedFiles", true);
@@ -524,10 +649,9 @@ describe("FileDropzoneComponent", () => {
       fixture.componentRef.setInput("feedbackText", { text: "Custom hint" });
       fixture.detectChanges();
 
-      const input = fileInput(fixture);
-      const id = input.id;
+      const id = fileInput(fixture).id;
 
-      expect(input.getAttribute("aria-describedby")).toBe(
+      expect(zoneOf(fixture).getAttribute("aria-describedby")).toBe(
         `${id}-feedback ${id}-hint`,
       );
     });
@@ -536,9 +660,10 @@ describe("FileDropzoneComponent", () => {
       const host = TestBed.createComponent(DescribedByHostComponent);
       host.detectChanges();
 
-      const input = fileInput(host);
-      expect(input.getAttribute("aria-describedby")).toBe(
-        `described-by-dropzone external-help ${input.id}-hint`,
+      const id = fileInput(host).id;
+
+      expect(zoneOf(host).getAttribute("aria-describedby")).toBe(
+        `described-by-dropzone external-help ${id}-hint`,
       );
     });
 
@@ -672,7 +797,7 @@ describe("FileDropzoneComponent", () => {
       expect(component.files().length).toBe(1);
     });
 
-    it("removes a file through its remove button", () => {
+    it("removes a file through its remove button", async () => {
       const remove = fixture.debugElement.query(
         By.css(".tedi-attachment__actions button"),
       ).nativeElement as HTMLButtonElement;
@@ -683,7 +808,9 @@ describe("FileDropzoneComponent", () => {
       fixture.detectChanges();
 
       expect(component.files()).toEqual([]);
-      expect(announced(fixture)).toBe("file-upload.removed:report.pdf");
+      expect(await announced()).toBe("file-upload.removed:report.pdf");
+      // Polite: no file dialog is involved, so nothing buries it.
+      expect(announcedAs()).toBe("polite");
     });
 
     it("moves focus to the previous file's remove button", async () => {
@@ -733,7 +860,7 @@ describe("FileDropzoneComponent", () => {
       fixture.detectChanges();
 
       expect(document.activeElement).toBe(
-        fixture.debugElement.query(By.css(".tedi-file-dropzone__input"))
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
           .nativeElement,
       );
     });
@@ -744,7 +871,7 @@ describe("FileDropzoneComponent", () => {
       fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
         .nativeElement as HTMLElement;
 
-    it("ignores a selection that carries no files", () => {
+    it("ignores a selection that carries no files", async () => {
       const input = fileInput(fixture);
       Object.defineProperty(input, "files", {
         value: null,
@@ -754,7 +881,7 @@ describe("FileDropzoneComponent", () => {
       fixture.detectChanges();
 
       expect(component.files()).toEqual([]);
-      expect(announced(fixture)).toBe("");
+      expect(await announced()).toBe("");
     });
 
     it("ignores a drop that carries no dataTransfer", () => {
@@ -851,7 +978,7 @@ describe("FileDropzoneComponent", () => {
       ).toBe("remove ");
     });
 
-    it("announces a removal for a file that has no name", () => {
+    it("announces a removal for a file that has no name", async () => {
       fixture.componentRef.setInput("files", [{ id: "1" }]);
       fixture.detectChanges();
 
@@ -861,7 +988,7 @@ describe("FileDropzoneComponent", () => {
       ).click();
       fixture.detectChanges();
 
-      expect(announced(fixture)).toBe("file-upload.removed:");
+      expect(await announced()).toBe("file-upload.removed:");
     });
 
     it("matches an extensionless file on its MIME type", () => {
@@ -931,10 +1058,8 @@ describe("FileDropzoneComponent with reactive forms", () => {
   });
 
   it("marks the control touched on blur", () => {
-    const input = fileInput(fixture);
-
     expect(host.control.touched).toBe(false);
-    input.dispatchEvent(new Event("blur"));
+    zoneOf(fixture).dispatchEvent(new Event("blur"));
     fixture.detectChanges();
 
     expect(host.control.touched).toBe(true);
@@ -1115,7 +1240,7 @@ describe("FileDropzoneComponent with a template that has no focusable row", () =
     fixture.detectChanges();
 
     expect(document.activeElement).toBe(
-      fixture.debugElement.query(By.css(".tedi-file-dropzone__input"))
+      fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
         .nativeElement,
     );
   });
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index e62c96455..3c04d18c9 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -13,6 +13,7 @@ import {
   Injector,
   input,
   model,
+  OnDestroy,
   OnInit,
   output,
   signal,
@@ -27,6 +28,10 @@ import {
   ValidationErrors,
   Validator,
 } from "@angular/forms";
+import {
+  ToastAnnouncerService,
+  ToastPoliteness,
+} from "../../../services/toast/toast-announcer.service";
 import { TediTranslationService } from "../../../services/translation/translation.service";
 import { generateUUID } from "../../../helpers/generate-uuid";
 import { formatFileSize } from "../../../utils/file.util";
@@ -47,6 +52,13 @@ type FileRejectionReason = "extension" | "size";
 
 let fileDropzoneIdCounter = 0;
 
+/**
+ * Closing the file dialog leaves the screen reader busy, and a message inserted
+ * during it is dropped rather than queued — even an assertive one. Kept private
+ * so it stays out of the published API; the spec mirrors it.
+ */
+const ADD_ANNOUNCE_DELAY = 300;
+
 const FOCUSABLE =
   'button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
@@ -90,15 +102,16 @@ const fileIdentity = (file: FileDropzoneFile): string =>
   },
 })
 export class FileDropzoneComponent
-  implements OnInit, ControlValueAccessor, Validator
+  implements OnInit, ControlValueAccessor, Validator, OnDestroy
 {
   private readonly translations = inject(TediTranslationService);
+  private readonly announcer = inject(ToastAnnouncerService);
+  private addAnnounceTimeout?: ReturnType<typeof setTimeout>;
   private readonly injector = inject(Injector);
-  private announceId = 0;
-  protected readonly announcements = signal<{ id: number; text: string }[]>([]);
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly fileInput =
     viewChild<ElementRef<HTMLInputElement>>("fileInput");
+  private readonly dropZone = viewChild<ElementRef<HTMLElement>>("zone");
 
   /**
    * Files held by the dropzone, and the value written by `formControl` /
@@ -230,10 +243,6 @@ export class FileDropzoneComponent
     "file-dropzone.selected-files",
   );
 
-  protected readonly rejectedLabel = this.translations.track(
-    "file-dropzone.rejected",
-  );
-
   /**
    * Everything the file list binds, resolved once per `files()` change. Keeps
    * the template free of calls that would re-run — and re-allocate strings — on
@@ -359,6 +368,23 @@ export class FileDropzoneComponent
     this.formDisabled.set(isDisabled);
   }
 
+  protected openPicker(): void {
+    if (!this.isDisabled()) {
+      this.fileInput()?.nativeElement.click();
+    }
+  }
+
+  /**
+   * A `role="button"` div gets no keyboard activation of its own, so Enter and
+   * Space have to be wired up by hand. Space also scrolls the page by default.
+   */
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.openPicker();
+    }
+  }
+
   protected handleSelection(event: Event): void {
     const input = event.target as HTMLInputElement;
     this.addFiles(Array.from(input.files ?? []));
@@ -410,6 +436,9 @@ export class FileDropzoneComponent
     this.commit(this.files().filter((current) => current !== file));
     this.fileRemove.emit(file);
     this.onTouched();
+    // A pending "added" is superseded by this removal; letting it fire would
+    // announce the two in the wrong order.
+    clearTimeout(this.addAnnounceTimeout);
     this.announce(
       this.translations.translate("file-upload.removed", file.name ?? ""),
     );
@@ -421,7 +450,8 @@ export class FileDropzoneComponent
    * fall to `<body>`, losing the user's place. Move it to the *previous* file's
    * remove button rather than the next one, so repeated presses cannot walk
    * destructively down the list. Removing the first file has no previous row, so
-   * focus goes to the one that replaced it; removing the last goes to the drop zone.
+   * focus goes to the one that replaced it; removing the last goes to the drop
+   * zone.
    */
   private restoreFocus(removedIndex: number): void {
     afterNextRender(
@@ -431,7 +461,7 @@ export class FileDropzoneComponent
         );
 
         if (!rows.length) {
-          this.fileInput()?.nativeElement.focus();
+          this.dropZone()?.nativeElement.focus();
           return;
         }
 
@@ -439,7 +469,7 @@ export class FileDropzoneComponent
 
         (
           row.querySelector<HTMLElement>(FOCUSABLE) ??
-          this.fileInput()?.nativeElement
+          this.dropZone()?.nativeElement
         )?.focus();
       },
       { injector: this.injector },
@@ -463,18 +493,22 @@ export class FileDropzoneComponent
     const fresh = selected.filter((file) => !listed.has(fileIdentity(file)));
 
     const candidates = fresh.map((file) => {
-      const reason = this.reasonFor(file);
-      if (reason) rejected.push({ reason, file });
+      const reasons = this.reasonsFor(file);
+      if (reasons.length) rejected.push({ reason: reasons[0], file });
 
       return Object.assign(file, {
         id: generateUUID(),
         isLoading: false,
-        isValid: !reason,
+        isValid: !reasons.length,
         error:
-          reason && keepRejected
-            ? this.translations.translate(
-                `file-dropzone.file-rejected-${reason}`,
-              )
+          reasons.length && keepRejected
+            ? reasons
+                .map((reason) =>
+                  this.translations.translate(
+                    `file-dropzone.file-rejected-${reason}`,
+                  ),
+                )
+                .join(". ")
             : undefined,
       }) as FileDropzoneFile;
     });
@@ -490,17 +524,21 @@ export class FileDropzoneComponent
       this.commit(multiple ? [...this.files(), ...kept] : [kept[0]]);
     }
 
+    // One selection can reject, skip and add all at once. The live region holds
+    // a single message, so these are gathered and announced together —
+    // announcing them one by one overwrites all but the last.
+    const messages: string[] = [];
+
     if (rejected.length) {
       const message = this.rejectionMessage(rejected);
       this.rejectionError.set(keepRejected ? undefined : message);
-      this.announce(message);
-      return;
+      messages.push(message);
+    } else {
+      this.rejectionError.set(undefined);
     }
 
-    this.rejectionError.set(undefined);
-
     if (duplicates.length) {
-      this.announce(
+      messages.push(
         this.translations.translate(
           "file-upload.duplicates-skipped",
           duplicates.map((file) => `'${file.name}'`).join(", "),
@@ -508,14 +546,31 @@ export class FileDropzoneComponent
       );
     }
 
-    if (kept.length) {
-      this.announce(
+    const added = kept.filter((file) => file.isValid);
+
+    if (added.length) {
+      messages.push(
         this.translations.translate(
           "file-upload.added",
-          String(multiple ? kept.length : 1),
+          String(multiple ? added.length : 1),
         ),
       );
     }
+
+    // Assertive and delayed, because the file dialog buries this twice over:
+    // closing it leaves the screen reader reading the drop zone button for
+    // seconds, so a polite message never gets spoken, and an assertive one
+    // inserted too early is lost in the transition. Removal needs neither — no
+    // dialog is involved there.
+    clearTimeout(this.addAnnounceTimeout);
+    this.addAnnounceTimeout = setTimeout(
+      () => this.announce(messages.join(". "), "assertive"),
+      ADD_ANNOUNCE_DELAY,
+    );
+  }
+
+  ngOnDestroy(): void {
+    clearTimeout(this.addAnnounceTimeout);
   }
 
   private commit(files: FileDropzoneFile[]): void {
@@ -556,11 +611,18 @@ export class FileDropzoneComponent
     });
   }
 
-  private reasonFor(file: FileDropzoneFile): FileRejectionReason | undefined {
-    if (!this.isAcceptedType(file as File)) return "extension";
-    if (!this.isAcceptedSize(file as File)) return "size";
+  /**
+   * Every restriction the file breaks, not just the first. A file can be both
+   * the wrong format and too large; reporting one reason at a time sends the
+   * user away to fix it, only to reject it again for the other.
+   */
+  private reasonsFor(file: FileDropzoneFile): FileRejectionReason[] {
+    const reasons: FileRejectionReason[] = [];
+
+    if (!this.isAcceptedType(file as File)) reasons.push("extension");
+    if (!this.isAcceptedSize(file as File)) reasons.push("size");
 
-    return undefined;
+    return reasons;
   }
 
   /**
@@ -588,14 +650,14 @@ export class FileDropzoneComponent
   }
 
   /**
-   * Feeds the component's own live region. CDK's `LiveAnnouncer` is deliberately
-   * not used: it rewrites `aria-live` on every call, and screen readers re-register
-   * a region mutated that way and drop the pending message. Each announcement is
-   * rendered as a fresh node so that repeating the same text still announces.
+   * Announced from the root-level regions, not a node of this component's own.
+   * Adding files rebuilds the rows beside such a node — wholesale when
+   * `multiple` is off and the row is replaced — and a live region updated in
+   * the same breath as the subtree around it is dropped by screen readers.
    */
-  private announce(text: string): void {
+  private announce(text: string, politeness: ToastPoliteness = "polite"): void {
     if (text) {
-      this.announcements.set([{ id: ++this.announceId, text }]);
+      this.announcer.announce(text, politeness);
     }
   }
 }
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
index e58b3c09b..022ee27c1 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -414,14 +414,16 @@ export const States: Story = {
               <p tedi-text modifiers="bold">{{ state.label }}</p>
             </tedi-col>
             <tedi-col width="5">
-              <tedi-file-dropzone
-                [id]="state.id"
-                [inputId]="state.id + '-input'"
-                [maxSize]="30 * 1024 ** 2"
-                [disabled]="!!state.disabled"
-                [feedbackText]="state.feedbackText"
-                [storyDropOver]="!!state.dropOver"
-              />
+              <div style="max-width: 420px">
+                <tedi-file-dropzone
+                  [id]="state.id"
+                  [inputId]="state.id + '-input'"
+                  [maxSize]="30 * 1024 ** 2"
+                  [disabled]="!!state.disabled"
+                  [feedbackText]="state.feedbackText"
+                  [storyDropOver]="!!state.dropOver"
+                />
+              </div>
             </tedi-col>
           </tedi-row>
         }
@@ -451,6 +453,7 @@ export const WithReactiveForms: Story = {
           control.value.filter((file) => file.isValid === false).length,
       },
       template: `
+        <div style="max-width: 420px">
         <tedi-row [cols]="1" [gapY]="3">
           <tedi-col>
             <tedi-file-dropzone
@@ -474,6 +477,7 @@ export const WithReactiveForms: Story = {
             </tedi-alert>
           </tedi-col>
         </tedi-row>
+        </div>
       `,
     };
   },
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
index a77085e34..74be9b5d4 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -31,6 +31,10 @@ export interface FileDropzoneFile extends Partial<File> {
    * Validation message rendered under this file. Set for files the dropzone
    * rejects itself; set it yourself on preloaded files, or to surface an error
    * the upload returned.
+   *
+   * Required whenever you set `isValid: false`. The error visual — red card and
+   * icon — carries no text alternative, so without a message the failure is
+   * conveyed by colour alone and never reaches a screen reader.
    */
   error?: string;
 }
diff --git a/src/tedi/components/helpers/attachment/attachment.component.html b/src/tedi/components/helpers/attachment/attachment.component.html
index 490693a3b..621ac5651 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.html
+++ b/src/tedi/components/helpers/attachment/attachment.component.html
@@ -10,7 +10,7 @@
           name="error"
           color="danger"
           [size]="18"
-          [label]="error()"
+          [label]="error() ? undefined : invalidLabel()"
           class="tedi-attachment__error-icon"
         />
       }
diff --git a/src/tedi/components/helpers/attachment/attachment.component.spec.ts b/src/tedi/components/helpers/attachment/attachment.component.spec.ts
index 63abc5764..f54cf42da 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.spec.ts
+++ b/src/tedi/components/helpers/attachment/attachment.component.spec.ts
@@ -192,6 +192,32 @@ describe("AttachmentComponent", () => {
     );
   });
 
+  it("should keep the error icon out of the accessibility tree", () => {
+    host.error = "File too large";
+    fixture.detectChanges();
+
+    const icon = element.querySelector(".tedi-attachment__error-icon")!;
+
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+    expect(icon.getAttribute("aria-label")).toBeNull();
+    expect(icon.hasAttribute("tabindex")).toBe(false);
+    // Announced once, by the feedback text, not twice.
+    expect(element.textContent?.match(/File too large/g)?.length).toBe(1);
+  });
+
+  it("should name the error icon when nothing else reports the failure", () => {
+    host.invalid = true;
+    fixture.detectChanges();
+
+    const icon = element.querySelector(".tedi-attachment__error-icon")!;
+
+    // `invalid` renders no message, so an unnamed icon would leave the failure
+    // conveyed by colour alone.
+    expect(element.querySelector("tedi-feedback-text")).toBeNull();
+    expect(icon.getAttribute("aria-label")).toBe("file-attachment.invalid");
+    expect(icon.getAttribute("aria-hidden")).toBe("false");
+  });
+
   it("should not render the feedback line when there is no error", () => {
     expect(element.querySelector("tedi-feedback-text")).toBeNull();
   });
diff --git a/src/tedi/components/helpers/attachment/attachment.component.ts b/src/tedi/components/helpers/attachment/attachment.component.ts
index a5ee36e20..c27b2f1f2 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.ts
+++ b/src/tedi/components/helpers/attachment/attachment.component.ts
@@ -15,6 +15,7 @@ import {
   Breakpoint,
   BreakpointService,
 } from "../../../services/breakpoint/breakpoint.service";
+import { TediTranslationService } from "../../../services/translation/translation.service";
 
 export type AttachmentDirection = "horizontal" | "vertical";
 
@@ -36,6 +37,9 @@ export type AttachmentDirection = "horizontal" | "vertical";
 export class AttachmentComponent {
   protected projectedProgress = contentChild(ProgressBarComponent);
   private breakpointService = inject(BreakpointService);
+  private translations = inject(TediTranslationService);
+
+  protected invalidLabel = this.translations.track("file-attachment.invalid");
 
   /**
    * File name to display.
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index d2215a500..96df72eb8 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -304,14 +304,6 @@ export const translationsMap = {
     en: "Selected files",
     ru: "Выбранные файлы",
   },
-  "file-dropzone.rejected": {
-    description:
-      "Screen-reader only label marking a file in the list that failed validation",
-    components: ["FileDropzone"],
-    et: "Vigane fail",
-    en: "Invalid file",
-    ru: "Недопустимый файл",
-  },
   "file-dropzone.file-rejected-extension": {
     description:
       "Validation message shown under a single file that has a disallowed type",
@@ -357,6 +349,14 @@ export const translationsMap = {
     en: "An error occurred while uploading the file",
     ru: "Произошла ошибка при загрузке файла",
   },
+  "file-attachment.invalid": {
+    description:
+      "Accessible name of the error icon on an attachment marked invalid without a message of its own",
+    components: ["Attachment"],
+    et: "Vigane fail",
+    en: "Invalid file",
+    ru: "Недопустимый файл",
+  },
   "file-attachment.uploading": {
     description:
       "Default hint label shown under the progress bar in Attachment while a file is being uploaded",

From fcd661cbbf4d8f162a1ba73c8031a67302a7c0ba Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Mon, 28 Sep 2026 17:17:47 +0300
Subject: [PATCH 5/8] feat(file-dropzone): add CR fixes #588

---
 .../form/file-dropzone/file-dropzone.component.ts |  8 ++++++++
 .../form/file-dropzone/file-dropzone.stories.ts   | 15 +++++++++------
 .../form/file-dropzone/file-dropzone.types.ts     |  6 +++---
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index 3c04d18c9..cb1985ebc 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -144,12 +144,20 @@ export class FileDropzoneComponent
    * Allowed file types as a comma-separated list of extensions and MIME types
    * (`".pdf,.txt"`, `"image/png"`, `"image/*"`). Forwarded to the input's
    * `accept` attribute and re-checked on drop, which bypasses it.
+   *
+   * Applies to what is picked next. Files already listed keep the verdict they
+   * were given, so clear them yourself if you tighten this while they are
+   * listed.
    */
   readonly accept = input<string>();
   /**
    * Largest accepted file size, in bytes — the unit `File.size` is in. The
    * restrictions hint renders it in whichever unit reads best, so a sub-megabyte
    * limit still shows as e.g. `500 KB`.
+   *
+   * Applies to what is picked next. Files already listed keep the verdict they
+   * were given, so clear them yourself if you tighten this while they are
+   * listed.
    */
   readonly maxSize = input<number>();
   /**
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
index 022ee27c1..4af1cd65d 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -156,13 +156,15 @@ export default {
     },
     accept: {
       description:
-        "Allowed file types as a comma-separated list of extensions and MIME types. Re-checked on drop, which bypasses the `accept` attribute.",
+        "Allowed file types as a comma-separated list of extensions and MIME types. Re-checked on drop, which bypasses the `accept` attribute." +
+        " Applies to what is picked next — files already listed keep the verdict they were given.",
       control: "text",
       table: { category: "inputs", type: { summary: "string" } },
     },
     maxSize: {
       description:
-        "Largest accepted file size, in bytes. The restrictions hint renders it in whichever unit reads best.",
+        "Largest accepted file size, in bytes. The restrictions hint renders it in whichever unit reads best." +
+        " Applies to what is picked next — files already listed keep the verdict they were given.",
       control: "number",
       table: { category: "inputs", type: { summary: "number" } },
     },
@@ -395,13 +397,14 @@ export const WithCustomFileTemplate: Story = {
 
 export const States: Story = {
   parameters: {
-    // The states live on the dropzone's inner label, not on the component host,
-    // and the addon only rewrites `:hover` to a class on the styled element
-    // itself — so these selectors have to reach that label.
+    // The states live on the drop zone, not on the component host, and the addon
+    // only rewrites a pseudo-class to a class on the styled element itself — so
+    // every selector has to reach the zone. It is also the focusable element:
+    // the file input is `display: none` and out of the tab order.
     pseudo: {
       hover: "#Hover .tedi-file-dropzone__zone",
       active: "#Active .tedi-file-dropzone__zone",
-      focusVisible: "#Focus input",
+      focusVisible: "#Focus .tedi-file-dropzone__zone",
     },
   },
   render: () => ({
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
index 74be9b5d4..3f16a6802 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -32,9 +32,9 @@ export interface FileDropzoneFile extends Partial<File> {
    * rejects itself; set it yourself on preloaded files, or to surface an error
    * the upload returned.
    *
-   * Required whenever you set `isValid: false`. The error visual — red card and
-   * icon — carries no text alternative, so without a message the failure is
-   * conveyed by colour alone and never reaches a screen reader.
+   * Worth setting whenever you set `isValid: false`: without it the error icon
+   * falls back to a generic "invalid file" label, so the failure is announced
+   * but its reason is not.
    */
   error?: string;
 }

From a3ca6bc4cdcbc41d4152b277ea4e92002d754608 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 7 Oct 2026 17:07:13 +0300
Subject: [PATCH 6/8] feat(file-dropzone): add validator input and validation
 fixes #588

---
 skills/tedi-angular/references/components.md  |  14 +-
 .../file-dropzone.component.html              |   1 +
 .../file-dropzone.component.spec.ts           | 118 +++++++++++++-
 .../file-dropzone/file-dropzone.component.ts  | 151 ++++++++++++------
 .../file-dropzone/file-dropzone.stories.ts    |  80 +++++++---
 .../form/file-dropzone/file-dropzone.types.ts |   6 +
 6 files changed, 297 insertions(+), 73 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 07669cfe6..06bb3cbbc 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -210,7 +210,7 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
 - **`tedi-file-dropzone` validates itself.** It registers on `NG_VALIDATORS`, so a `formControl` bound
   to it fails with a `rejectedFiles` error (carrying the offending files) while any rejected file is
   still listed — you don't add a validator for that. `Validators.required` alone would pass on a list
-  of visibly broken files, since `keepRejectedFiles` keeps them in the value. Same shape as Angular
+  of visibly broken files whenever `keepRejectedFiles` is on and keeps them in the value. Same shape as Angular
   Material's datepicker: the constraint comes from the component's own inputs (`accept`, `maxSize`), so
   the component owns the rule. No `registerOnValidatorChange` is needed — `validate()` is a pure
   function of the control value, which Angular already revalidates on every change.
@@ -219,11 +219,13 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   URL revoked without diffing the two arrays.
 - **`tedi-file-dropzone` selects files, it does not upload them.** It validates against `accept` and
   `maxSize` and hands you the list; the upload, and setting each file's `isLoading` / `isValid` as it
-  progresses, is yours. `keepRejectedFiles` decides what happens to a file that fails `accept` or
-  `maxSize`: on (the default) keeps it in the list with its reason in that file's `error`, leaving the
-  dropzone's own border neutral — so the form value holds it with `isValid: false` and you must filter
-  on `isValid` before uploading. Off discards it instead and summarises every rejection in one message
-  under the dropzone, which also paints the border red. `error` is writable, so a failure the upload
+  progresses, is yours. A `validator` input adds a rule of your own on top, run only once the
+  built-in restrictions pass; the reason it returns lands on that file's `error` and joins the summary,
+  with the files it rejected named after it. `keepRejectedFiles` decides what happens to a file that
+  fails `accept`, `maxSize` or `validator`: off (the default) discards it and summarises every rejection in one message under the
+  dropzone, which paints the border red. On keeps it in the list with its reason in that file's
+  `error`, leaving the border neutral — so the form value holds it with `isValid: false` and you must
+  filter on `isValid` before uploading. `error` is writable, so a failure the upload
   came back with lands on the file it belongs to.
 - **Selecting a file that is already listed is skipped**, matched on name, size and mtime — so two
   different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.html b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
index 428a6761f..873581e9d 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.html
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
@@ -38,6 +38,7 @@
   [multiple]="multiple()"
   [disabled]="isDisabled()"
   (change)="handleSelection($event)"
+  (cancel)="handleDialogCancel()"
 />
 
 @if (rejectionError(); as error) {
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
index 5e14b96a0..25153768a 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -516,6 +516,94 @@ describe("FileDropzoneComponent", () => {
       expect(text(".tedi-attachment__feedback")).toBe("Vale formaat");
     });
 
+    const noSpaces = (file: File) =>
+      file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid." : null;
+
+    it("rejects a file through a validator of the consumer's own", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(false);
+      expect(component.files()[0].error).toBe(
+        "Failinimes ei tohi olla tühikuid.",
+      );
+    });
+
+    it("clears the summary once the last file is removed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text")).not.toContain("extension-rejected");
+    });
+
+    it("keeps the summary while other files are still listed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("a.pdf"), makeFile("b.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files().length).toBe(1);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+    });
+
+    it("names every file a custom rule rejected in one message", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf"), makeFile("a b.pdf")]);
+
+      expect(text("tedi-feedback-text")).toContain(
+        "Failinimes ei tohi olla tühikuid: 'my scan.pdf', 'a b.pdf'",
+      );
+    });
+
+    it("leaves the validator unrun on a file the restrictions already reject", () => {
+      const validator = jest.fn(noSpaces);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("validator", validator);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
+
+      expect(validator).not.toHaveBeenCalled();
+    });
+
+    it("accepts a file its validator returns nothing for", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("korras.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(true);
+      expect(component.files()[0].error).toBeUndefined();
+    });
+
     it("reports every restriction a file breaks, not just the first", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("maxSize", 50);
@@ -567,6 +655,7 @@ describe("FileDropzoneComponent", () => {
     it("leaves the border alone when rejected files carry their own reason", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
       fixture.detectChanges();
 
       selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
@@ -1019,6 +1108,7 @@ describe("FileDropzoneComponent", () => {
     [formControl]="control"
     accept=".pdf"
     multiple
+    keepRejectedFiles
   />`,
 })
 class ReactiveFormsHostComponent {
@@ -1057,11 +1147,37 @@ describe("FileDropzoneComponent with reactive forms", () => {
     ]);
   });
 
-  it("marks the control touched on blur", () => {
+  it("marks the control touched when the user moves on from the zone", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(true);
+
     expect(host.control.touched).toBe(false);
     zoneOf(fixture).dispatchEvent(new Event("blur"));
     fixture.detectChanges();
 
+    expect(host.control.touched).toBe(true);
+    hasFocus.mockRestore();
+  });
+
+  it("ignores the blur that opening the file dialog causes", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    zoneOf(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(false);
+    hasFocus.mockRestore();
+  });
+
+  it("marks the control touched when the dialog is dismissed", () => {
+    fileInput(fixture).dispatchEvent(new Event("cancel"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("marks the control touched when files are picked", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+
     expect(host.control.touched).toBe(true);
   });
 
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index cb1985ebc..8956a7348 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -1,4 +1,4 @@
-import { NgTemplateOutlet } from "@angular/common";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
 import {
   afterNextRender,
   booleanAttribute,
@@ -46,7 +46,11 @@ import {
   FileDropzoneFileContext,
   FileDropzoneFileDirective,
 } from "./file-dropzone-file.directive";
-import { FileDropzoneFeedback, FileDropzoneFile } from "./file-dropzone.types";
+import {
+  FileDropzoneFeedback,
+  FileDropzoneFile,
+  FileDropzoneValidator,
+} from "./file-dropzone.types";
 
 type FileRejectionReason = "extension" | "size";
 
@@ -104,6 +108,7 @@ const fileIdentity = (file: FileDropzoneFile): string =>
 export class FileDropzoneComponent
   implements OnInit, ControlValueAccessor, Validator, OnDestroy
 {
+  private readonly document = inject(DOCUMENT);
   private readonly translations = inject(TediTranslationService);
   private readonly announcer = inject(ToastAnnouncerService);
   private addAnnounceTimeout?: ReturnType<typeof setTimeout>;
@@ -160,6 +165,18 @@ export class FileDropzoneComponent
    * listed.
    */
   readonly maxSize = input<number>();
+  /**
+   * A rule of your own for each selected file, run after `accept` and `maxSize`
+   * pass — a minimum size, a naming convention. Return the reason a file is
+   * rejected, or nothing to accept it. The reason lands on that file's `error`
+   * and joins the rejection summary, followed by the names it rejected.
+   *
+   * It is not summarised in the restrictions hint, so describe the rule in your
+   * own `feedbackText`. Applies to what is picked next, like `accept`. For
+   * checks needing a server round trip, set `isLoading` and then `isValid` on
+   * the file yourself instead.
+   */
+  readonly validator = input<FileDropzoneValidator>();
   /**
    * Whether more than one file can be held at a time. A single-file dropzone
    * replaces its file on the next selection.
@@ -168,12 +185,12 @@ export class FileDropzoneComponent
   readonly multiple = input(false, { transform: booleanAttribute });
   /**
    * Keeps rejected files in the list, each carrying its own reason, so the user
-   * can see which of their files failed and remove it. Turn it off to discard a
-   * rejected file instead and summarise every rejection in one message under
-   * the dropzone.
-   * @default true
+   * can see which of their files failed and remove it. Left off, a rejected
+   * file is discarded and every rejection is summarised in one message under
+   * the dropzone instead.
+   * @default false
    */
-  readonly keepRejectedFiles = input(true, { transform: booleanAttribute });
+  readonly keepRejectedFiles = input(false, { transform: booleanAttribute });
   /**
    * Whether the allowed types and maximum size are summarised in a hint below
    * the dropzone. Turn it off when the same information is shown elsewhere —
@@ -349,6 +366,7 @@ export class FileDropzoneComponent
 
   writeValue(files: FileDropzoneFile[] | null): void {
     this.files.set(files ?? []);
+    this.clearRejectionWhenEmpty();
   }
 
   registerOnChange(fn: (files: FileDropzoneFile[]) => void): void {
@@ -358,7 +376,7 @@ export class FileDropzoneComponent
   /**
    * Fails the control while any rejected file is still listed. Without it a
    * `Validators.required` control reports valid on a list of visibly broken
-   * files, since `keepRejectedFiles` keeps them in the value.
+   * files, which `keepRejectedFiles` leaves in the value.
    */
   validate(control: AbstractControl): ValidationErrors | null {
     const rejected = ((control.value ?? []) as FileDropzoneFile[]).filter(
@@ -396,12 +414,18 @@ export class FileDropzoneComponent
   protected handleSelection(event: Event): void {
     const input = event.target as HTMLInputElement;
     this.addFiles(Array.from(input.files ?? []));
-    // Without this the same file cannot be picked twice in a row: the input
-    // holds it, so re-selecting it fires no `change`.
+    this.onTouched();
     input.value = "";
   }
 
   protected handleBlur(): void {
+    if (this.document.hasFocus()) {
+      this.onTouched();
+    }
+  }
+
+  /** Dismissing the dialog counts as interaction, even with nothing picked. */
+  protected handleDialogCancel(): void {
     this.onTouched();
   }
 
@@ -442,6 +466,7 @@ export class FileDropzoneComponent
     const removedIndex = this.files().indexOf(file);
 
     this.commit(this.files().filter((current) => current !== file));
+    this.clearRejectionWhenEmpty();
     this.fileRemove.emit(file);
     this.onTouched();
     // A pending "added" is superseded by this removal; letting it fire would
@@ -489,6 +514,9 @@ export class FileDropzoneComponent
 
     const keepRejected = this.keepRejectedFiles();
     const rejected: { reason: FileRejectionReason; file: File }[] = [];
+    // Keyed by message so files failing the same custom rule are named together,
+    // the way the built-in reasons are.
+    const customRejections = new Map<string, string[]>();
 
     // Picking the same file twice almost always means the user lost track of
     // what they had already added, so the repeat is skipped rather than listed
@@ -502,22 +530,38 @@ export class FileDropzoneComponent
 
     const candidates = fresh.map((file) => {
       const reasons = this.reasonsFor(file);
-      if (reasons.length) rejected.push({ reason: reasons[0], file });
+      // Only run the consumer's rule once the restrictions pass; a file that is
+      // already the wrong format need not be judged on anything else.
+      const custom = reasons.length
+        ? undefined
+        : (this.validator()?.(file) ?? undefined) || undefined;
+
+      if (reasons.length) {
+        rejected.push({ reason: reasons[0], file });
+      } else if (custom) {
+        customRejections.set(custom, [
+          ...(customRejections.get(custom) ?? []),
+          `'${file.name}'`,
+        ]);
+      }
+
+      const message =
+        custom ??
+        (reasons.length
+          ? reasons
+              .map((reason) =>
+                this.translations.translate(
+                  `file-dropzone.file-rejected-${reason}`,
+                ),
+              )
+              .join(". ")
+          : undefined);
 
       return Object.assign(file, {
         id: generateUUID(),
         isLoading: false,
-        isValid: !reasons.length,
-        error:
-          reasons.length && keepRejected
-            ? reasons
-                .map((reason) =>
-                  this.translations.translate(
-                    `file-dropzone.file-rejected-${reason}`,
-                  ),
-                )
-                .join(". ")
-            : undefined,
+        isValid: !reasons.length && !custom,
+        error: keepRejected ? message : undefined,
       }) as FileDropzoneFile;
     });
 
@@ -537,13 +581,10 @@ export class FileDropzoneComponent
     // announcing them one by one overwrites all but the last.
     const messages: string[] = [];
 
-    if (rejected.length) {
-      const message = this.rejectionMessage(rejected);
-      this.rejectionError.set(keepRejected ? undefined : message);
-      messages.push(message);
-    } else {
-      this.rejectionError.set(undefined);
-    }
+    const rejection = this.rejectionMessage(rejected, customRejections);
+
+    this.rejectionError.set(rejection && !keepRejected ? rejection : undefined);
+    if (rejection) messages.push(rejection);
 
     if (duplicates.length) {
       messages.push(
@@ -581,6 +622,17 @@ export class FileDropzoneComponent
     clearTimeout(this.addAnnounceTimeout);
   }
 
+  /**
+   * The summary names files that were never listed, so only emptying the field
+   * makes it stale — otherwise it lingers under an empty dropzone, holding the
+   * border red.
+   */
+  private clearRejectionWhenEmpty(): void {
+    if (!this.files().length) {
+      this.rejectionError.set(undefined);
+    }
+  }
+
   private commit(files: FileDropzoneFile[]): void {
     this.files.set(files);
     this.onChange(files);
@@ -639,22 +691,31 @@ export class FileDropzoneComponent
    */
   private rejectionMessage(
     rejected: { reason: FileRejectionReason; file: File }[],
-  ): string {
-    return (["extension", "size"] as const)
-      .map((reason) => {
-        const names = rejected
-          .filter((rejection) => rejection.reason === reason)
-          .map((rejection) => `'${rejection.file.name}'`);
-
-        return names.length
-          ? this.translations.translate(
-              `file-upload.${reason}-rejected`,
-              names.join(", "),
-            )
-          : null;
-      })
-      .filter(Boolean)
-      .join(". ");
+    customRejections: Map<string, string[]>,
+  ): string | undefined {
+    return (
+      [
+        ...(["extension", "size"] as const).map((reason) => {
+          const names = rejected
+            .filter((rejection) => rejection.reason === reason)
+            .map((rejection) => `'${rejection.file.name}'`);
+
+          return names.length
+            ? this.translations.translate(
+                `file-upload.${reason}-rejected`,
+                names.join(", "),
+              )
+            : null;
+        }),
+        ...Array.from(
+          customRejections,
+          ([message, names]) =>
+            `${message.replace(/[\s.]+$/, "")}: ${names.join(", ")}`,
+        ),
+      ]
+        .filter(Boolean)
+        .join(". ") || undefined
+    );
   }
 
   /**
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
index 4af1cd65d..e03c0e5de 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -168,6 +168,16 @@ export default {
       control: "number",
       table: { category: "inputs", type: { summary: "number" } },
     },
+    validator: {
+      description:
+        "A rule of your own for each selected file, run after `accept` and `maxSize` pass. Return the reason a file is rejected, or nothing to accept it. The reason lands on that file's `error` and joins the rejection summary." +
+        " It is not summarised in the restrictions hint, so describe the rule in your own `feedbackText`.",
+      control: false,
+      table: {
+        category: "inputs",
+        type: { summary: "(file: File) => string | null | undefined" },
+      },
+    },
     multiple: {
       description:
         "Whether more than one file can be held. A single-file dropzone replaces its file on the next selection.",
@@ -180,12 +190,12 @@ export default {
     },
     keepRejectedFiles: {
       description:
-        "Keeps rejected files in the list, each carrying its own reason. Turn it off to discard a rejected file instead and summarise every rejection in one message under the dropzone.",
+        "Keeps rejected files in the list, each carrying its own reason. Left off, a rejected file is discarded and every rejection is summarised in one message under the dropzone instead.",
       control: "boolean",
       table: {
         category: "inputs",
         type: { summary: "boolean" },
-        defaultValue: { summary: "true" },
+        defaultValue: { summary: "false" },
       },
     },
     showRestrictions: {
@@ -303,7 +313,34 @@ export const WithFileSize: Story = {
 };
 
 /**
- * The default. A rejected file stays in the list carrying its own reason, so the
+ * The default. A rejected file is discarded, so only the files that passed
+ * remain and the failure is reported once under the dropzone, which turns its
+ * border red.
+ */
+export const DiscardingRejectedFiles: Story = {
+  name: "Validation: discarding rejected files",
+  args: {
+    accept: ".pdf,.txt",
+    maxSize: 1024 ** 2,
+    multiple: true,
+    keepRejectedFiles: false,
+    files: [
+      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
+      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
+    ],
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone ${argsToTemplate(args)} storyRejectedDrop="Kodukülastusakt_Triin.png" />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * The opt-in. A rejected file stays in the list carrying its own reason, so the
  * user can see which file failed and remove it. The dropzone's border stays
  * neutral — the failure belongs to the file, not the field.
  */
@@ -311,6 +348,7 @@ export const KeepingRejectedFiles: Story = {
   name: "Validation: keeping rejected files",
   args: {
     multiple: true,
+    keepRejectedFiles: true,
     accept: ".pdf,.txt",
     files: [
       { id: "1", name: "Kodukülastusakt_Triin.pdf" },
@@ -327,27 +365,27 @@ export const KeepingRejectedFiles: Story = {
 };
 
 /**
- * The opt-out. With `keepRejectedFiles` turned off the rejected file is
- * discarded, so only the files that passed remain and the failure is reported
- * once under the dropzone, which turns its border red.
+ * The restrictions hint can't describe the rule, so add your own feedback text.
+ * Pick a file with a space in its name to try it.
  */
-export const DiscardingRejectedFiles: Story = {
-  name: "Validation: discarding rejected files",
-  args: {
-    accept: ".pdf,.txt",
-    maxSize: 1024 ** 2,
-    multiple: true,
-    keepRejectedFiles: false,
-    files: [
-      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
-      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
-    ],
-  },
-  render: (args) => ({
-    props: { ...args },
+export const WithValidator: Story = {
+  render: () => ({
+    props: {
+      files: [],
+      noSpaces: (file: File) =>
+        file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid" : null,
+      feedbackText: { text: "Failinimes ei tohi olla tühikuid." },
+    },
     template: `
       <div style="max-width: 420px">
-        <tedi-file-dropzone ${argsToTemplate(args)} storyRejectedDrop="Kodukülastusakt_Triin.png" />
+        <tedi-file-dropzone
+          multiple
+          keepRejectedFiles
+          accept=".pdf,.txt"
+          [validator]="noSpaces"
+          [feedbackText]="feedbackText"
+          [files]="files"
+        />
       </div>
     `,
   }),
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
index 3f16a6802..41a9e6a32 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -8,6 +8,12 @@ export type FileDropzoneFeedback = Partial<
   ComponentInputs<FeedbackTextComponent>
 > & { text: string };
 
+/**
+ * Validates a selected file. Returns the reason it is rejected, or nothing to
+ * accept it.
+ */
+export type FileDropzoneValidator = (file: File) => string | null | undefined;
+
 /**
  * A file held by the dropzone. Real selections are `File` objects carrying the
  * extra fields; a preloaded entry only needs a `name`.

From 7ad8cc48abc59bdeae928ae472d48704772d6bd3 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 13 Oct 2026 18:21:39 +0300
Subject: [PATCH 7/8] feat(file-dropzone): add hint, error and success inputs
 and report every rejection reason #588

---
 skills/tedi-angular/references/components.md  |  11 +-
 .../file-dropzone.component.html              |  16 +-
 .../file-dropzone.component.spec.ts           | 130 ++++++++++--
 .../file-dropzone/file-dropzone.component.ts  | 197 ++++++++++--------
 .../file-dropzone/file-dropzone.stories.ts    |  54 ++---
 .../form/file-dropzone/file-dropzone.types.ts |  14 +-
 src/tedi/services/translation/translations.ts |  59 ++++--
 7 files changed, 308 insertions(+), 173 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 06bb3cbbc..85f3ca60b 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -219,14 +219,19 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   URL revoked without diffing the two arrays.
 - **`tedi-file-dropzone` selects files, it does not upload them.** It validates against `accept` and
   `maxSize` and hands you the list; the upload, and setting each file's `isLoading` / `isValid` as it
-  progresses, is yours. A `validator` input adds a rule of your own on top, run only once the
-  built-in restrictions pass; the reason it returns lands on that file's `error` and joins the summary,
-  with the files it rejected named after it. `keepRejectedFiles` decides what happens to a file that
+  progresses, is yours. A `validator` input adds a rule of your own on top, run on every selected file;
+  the reason it returns lands on that file's `error` after the built-in ones and joins the summary,
+  with the files it rejected named after it. Describe the rule in `hint`, which follows the allowed
+  types and size in the one hint. `keepRejectedFiles` decides what happens to a file that
   fails `accept`, `maxSize` or `validator`: off (the default) discards it and summarises every rejection in one message under the
   dropzone, which paints the border red. On keeps it in the list with its reason in that file's
   `error`, leaving the border neutral — so the form value holds it with `isValid: false` and you must
   filter on `isValid` before uploading. `error` is writable, so a failure the upload
   came back with lands on the file it belongs to.
+- **`tedi-file-dropzone` shows at most one hint and one validation message, error first.** Pass your
+  own text through `hint`, `error` and `success`, not projected `tedi-feedback-text`. `error` joins
+  the dropzone's own rejection summary in one error, and `success` takes the error's place while
+  there is none.
 - **Selecting a file that is already listed is skipped**, matched on name, size and mtime — so two
   different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to
   replace the built-in `tedi-attachment` row when a file needs a progress bar, an icon or its own
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.html b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
index 873581e9d..e5e7b6a29 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.html
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
@@ -41,26 +41,24 @@
   (cancel)="handleDialogCancel()"
 />
 
-@if (rejectionError(); as error) {
+@if (errorText(); as error) {
   <tedi-feedback-text [id]="feedbackIds().error" [text]="error" type="error" />
-}
-
-@if (feedbackText(); as feedback) {
+} @else if (successText(); as success) {
   <tedi-feedback-text
-    [id]="feedbackIds().feedback"
-    [text]="feedback.text"
-    [type]="feedback.type ?? 'hint'"
-    [position]="feedback.position ?? 'left'"
+    [id]="feedbackIds().success"
+    [text]="success"
+    type="valid"
   />
 }
 
-@if (restrictionsHint(); as hint) {
+@if (hintText(); as hint) {
   <tedi-feedback-text [id]="feedbackIds().hint" [text]="hint" />
 }
 
 @if (files().length) {
   <ul
     class="tedi-file-dropzone__files"
+    role="list"
     [attr.aria-label]="selectedFilesLabel()"
   >
     @for (row of fileRows(); track row.file) {
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
index 25153768a..fa52a2b4a 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -276,7 +276,7 @@ describe("FileDropzoneComponent", () => {
       // Announced together: separate calls would overwrite each other and only
       // the last would ever be read.
       expect(await announced()).toBe(
-        "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+        "file-upload.duplicates-skipped:'report.pdf',1. file-upload.added:1",
       );
     });
 
@@ -293,8 +293,8 @@ describe("FileDropzoneComponent", () => {
       ]);
 
       expect(await announced()).toBe(
-        "file-upload.extension-rejected:'notes.txt'. " +
-          "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+        "file-upload.extension-rejected:'notes.txt',1. " +
+          "file-upload.duplicates-skipped:'report.pdf',1. file-upload.added:1",
       );
     });
 
@@ -316,7 +316,7 @@ describe("FileDropzoneComponent", () => {
         "report.pdf",
       ]);
       expect(await announced()).toBe(
-        "file-upload.duplicates-skipped:'report.pdf'",
+        "file-upload.duplicates-skipped:'report.pdf',1",
       );
     });
 
@@ -503,7 +503,7 @@ describe("FileDropzoneComponent", () => {
         ),
       ).toBeNull();
       expect(await announced()).toBe(
-        "file-upload.extension-rejected:'bad.txt'",
+        "file-upload.extension-rejected:'bad.txt',1",
       );
     });
 
@@ -582,15 +582,30 @@ describe("FileDropzoneComponent", () => {
       );
     });
 
-    it("leaves the validator unrun on a file the restrictions already reject", () => {
-      const validator = jest.fn(noSpaces);
+    it("runs the validator on a file the restrictions already reject", () => {
       fixture.componentRef.setInput("accept", ".pdf");
-      fixture.componentRef.setInput("validator", validator);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
+
+      expect(text("tedi-feedback-text")).toBe(
+        "file-upload.extension-rejected:'bad name.txt',1. " +
+          "Failinimes ei tohi olla tühikuid: 'bad name.txt'",
+      );
+    });
+
+    it("gives a kept file every reason it was rejected for", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("validator", noSpaces);
       fixture.detectChanges();
 
       selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
 
-      expect(validator).not.toHaveBeenCalled();
+      expect(component.files()[0].error).toBe(
+        "file-dropzone.file-rejected-extension. Failinimes ei tohi olla tühikuid.",
+      );
     });
 
     it("accepts a file its validator returns nothing for", () => {
@@ -617,7 +632,7 @@ describe("FileDropzoneComponent", () => {
       );
     });
 
-    it("names a file breaking both restrictions once in the summary", () => {
+    it("names a file breaking both restrictions under each reason", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("maxSize", 50);
       fixture.componentRef.setInput("keepRejectedFiles", false);
@@ -625,10 +640,10 @@ describe("FileDropzoneComponent", () => {
 
       selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
 
-      const summary = text("tedi-feedback-text");
-
-      expect(summary).toContain("'notes.txt'");
-      expect(summary.match(/'notes.txt'/g)?.length).toBe(1);
+      expect(text("tedi-feedback-text")).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. " +
+          "file-upload.size-rejected:'notes.txt',1",
+      );
     });
 
     it("lists a rejected file so the user can see and remove it", () => {
@@ -733,15 +748,87 @@ describe("FileDropzoneComponent", () => {
       );
     });
 
-    it("describes the input by every message below it", () => {
+    it("describes the zone by the error and then the hint", () => {
       fixture.componentRef.setInput("maxSize", 1024 ** 2);
-      fixture.componentRef.setInput("feedbackText", { text: "Custom hint" });
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
       fixture.detectChanges();
 
       const id = fileInput(fixture).id;
 
       expect(zoneOf(fixture).getAttribute("aria-describedby")).toBe(
-        `${id}-feedback ${id}-hint`,
+        `${id}-error ${id}-hint`,
+      );
+    });
+
+    it("appends the consumer's hint to the restrictions in one hint", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("hint", "Lisa allkirjastatud koopia.");
+      fixture.detectChanges();
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      expect(messages.length).toBe(1);
+      expect(messages[0].nativeElement.textContent.trim()).toBe(
+        "file-upload.accept .pdf. Lisa allkirjastatud koopia.",
+      );
+    });
+
+    it("keeps the consumer's hint when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.componentRef.setInput("hint", "Lisa allkirjastatud koopia.");
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toBe("Lisa allkirjastatud koopia.");
+    });
+
+    it("joins the consumer's error to its own rejection in one error", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const errors = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text.tedi-feedback-text--error"),
+      );
+      expect(errors.length).toBe(1);
+      expect(errors[0].nativeElement.textContent.trim()).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. Üleslaadimine ebaõnnestus",
+      );
+    });
+
+    it("shows success in the error's place and paints the zone valid", () => {
+      fixture.componentRef.setInput("success", "Fail on üles laaditud");
+      fixture.detectChanges();
+
+      const id = fileInput(fixture).id;
+
+      expect(text("tedi-feedback-text.tedi-feedback-text--valid")).toBe(
+        "Fail on üles laaditud",
+      );
+      expect(zoneOf(fixture).classList).toContain(
+        "tedi-file-dropzone__zone--valid",
+      );
+      expect(zoneOf(fixture).getAttribute("aria-describedby")).toBe(
+        `${id}-success`,
+      );
+    });
+
+    it("hides success while there is an error", () => {
+      fixture.componentRef.setInput("success", "Fail on üles laaditud");
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.query(
+          By.css("tedi-feedback-text.tedi-feedback-text--valid"),
+        ),
+      ).toBeNull();
+      expect(zoneOf(fixture).classList).not.toContain(
+        "tedi-file-dropzone__zone--valid",
       );
     });
 
@@ -756,11 +843,8 @@ describe("FileDropzoneComponent", () => {
       );
     });
 
-    it("marks the zone invalid from an error feedbackText", () => {
-      fixture.componentRef.setInput("feedbackText", {
-        text: "Sobimatu fail",
-        type: "error",
-      });
+    it("marks the zone invalid from the consumer's error", () => {
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
       fixture.detectChanges();
 
       expect(
@@ -845,6 +929,8 @@ describe("FileDropzoneComponent", () => {
       expect(list.getAttribute("aria-label")).toBe(
         "file-dropzone.selected-files",
       );
+      // Safari drops list semantics from a bullet-less list without it.
+      expect(list.getAttribute("role")).toBe("list");
       expect(list.querySelectorAll("tedi-attachment").length).toBe(1);
     });
 
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index 8956a7348..b2f0f2fff 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -46,14 +46,16 @@ import {
   FileDropzoneFileContext,
   FileDropzoneFileDirective,
 } from "./file-dropzone-file.directive";
-import {
-  FileDropzoneFeedback,
-  FileDropzoneFile,
-  FileDropzoneValidator,
-} from "./file-dropzone.types";
+import { FileDropzoneFile, FileDropzoneValidator } from "./file-dropzone.types";
 
 type FileRejectionReason = "extension" | "size";
 
+interface FileRejection {
+  name: string;
+  reasons: FileRejectionReason[];
+  message?: string;
+}
+
 let fileDropzoneIdCounter = 0;
 
 /**
@@ -166,15 +168,18 @@ export class FileDropzoneComponent
    */
   readonly maxSize = input<number>();
   /**
-   * A rule of your own for each selected file, run after `accept` and `maxSize`
-   * pass — a minimum size, a naming convention. Return the reason a file is
-   * rejected, or nothing to accept it. The reason lands on that file's `error`
-   * and joins the rejection summary, followed by the names it rejected.
+   * A rule of your own for each selected file, checked alongside `accept` and
+   * `maxSize` — a minimum size, a naming convention. Return the reason a file
+   * is rejected, or nothing to accept it. The reason lands on that file's
+   * `error` after the built-in ones, and joins the rejection summary followed
+   * by the names of the files it rejected. It runs on every selected file,
+   * including ones `accept` or `maxSize` rejected, so it may receive a file of
+   * the wrong type or size.
    *
-   * It is not summarised in the restrictions hint, so describe the rule in your
-   * own `feedbackText`. Applies to what is picked next, like `accept`. For
-   * checks needing a server round trip, set `isLoading` and then `isValid` on
-   * the file yourself instead.
+   * The automatic hint cannot describe it, so describe the rule in `hint`.
+   * Applies to what is picked next, like `accept`. For checks that need a
+   * server round trip, set `isLoading` and then `isValid` on the file yourself
+   * instead.
    */
   readonly validator = input<FileDropzoneValidator>();
   /**
@@ -192,9 +197,9 @@ export class FileDropzoneComponent
    */
   readonly keepRejectedFiles = input(false, { transform: booleanAttribute });
   /**
-   * Whether the allowed types and maximum size are summarised in a hint below
-   * the dropzone. Turn it off when the same information is shown elsewhere —
-   * rejection errors still render.
+   * Whether the allowed types and maximum size are summarised in the hint below
+   * the dropzone. Turn it off when the same information is shown elsewhere;
+   * `hint` and rejection errors still render.
    * @default true
    */
   readonly showRestrictions = input(true, { transform: booleanAttribute });
@@ -204,10 +209,23 @@ export class FileDropzoneComponent
    */
   readonly showFileSize = input(false, { transform: booleanAttribute });
   /**
-   * Feedback text below the dropzone. An `error` type also paints the dropzone
-   * border red.
+   * Guidance of your own, such as what a `validator` checks, shown after the
+   * allowed types and maximum size in the dropzone's hint.
+   */
+  readonly hint = input<string>();
+  /**
+   * An error of your own, such as one the server returned. Shown in the
+   * dropzone's error text after its own rejection message, above the hint, and
+   * paints the border red. It does not change a bound control's validity. For
+   * an error that belongs to one file, set that file's `error` instead.
+   */
+  readonly error = input<string>();
+  /**
+   * A success message, shown in the error's place above the hint and painting
+   * the border green. Shown only while the dropzone has no error: an error
+   * means the user still has something to fix.
    */
-  readonly feedbackText = input<FileDropzoneFeedback>();
+  readonly success = input<string>();
   /**
    * Disables the dropzone from a parent template. Combined with the
    * reactive-forms disabled state.
@@ -243,15 +261,11 @@ export class FileDropzoneComponent
   );
 
   protected readonly isInvalid = computed(
-    () =>
-      this.invalid() ||
-      !!this.rejectionError() ||
-      this.feedbackText()?.type === "error" ||
-      this.derived.invalid(),
+    () => this.invalid() || !!this.errorText() || this.derived.invalid(),
   );
 
   protected readonly isValid = computed(
-    () => !this.isInvalid() && this.feedbackText()?.type === "valid",
+    () => !this.isInvalid() && !!this.success(),
   );
 
   protected readonly resolvedId = computed(
@@ -313,26 +327,36 @@ export class FileDropzoneComponent
    * Rendered alongside — not instead of — a rejection error, so an error never
    * hides the restrictions the user has to satisfy.
    */
-  protected readonly restrictionsHint = computed(() => {
-    if (!this.showRestrictions()) return undefined;
-
-    const accept = this.accept();
-    const maxSize = this.maxSize();
+  protected readonly hintText = computed(() => {
+    const accept = this.showRestrictions() && this.accept();
+    const maxSize = this.showRestrictions() && this.maxSize();
     const parts = [
       accept &&
         `${this.translations.translate("file-upload.accept")} ${accept.replaceAll(",", ", ")}`,
       maxSize &&
         `${this.translations.translate("file-upload.max-size")} ${formatFileSize(maxSize)}`,
+      this.hint(),
     ].filter(Boolean);
 
     return parts.join(". ") || undefined;
   });
 
+  /** The dropzone shows at most one error, so both sources share one text. */
+  protected readonly errorText = computed(
+    () =>
+      [this.rejectionError(), this.error()].filter(Boolean).join(". ") ||
+      undefined,
+  );
+
+  protected readonly successText = computed(() =>
+    this.errorText() ? undefined : this.success(),
+  );
+
   protected readonly feedbackIds = computed(() => {
     const id = this.resolvedId();
     return {
       error: `${id}-error`,
-      feedback: `${id}-feedback`,
+      success: `${id}-success`,
       hint: `${id}-hint`,
     };
   });
@@ -352,9 +376,9 @@ export class FileDropzoneComponent
       const ids = this.feedbackIds();
       this.describedBy.set(
         [
-          this.rejectionError() ? ids.error : null,
-          this.feedbackText() ? ids.feedback : null,
-          this.restrictionsHint() ? ids.hint : null,
+          this.errorText() ? ids.error : null,
+          this.successText() ? ids.success : null,
+          this.hintText() ? ids.hint : null,
         ].filter((id): id is string => !!id),
       );
     });
@@ -513,10 +537,6 @@ export class FileDropzoneComponent
     if (!selected.length) return;
 
     const keepRejected = this.keepRejectedFiles();
-    const rejected: { reason: FileRejectionReason; file: File }[] = [];
-    // Keyed by message so files failing the same custom rule are named together,
-    // the way the built-in reasons are.
-    const customRejections = new Map<string, string[]>();
 
     // Picking the same file twice almost always means the user lost track of
     // what they had already added, so the repeat is skipped rather than listed
@@ -528,40 +548,33 @@ export class FileDropzoneComponent
     );
     const fresh = selected.filter((file) => !listed.has(fileIdentity(file)));
 
+    // Every rule a file breaks is reported, not just the first: fixing one
+    // reason only to be rejected for the next sends the user round twice.
+    const rejections: FileRejection[] = [];
     const candidates = fresh.map((file) => {
-      const reasons = this.reasonsFor(file);
-      // Only run the consumer's rule once the restrictions pass; a file that is
-      // already the wrong format need not be judged on anything else.
-      const custom = reasons.length
-        ? undefined
-        : (this.validator()?.(file) ?? undefined) || undefined;
-
-      if (reasons.length) {
-        rejected.push({ reason: reasons[0], file });
-      } else if (custom) {
-        customRejections.set(custom, [
-          ...(customRejections.get(custom) ?? []),
-          `'${file.name}'`,
-        ]);
-      }
+      const rejection: FileRejection = {
+        name: file.name,
+        reasons: this.reasonsFor(file),
+        message: this.validator()?.(file) || undefined,
+      };
+      const isValid = !rejection.reasons.length && !rejection.message;
 
-      const message =
-        custom ??
-        (reasons.length
-          ? reasons
-              .map((reason) =>
-                this.translations.translate(
-                  `file-dropzone.file-rejected-${reason}`,
-                ),
-              )
-              .join(". ")
-          : undefined);
+      if (!isValid) rejections.push(rejection);
+
+      const error = [
+        ...rejection.reasons.map((reason) =>
+          this.translations.translate(`file-dropzone.file-rejected-${reason}`),
+        ),
+        rejection.message,
+      ]
+        .filter(Boolean)
+        .join(". ");
 
       return Object.assign(file, {
         id: generateUUID(),
         isLoading: false,
-        isValid: !reasons.length && !custom,
-        error: keepRejected ? message : undefined,
+        isValid,
+        error: keepRejected && error ? error : undefined,
       }) as FileDropzoneFile;
     });
 
@@ -581,7 +594,7 @@ export class FileDropzoneComponent
     // announcing them one by one overwrites all but the last.
     const messages: string[] = [];
 
-    const rejection = this.rejectionMessage(rejected, customRejections);
+    const rejection = this.rejectionSummary(rejections);
 
     this.rejectionError.set(rejection && !keepRejected ? rejection : undefined);
     if (rejection) messages.push(rejection);
@@ -591,6 +604,7 @@ export class FileDropzoneComponent
         this.translations.translate(
           "file-upload.duplicates-skipped",
           duplicates.map((file) => `'${file.name}'`).join(", "),
+          String(duplicates.length),
         ),
       );
     }
@@ -686,35 +700,40 @@ export class FileDropzoneComponent
   }
 
   /**
-   * Groups the rejected files by reason into one message. Returns `undefined`
-   * when none of them is a file the dropzone itself rejected.
+   * One message for every rejection: built-in reasons first, grouped by
+   * reason, then each validator message followed by the files it refused.
    */
-  private rejectionMessage(
-    rejected: { reason: FileRejectionReason; file: File }[],
-    customRejections: Map<string, string[]>,
-  ): string | undefined {
+  private rejectionSummary(rejections: FileRejection[]): string | undefined {
+    const builtIn: Record<FileRejectionReason, string[]> = {
+      extension: [],
+      size: [],
+    };
+    const custom = new Map<string, string[]>();
+
+    for (const { name, reasons, message } of rejections) {
+      const quoted = `'${name}'`;
+      reasons.forEach((reason) => builtIn[reason].push(quoted));
+      if (message)
+        custom.set(message, [...(custom.get(message) ?? []), quoted]);
+    }
+
     return (
       [
-        ...(["extension", "size"] as const).map((reason) => {
-          const names = rejected
-            .filter((rejection) => rejection.reason === reason)
-            .map((rejection) => `'${rejection.file.name}'`);
-
-          return names.length
-            ? this.translations.translate(
-                `file-upload.${reason}-rejected`,
-                names.join(", "),
-              )
-            : null;
-        }),
+        ...Object.entries(builtIn)
+          .filter(([, names]) => names.length)
+          .map(([reason, names]) =>
+            this.translations.translate(
+              `file-upload.${reason}-rejected`,
+              names.join(", "),
+              String(names.length),
+            ),
+          ),
         ...Array.from(
-          customRejections,
+          custom,
           ([message, names]) =>
             `${message.replace(/[\s.]+$/, "")}: ${names.join(", ")}`,
         ),
-      ]
-        .filter(Boolean)
-        .join(". ") || undefined
+      ].join(". ") || undefined
     );
   }
 
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
index e03c0e5de..8332e1ba8 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -33,10 +33,7 @@ const STATES = [
   {
     id: "Error",
     label: "Error",
-    feedbackText: {
-      text: "Fail on liiga suur. Valige mõni teine fail või vähendage suurust.",
-      type: "error" as const,
-    },
+    error: "Fail on liiga suur. Valige mõni teine fail või vähendage suurust.",
   },
   { id: "DropOver", label: "Drop over", dropOver: true },
   { id: "Disabled", label: "Disabled", disabled: true },
@@ -73,8 +70,8 @@ class StoryDropOverDirective implements AfterViewInit {
 
 /**
  * Lets a story show the summary the dropzone writes for itself, by actually
- * dropping a file it will reject. A hardcoded `feedbackText` would be a second,
- * stale error line the moment the user selects anything.
+ * dropping a file it will reject. A hardcoded `error` would stay on screen
+ * after the user has fixed the selection.
  */
 @Directive({ selector: "[storyRejectedDrop]", standalone: true })
 class StoryRejectedDropDirective implements AfterViewInit {
@@ -170,8 +167,8 @@ export default {
     },
     validator: {
       description:
-        "A rule of your own for each selected file, run after `accept` and `maxSize` pass. Return the reason a file is rejected, or nothing to accept it. The reason lands on that file's `error` and joins the rejection summary." +
-        " It is not summarised in the restrictions hint, so describe the rule in your own `feedbackText`.",
+        "A rule of your own for each selected file, checked alongside `accept` and `maxSize`. Return the reason a file is rejected, or nothing to accept it. The reason lands on that file's `error` after the built-in ones and joins the rejection summary. It runs on every selected file, including ones `accept` or `maxSize` rejected." +
+        " The automatic hint cannot describe it, so describe the rule in `hint`.",
       control: false,
       table: {
         category: "inputs",
@@ -200,7 +197,7 @@ export default {
     },
     showRestrictions: {
       description:
-        "Whether the allowed types and maximum size are summarised in a hint below the dropzone. Rejection errors render either way.",
+        "Whether the allowed types and maximum size are summarised in the hint below the dropzone. `hint` and rejection errors render either way.",
       control: "boolean",
       table: {
         category: "inputs",
@@ -217,14 +214,23 @@ export default {
         defaultValue: { summary: "false" },
       },
     },
-    feedbackText: {
+    hint: {
       description:
-        "Feedback text below the dropzone. An `error` type also paints the border red.",
-      control: "object",
-      table: {
-        category: "inputs",
-        type: { summary: "ComponentInputs<FeedbackTextComponent>" },
-      },
+        "Guidance of your own, such as what a `validator` checks, shown after the allowed types and maximum size in the dropzone's hint.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    error: {
+      description:
+        "An error of your own, such as one the server returned. Shown after the dropzone's own rejection message in one error text, above the hint, and paints the border red. It does not change a bound control's validity.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    success: {
+      description:
+        "A success message, shown in the error's place above the hint and painting the border green. Shown only while the dropzone has no error.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
     },
     disabled: {
       description:
@@ -277,14 +283,15 @@ export const Default: Story = {
 };
 
 /**
- * `accept` and `maxSize` are summarised in a hint below the dropzone. Set
- * `showRestrictions` to `false` when the same information is already shown
- * elsewhere, or pass your own `feedbackText`.
+ * `accept` and `maxSize` are summarised in a hint below the dropzone, and
+ * `hint` adds guidance of your own after them. Set `showRestrictions` to
+ * `false` when the same information is already shown elsewhere.
  */
 export const WithHint: Story = {
   args: {
     accept: ".jpg,.png,.pdf",
     maxSize: 1024 ** 2,
+    hint: "Lisa allkirjastatud avalduse koopia.",
   },
 };
 
@@ -365,8 +372,8 @@ export const KeepingRejectedFiles: Story = {
 };
 
 /**
- * The restrictions hint can't describe the rule, so add your own feedback text.
- * Pick a file with a space in its name to try it.
+ * Describe the validator's rule in `hint`; the dropzone shows it after the
+ * allowed types. Pick a file with a space in its name to try it.
  */
 export const WithValidator: Story = {
   render: () => ({
@@ -374,7 +381,6 @@ export const WithValidator: Story = {
       files: [],
       noSpaces: (file: File) =>
         file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid" : null,
-      feedbackText: { text: "Failinimes ei tohi olla tühikuid." },
     },
     template: `
       <div style="max-width: 420px">
@@ -383,7 +389,7 @@ export const WithValidator: Story = {
           keepRejectedFiles
           accept=".pdf,.txt"
           [validator]="noSpaces"
-          [feedbackText]="feedbackText"
+          hint="Failinimes ei tohi olla tühikuid."
           [files]="files"
         />
       </div>
@@ -461,7 +467,7 @@ export const States: Story = {
                   [inputId]="state.id + '-input'"
                   [maxSize]="30 * 1024 ** 2"
                   [disabled]="!!state.disabled"
-                  [feedbackText]="state.feedbackText"
+                  [error]="state.error"
                   [storyDropOver]="!!state.dropOver"
                 />
               </div>
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
index 41a9e6a32..454cc301f 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -1,13 +1,3 @@
-import { ComponentInputs } from "../../../types/inputs.type";
-import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
-
-/**
- * `tedi-feedback-text` inputs, with everything but the message optional.
- */
-export type FileDropzoneFeedback = Partial<
-  ComponentInputs<FeedbackTextComponent>
-> & { text: string };
-
 /**
  * Validates a selected file. Returns the reason it is rejected, or nothing to
  * accept it.
@@ -30,7 +20,9 @@ export interface FileDropzoneFile extends Partial<File> {
    */
   isLoading?: boolean;
   /**
-   * Whether the file passed the `accept` and `maxSize` checks.
+   * Whether the file passed the `accept`, `maxSize` and `validator` checks. To
+   * change it, set a new array on `files` or the bound control — the dropzone
+   * does not see an in-place edit.
    */
   isValid?: boolean;
   /**
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index 96df72eb8..a14e33cd4 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -252,9 +252,18 @@ export const translationsMap = {
   "file-upload.size-rejected": {
     description: "Error label for rejected size",
     components: ["FileUpload"],
-    et: (files: string) => `Fail(id) ${files} on liiga suured`,
-    en: (files: string) => `File(s) ${files} are too large`,
-    ru: (files: string) => `Файл(ы) ${files} слишком велики`,
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on liiga suur`
+        : `Failid ${files} on liiga suured`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} is too large`
+        : `Files ${files} are too large`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} слишком велик`
+        : `Файлы ${files} слишком велики`,
   },
   "file-upload.size-rejected-extended": {
     description: "Error label for rejected size",
@@ -276,9 +285,18 @@ export const translationsMap = {
   "file-upload.extension-rejected": {
     description: "Error label for rejected extension",
     components: ["FileUpload"],
-    et: (files: string) => `Fail(id) ${files} on vale laiendiga`,
-    en: (files: string) => `File(s) ${files} have the wrong extension`,
-    ru: (files: string) => `Файл(ы) ${files} имеют неправильное расширение`,
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on vale laiendiga`
+        : `Failid ${files} on vale laiendiga`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} has the wrong extension`
+        : `Files ${files} have the wrong extension`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} имеет неправильное расширение`
+        : `Файлы ${files} имеют неправильное расширение`,
   },
   "file-upload.extension-rejected-extended": {
     description: "Error label for rejected extension",
@@ -322,22 +340,33 @@ export const translationsMap = {
   },
   "file-upload.added": {
     description: "Announced to assistive technology when files are added",
-    components: ["FileDropzone"],
-    et: (count: string) => `Lisatud ${count} fail(i)`,
-    en: (count: string) => `${count} file(s) added`,
+    components: ["FileDropzone", "FileUpload"],
+    et: (count: string) =>
+      count === "1" ? "Lisatud 1 fail" : `Lisatud ${count} faili`,
+    en: (count: string) =>
+      count === "1" ? "1 file added" : `${count} files added`,
     ru: (count: string) => `Добавлено файлов: ${count}`,
   },
   "file-upload.duplicates-skipped": {
     description:
       "Announced when files already in the list are skipped on a repeat selection",
-    components: ["FileDropzone"],
-    et: (files: string) => `Fail(id) ${files} on juba lisatud`,
-    en: (files: string) => `File(s) ${files} have already been added`,
-    ru: (files: string) => `Файл(ы) ${files} уже добавлены`,
+    components: ["FileDropzone", "FileUpload"],
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on juba lisatud`
+        : `Failid ${files} on juba lisatud`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} has already been added`
+        : `Files ${files} have already been added`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} уже добавлен`
+        : `Файлы ${files} уже добавлены`,
   },
   "file-upload.removed": {
     description: "Announced to assistive technology when a file is removed",
-    components: ["FileDropzone"],
+    components: ["FileDropzone", "FileUpload"],
     et: (file: string) => `Fail ${file} eemaldatud`,
     en: (file: string) => `File ${file} removed`,
     ru: (file: string) => `Файл ${file} удален`,
@@ -353,7 +382,7 @@ export const translationsMap = {
     description:
       "Accessible name of the error icon on an attachment marked invalid without a message of its own",
     components: ["Attachment"],
-    et: "Vigane fail",
+    et: "Sobimatu fail",
     en: "Invalid file",
     ru: "Недопустимый файл",
   },

From e7edb2fa317bbd6ea6c56b6d2bdf74e769614636 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 13 Oct 2026 18:51:56 +0300
Subject: [PATCH 8/8] fix(file-dropzone): add CR fixes #588

---
 .../file-dropzone.component.spec.ts           | 34 +++----------------
 .../file-dropzone/file-dropzone.component.ts  |  7 ++--
 .../form/file-dropzone/file-dropzone.types.ts |  5 +++
 3 files changed, 12 insertions(+), 34 deletions(-)

diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
index fa52a2b4a..afd008fe1 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -23,14 +23,10 @@ const breakpointMock = {
   isBelowBreakpoint: () => signal(false).asReadonly(),
 };
 
-// `lastModified` is pinned because it defaults to `Date.now()`, which would make
-// two fabricated files differ by milliseconds — a real file picked twice carries
-// the same mtime, which is what the duplicate check relies on.
 const announcer = { announce: jest.fn(), clear: jest.fn(), destroy: jest.fn() };
 
 beforeEach(() => announcer.announce.mockClear());
 
-/** Last message handed to the root-level announcer. */
 /** Waits past the add-path delay, then reads the last announced message. */
 const announced = async (): Promise<string> => {
   // Mirrors ADD_ANNOUNCE_DELAY in the component, which is deliberately private.
@@ -47,6 +43,9 @@ const zoneOf = (fixture: ComponentFixture<unknown>): HTMLElement =>
   fixture.debugElement.query(By.css('[role="button"].tedi-file-dropzone__zone'))
     .nativeElement as HTMLElement;
 
+// `lastModified` is pinned because it defaults to `Date.now()`, which would make
+// two fabricated files differ by milliseconds — a real file picked twice carries
+// the same mtime, which is what the duplicate check relies on.
 const makeFile = (
   name: string,
   size = 100,
@@ -945,7 +944,7 @@ describe("FileDropzoneComponent", () => {
 
     it("emits the removed file, and only for a real removal", () => {
       const removed: string[] = [];
-      component.fileRemove.subscribe((file) => removed.push(file.name ?? ""));
+      component.fileRemove.subscribe((file) => removed.push(file.name));
 
       selectFiles(fixture, [makeFile("second.pdf")]);
       expect(removed).toEqual([]);
@@ -1141,31 +1140,6 @@ describe("FileDropzoneComponent", () => {
       expect(dropEvent.defaultPrevented).toBe(true);
     });
 
-    it("renders a file that has no name", () => {
-      fixture.componentRef.setInput("files", [{ id: "1" }]);
-      fixture.detectChanges();
-
-      expect(text(".tedi-attachment__title")).toBe("");
-      expect(
-        fixture.debugElement
-          .query(By.css(".tedi-attachment__actions button"))
-          .nativeElement.getAttribute("aria-label"),
-      ).toBe("remove ");
-    });
-
-    it("announces a removal for a file that has no name", async () => {
-      fixture.componentRef.setInput("files", [{ id: "1" }]);
-      fixture.detectChanges();
-
-      (
-        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
-          .nativeElement as HTMLButtonElement
-      ).click();
-      fixture.detectChanges();
-
-      expect(await announced()).toBe("file-upload.removed:");
-    });
-
     it("matches an extensionless file on its MIME type", () => {
       fixture.componentRef.setInput("accept", "text/plain");
       fixture.detectChanges();
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
index b2f0f2fff..bdee503f7 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -293,12 +293,11 @@ export class FileDropzoneComponent
     const removeLabel = this.translations.translate("remove");
 
     return this.files().map((file) => {
-      const name = file.name ?? "";
-      const label = `${removeLabel} ${name}`;
+      const label = `${removeLabel} ${file.name}`;
 
       return {
         file,
-        name,
+        name: file.name,
         removeLabel: label,
         size:
           showSize && typeof file.size === "number"
@@ -497,7 +496,7 @@ export class FileDropzoneComponent
     // announce the two in the wrong order.
     clearTimeout(this.addAnnounceTimeout);
     this.announce(
-      this.translations.translate("file-upload.removed", file.name ?? ""),
+      this.translations.translate("file-upload.removed", file.name),
     );
     this.restoreFocus(removedIndex);
   }
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
index 454cc301f..d39d18875 100644
--- a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -9,6 +9,11 @@ export type FileDropzoneValidator = (file: File) => string | null | undefined;
  * extra fields; a preloaded entry only needs a `name`.
  */
 export interface FileDropzoneFile extends Partial<File> {
+  /**
+   * File name shown in the list and used in the remove button's label and the
+   * announcements, so the user can tell the files apart.
+   */
+  name: string;
   /**
    * Stable identifier, used to track the file across re-renders. Generated for
    * files the user selects.