@isi-ui7/bos7-shared 0.3.11 → 0.4.0

package/dist/crud-types.d.ts

@@ -127,6 +127,11 @@ export type CrudListSchema = {
      * "(all)" removes the param. Mirrors `showInactiveToggle`'s additionalParams
      * wiring but for an arbitrary enum column (e.g. `vendor_type`). Additive +
      * backward-compatible: omit it and the toolbar renders exactly as before.
+     *
+     * @deprecated Use `filterFields` (a single `{ type: "select", ... }` entry
+     * covers this exact case). Kept working, unchanged, so existing callers
+     * never have to move — the two coexist because they write to different
+     * query params and share the same additionalParams merge.
      */
     filterSelect?: {
         /** Query param name the backend reads (e.g. "vendor_type"). */
@@ -140,6 +145,51 @@ export type CrudListSchema = {
         /** Label for the "no filter" option. Default "Semua". */
         allLabel?: string;
     };
+    /**
+     * Granular toolbar filters: N independent fields, each contributing one
+     * query param via the SAME additionalParams merge `filterSelect` and
+     * `showInactiveToggle` already use — `@isi-ui7/data-table` is untouched.
+     * Additive + backward-compatible: omit it and the toolbar renders exactly
+     * as before. Coexists with `filterSelect`/`showInactiveToggle` as long as
+     * `param` names don't collide (caller's responsibility, same as today).
+     *
+     * K-6 (user, 2026-08-26): prototype daftar nasabah wants filtering finer
+     * than one search bar + one dropdown. `filterSelect` proved the mechanism
+     * for exactly one enum column; this generalizes it to N fields of mixed
+     * type instead of duplicating that mechanism per field. The union is
+     * closed but extensible — a new variant (e.g. `dateRange`) is additive to
+     * this type, not a breaking change to it.
+     *
+     * ⚠️ This is FRONTEND capacity only. Each `param` still needs the target
+     * service's own query endpoint to read it and filter server-side — adding
+     * a field here does nothing until the backend honors that param.
+     */
+    filterFields?: CrudFilterFieldDef[];
+};
+/**
+ * One granular toolbar filter field (see `CrudListSchema.filterFields`).
+ * Closed union so a new widget type is additive here, not a breaking change
+ * to `CrudListSchema` itself.
+ */
+export type CrudFilterFieldDef = {
+    type: "select";
+    /** Query param name the backend reads. */
+    param: string;
+    /** Toolbar label for the field. */
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Label for the "no filter" option. Default "Semua". */
+    allLabel?: string;
+} | {
+    type: "text";
+    /** Query param name the backend reads. */
+    param: string;
+    /** Toolbar label for the field. */
+    label: string;
+    placeholder?: string;
 };
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {
     /** Omit to use i18n default ("Konfirmasi Hapus"). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.8",
+    "@isi-ui7/corporate-themes": ">=0.2.9",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.3",
@@ -106,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.8",
+    "@isi-ui7/corporate-themes": "0.2.9",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.2",
+    "@isi-ui7/ui-shell": "0.2.8",
     "@isi-ui7/i18n": "0.2.3",
-    "@isi-ui7/realtime": "0.2.3",
-    "@isi-ui7/ui-shell": "0.2.8"
+    "@isi-ui7/realtime": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -127,8 +127,8 @@
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
     "@isi-ui7/data-table": "0.2.5",
-    "@isi-ui7/lookup-input": "0.2.4",
-    "@isi-ui7/editable-table": "0.2.3"
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-components.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { Add } from "@carbon/icons-react";
 import {
   Button,
@@ -13,12 +13,13 @@ import {
   Select,
   SelectItem,
   TextArea,
+  TextInput,
   ToastNotification,
   Toggle,
 } from "@carbon/react";
 import { ServerDataTable } from "@isi-ui7/data-table";
 import type { I_DataTblColumn } from "@isi-ui7/data-table";
-import type { CrudCustomActionSchema, CrudDeleteSchema, CrudListSchema } from "./crud-types";
+import type { CrudCustomActionSchema, CrudDeleteSchema, CrudFilterFieldDef, CrudListSchema } from "./crud-types";
 import type { CrudForm, FormMode, FormPageDef } from "./form-types";
 import type { Ui7FormDensity } from "./style-contract";
 import { SchemaFormRenderer } from "./form-renderer";
@@ -79,11 +80,57 @@ export function SharedCrudListPage({
   const [filterValue, setFilterValue] = useState("");
   const hasInactiveToggle = Boolean(schema.showInactiveToggle);
   const hasFilterSelect = Boolean(schema.filterSelect);
+
+  // Granular toolbar filters (opt-in via schema.filterFields) — N fields,
+  // each contributing one param to the SAME additionalParams merge as
+  // filterSelect/showInactiveToggle above.
+  //
+  // Two states per field, not one: `filterFieldValues` is what the widget
+  // shows (updates on every keystroke, so typing feels immediate);
+  // `filterFieldCommitted` is what actually reaches additionalParams (and
+  // therefore triggers a refetch). For `type: "select"` they're set
+  // together — a discrete pick, same as filterSelect's existing immediate
+  // commit. For `type: "text"` the commit is DEBOUNCED: this mirrors the
+  // codebase's own precedent for free-text-triggers-a-fetch
+  // (OffsetDataTable's search box debounces the same way) — committing
+  // every keystroke straight to a network request is the one inconsistency
+  // an un-debounced text field would introduce that filterSelect's select
+  // never had.
+  const FILTER_TEXT_DEBOUNCE_MS = 400;
+  const [filterFieldValues, setFilterFieldValues] = useState<Record<string, string>>({});
+  const [filterFieldCommitted, setFilterFieldCommitted] = useState<Record<string, string>>({});
+  const filterFieldTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  useEffect(() => {
+    const timers = filterFieldTimers.current;
+    return () => {
+      for (const t of Object.values(timers)) clearTimeout(t);
+    };
+  }, []);
+  const setFilterFieldValue = useCallback((field: CrudFilterFieldDef, value: string) => {
+    setFilterFieldValues((prev) => ({ ...prev, [field.param]: value }));
+    if (field.type === "text") {
+      if (filterFieldTimers.current[field.param]) {
+        clearTimeout(filterFieldTimers.current[field.param]);
+      }
+      filterFieldTimers.current[field.param] = setTimeout(() => {
+        setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
+      }, FILTER_TEXT_DEBOUNCE_MS);
+    } else {
+      setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
+    }
+  }, []);
+  const hasFilterFields = Boolean(schema.filterFields?.length);
+
   const additionalParams =
-    hasInactiveToggle || hasFilterSelect
+    hasInactiveToggle || hasFilterSelect || hasFilterFields
       ? {
           ...(hasInactiveToggle ? { [inactiveParam]: showInactive ? "true" : "" } : {}),
           ...(hasFilterSelect ? { [schema.filterSelect!.param]: filterValue } : {}),
+          ...(hasFilterFields
+            ? Object.fromEntries(
+                schema.filterFields!.map((f) => [f.param, filterFieldCommitted[f.param] ?? ""]),
+              )
+            : {}),
         }
       : undefined;
   return (
@@ -133,6 +180,37 @@ export function SharedCrudListPage({
                   </Select>
                 </div>
               ) : null}
+              {schema.filterFields?.map((f) =>
+                f.type === "select" ? (
+                  <div key={f.param} style={{ minWidth: "10rem" }}>
+                    <Select
+                      id={`filter-field-${schema.apiPath}-${f.param}`}
+                      labelText={f.label}
+                      hideLabel
+                      size="sm"
+                      value={filterFieldValues[f.param] ?? ""}
+                      onChange={(e) => setFilterFieldValue(f, e.target.value)}
+                    >
+                      <SelectItem value="" text={f.allLabel ?? "Semua"} />
+                      {f.options.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                      ))}
+                    </Select>
+                  </div>
+                ) : (
+                  <div key={f.param} style={{ minWidth: "10rem" }}>
+                    <TextInput
+                      id={`filter-field-${schema.apiPath}-${f.param}`}
+                      labelText={f.label}
+                      hideLabel
+                      size="sm"
+                      placeholder={f.placeholder ?? f.label}
+                      value={filterFieldValues[f.param] ?? ""}
+                      onChange={(e) => setFilterFieldValue(f, e.target.value)}
+                    />
+                  </div>
+                ),
+              )}
               {toolbarExtra}
               {(schema.showAddButton ?? true) ? (
                 <Button renderIcon={Add} size="sm" onClick={onAdd}>

package/src/crud-filter-fields.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+// K-6 (user, 2026-08-26): CrudListSchema.filterFields — N granular toolbar
+// filters, generalizing filterSelect (1 enum dropdown) to mixed-type fields.
+// Additive + backward-compatible: omit it, toolbar renders exactly as before.
+//
+// ServerDataTable menarik jaringan & Carbon DataTable penuh; yang diuji di
+// sini TOOLBAR-nya dan additionalParams yang dikirim ke ServerDataTable, jadi
+// tabelnya dimock — additionalParams diserialisasi ke satu node supaya test
+// bisa membacanya tanpa mock jaringan sungguhan.
+vi.mock("@isi-ui7/data-table", () => ({
+  ServerDataTable: ({
+    toolbarActions,
+    additionalParams,
+  }: {
+    toolbarActions?: React.ReactNode;
+    additionalParams?: Record<string, string>;
+  }) => (
+    <div>
+      <div data-testid="toolbar">{toolbarActions}</div>
+      <div data-testid="params">{JSON.stringify(additionalParams ?? {})}</div>
+    </div>
+  ),
+}));
+
+import { SharedCrudListPage } from "./crud-components";
+import type { CrudListSchema } from "./crud-types";
+
+const dasar: CrudListSchema = {
+  title: "Daftar",
+  apiPath: "/api/x",
+  columns: { a: { title: "A" } },
+  popupMenuItems: [],
+  addButtonLabel: "Tambah",
+};
+
+function paramsRendered(): Record<string, string> {
+  return JSON.parse(screen.getByTestId("params").textContent ?? "{}");
+}
+
+describe("CrudListSchema.filterFields", () => {
+  it("DEFAULT (omit) — toolbar params kosong, gerbang kompatibilitas", () => {
+    render(<SharedCrudListPage schema={dasar} onAdd={() => {}} onPopupClick={() => {}} />);
+    expect(paramsRendered()).toEqual({});
+  });
+
+  it("field type:select merender Select dan mengirim param SEGERA saat dipilih", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [
+            {
+              type: "select",
+              param: "identity_type",
+              label: "Jenis Identitas",
+              options: [{ value: "KTP", label: "KTP" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ identity_type: "" });
+
+    const select = screen.getByLabelText("Jenis Identitas") as HTMLSelectElement;
+    await user.selectOptions(select, "KTP");
+
+    expect(paramsRendered()).toEqual({ identity_type: "KTP" });
+  });
+
+  it("field type:text merender TextInput dan DEBOUNCE param (nol segera saat mengetik)", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [{ type: "text", param: "full_name", label: "Nama" }],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ full_name: "" });
+
+    const input = screen.getByLabelText("Nama") as HTMLInputElement;
+    await user.type(input, "Budi");
+
+    // 🔑 Klaim inti: mengetik TIDAK segera mengirim param -- kalau ini gagal,
+    // field teks refetch di SETIAP keystroke (inkonsisten dgn search bar
+    // bawaan, yang sudah didebounce di OffsetDataTable).
+    expect(paramsRendered()).toEqual({ full_name: "" });
+    expect(input.value).toBe("Budi"); // tapi WIDGET-nya tetap responsif
+
+    await waitFor(() => expect(paramsRendered()).toEqual({ full_name: "Budi" }), { timeout: 1000 });
+  });
+
+  it("filterSelect (lama) DAN filterFields (baru) coexist tanpa saling menimpa", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterSelect: { param: "status", label: "Status", options: [{ value: "ACTIVE", label: "Aktif" }] },
+          filterFields: [
+            {
+              type: "select",
+              param: "branch_code",
+              label: "Cabang",
+              options: [{ value: "001", label: "Cabang 001" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ status: "", branch_code: "" });
+
+    await user.selectOptions(screen.getByLabelText("Cabang"), "001");
+    expect(paramsRendered()).toEqual({ status: "", branch_code: "001" });
+  });
+
+  it("dua field granular independen — mengubah satu nol menyentuh yang lain", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [
+            {
+              type: "select",
+              param: "identity_type",
+              label: "Jenis Identitas",
+              options: [{ value: "KTP", label: "KTP" }],
+            },
+            {
+              type: "select",
+              param: "branch_code",
+              label: "Cabang",
+              options: [{ value: "001", label: "Cabang 001" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    await user.selectOptions(screen.getByLabelText("Jenis Identitas"), "KTP");
+    expect(paramsRendered()).toEqual({ identity_type: "KTP", branch_code: "" });
+  });
+});

package/src/crud-types.ts

@@ -108,6 +108,11 @@ export type CrudListSchema = {
    * "(all)" removes the param. Mirrors `showInactiveToggle`'s additionalParams
    * wiring but for an arbitrary enum column (e.g. `vendor_type`). Additive +
    * backward-compatible: omit it and the toolbar renders exactly as before.
+   *
+   * @deprecated Use `filterFields` (a single `{ type: "select", ... }` entry
+   * covers this exact case). Kept working, unchanged, so existing callers
+   * never have to move — the two coexist because they write to different
+   * query params and share the same additionalParams merge.
    */
   filterSelect?: {
     /** Query param name the backend reads (e.g. "vendor_type"). */
@@ -118,8 +123,53 @@ export type CrudListSchema = {
     /** Label for the "no filter" option. Default "Semua". */
     allLabel?: string;
   };
+  /**
+   * Granular toolbar filters: N independent fields, each contributing one
+   * query param via the SAME additionalParams merge `filterSelect` and
+   * `showInactiveToggle` already use — `@isi-ui7/data-table` is untouched.
+   * Additive + backward-compatible: omit it and the toolbar renders exactly
+   * as before. Coexists with `filterSelect`/`showInactiveToggle` as long as
+   * `param` names don't collide (caller's responsibility, same as today).
+   *
+   * K-6 (user, 2026-08-26): prototype daftar nasabah wants filtering finer
+   * than one search bar + one dropdown. `filterSelect` proved the mechanism
+   * for exactly one enum column; this generalizes it to N fields of mixed
+   * type instead of duplicating that mechanism per field. The union is
+   * closed but extensible — a new variant (e.g. `dateRange`) is additive to
+   * this type, not a breaking change to it.
+   *
+   * ⚠️ This is FRONTEND capacity only. Each `param` still needs the target
+   * service's own query endpoint to read it and filter server-side — adding
+   * a field here does nothing until the backend honors that param.
+   */
+  filterFields?: CrudFilterFieldDef[];
 };
 
+/**
+ * One granular toolbar filter field (see `CrudListSchema.filterFields`).
+ * Closed union so a new widget type is additive here, not a breaking change
+ * to `CrudListSchema` itself.
+ */
+export type CrudFilterFieldDef =
+  | {
+      type: "select";
+      /** Query param name the backend reads. */
+      param: string;
+      /** Toolbar label for the field. */
+      label: string;
+      options: Array<{ value: string; label: string }>;
+      /** Label for the "no filter" option. Default "Semua". */
+      allLabel?: string;
+    }
+  | {
+      type: "text";
+      /** Query param name the backend reads. */
+      param: string;
+      /** Toolbar label for the field. */
+      label: string;
+      placeholder?: string;
+    };
+
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {
   /** Omit to use i18n default ("Konfirmasi Hapus"). */
   title?: string;

package/src/form-renderer-aria-required.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// `field.validation.required` was already read correctly into `effectiveRequired`
+// (form-renderer.tsx) — it just never reached the actual Carbon control, only the
+// visual asterisk (`aria-hidden="true"`, decorative by design). Screen-reader users
+// got zero signal despite the field genuinely being required. Fixed by forwarding
+// `aria-required` (NOT native `required` — see the comment on `mkLabel` for why) to
+// each of the 9 distinct render sites. One `it` per site, each with its own positive
+// AND negative assertion, so a fix that lands on 8/9 sites cannot pass silently under
+// one aggregate green checkmark.
+//
+// `detail-rows`/`detail-modal` (table-shaped fields) and `lookup` (a separate
+// `@isi-ui7/lookup-input` package) are OUT OF SCOPE — there is no single control to
+// attach `aria-required` to (detail-rows/-modal) or the control isn't ours to change
+// (lookup). 9 sites, not more.
+
+function ariaRequiredOf(container: HTMLElement, key: string): string | null {
+  const el = container.querySelector(`#${key}`);
+  expect(el, `#${key} should exist in the rendered DOM`).toBeTruthy();
+  return el!.getAttribute("aria-required");
+}
+
+function renderField(field: FormSection<D>["fields"][number]) {
+  const section: FormSection<D> = { title: "T", fields: [field] };
+  return render(
+    <SchemaFormRenderer<D> mode="create" value={{}} sections={[section]} onChange={() => {}} />,
+  );
+}
+
+describe("aria-required forwarded to the actual control (not just the visual asterisk)", () => {
+  it("text (default) — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "nama", label: "Nama", type: "text", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "nama")).toBe("true");
+    const opt = renderField({ key: "nama", label: "Nama", type: "text" });
+    expect(ariaRequiredOf(opt.container, "nama")).toBeNull();
+  });
+
+  it("textarea — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "catatan", label: "Catatan", type: "textarea", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "catatan")).toBe("true");
+    const opt = renderField({ key: "catatan", label: "Catatan", type: "textarea" });
+    expect(ariaRequiredOf(opt.container, "catatan")).toBeNull();
+  });
+
+  it("select — required forwards, optional omits the attribute", () => {
+    const field = { key: "status", label: "Status", type: "select" as const, options: [{ value: "A", label: "A" }] };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "status")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "status")).toBeNull();
+  });
+
+  it("date — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "tgl", label: "Tanggal", type: "date", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "tgl")).toBe("true");
+    const opt = renderField({ key: "tgl", label: "Tanggal", type: "date" });
+    expect(ariaRequiredOf(opt.container, "tgl")).toBeNull();
+  });
+
+  it("checkbox — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "setuju", label: "Setuju", type: "checkbox", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "setuju")).toBe("true");
+    const opt = renderField({ key: "setuju", label: "Setuju", type: "checkbox" });
+    expect(ariaRequiredOf(opt.container, "setuju")).toBeNull();
+  });
+
+  it("toggle — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "aktif", label: "Aktif", type: "toggle", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "aktif")).toBe("true");
+    const opt = renderField({ key: "aktif", label: "Aktif", type: "toggle" });
+    expect(ariaRequiredOf(opt.container, "aktif")).toBeNull();
+  });
+
+  it("number (NumericField, incl. currency/percent/integer) — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "jumlah", label: "Jumlah", type: "number", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "jumlah")).toBe("true");
+    const opt = renderField({ key: "jumlah", label: "Jumlah", type: "number" });
+    expect(ariaRequiredOf(opt.container, "jumlah")).toBeNull();
+  });
+
+  it("NPWP (text + numeric.kind='npwp') — required forwards, optional omits the attribute", () => {
+    const field = { key: "npwp", label: "NPWP", type: "text" as const, numeric: { kind: "npwp" as const } };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "npwp")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "npwp")).toBeNull();
+  });
+
+  it("Phone (text + numeric.kind='phone') — required forwards, optional omits the attribute", () => {
+    const field = { key: "telp", label: "Telepon", type: "text" as const, numeric: { kind: "phone" as const, minDigits: 8, maxDigits: 15 } };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "telp")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "telp")).toBeNull();
+  });
+});

package/src/form-renderer.tsx

@@ -64,7 +64,14 @@ function asString(value: unknown): string {
   return String(value);
 }
 
-/** Wraps a field label with an optional required asterisk for Carbon's labelText prop. */
+// Wraps a field label with an optional required asterisk for Carbon's `labelText` prop.
+// The asterisk is `aria-hidden` on purpose — it's decoration for sighted users.
+// The actual screen-reader signal is `aria-required`, forwarded separately onto
+// each control below. Forwarded as `aria-required`, NOT native `required`: native
+// `required` adds a second, browser-native validation system with its own
+// message/tooltip on top of `runFieldValidation`'s in-app enforcement of
+// `validation.required` — two error systems for one field. `aria-required` only
+// announces, doesn't enforce, which is exactly the gap that was missing.
 function mkLabel(label: ReactNode, required?: boolean) {
   return (
     <>
@@ -225,6 +232,7 @@ function NumericField({
   invalid,
   invalidText,
   placeholder,
+  required,
   onChange,
 }: {
   id: string;
@@ -246,6 +254,8 @@ function NumericField({
   invalid?: boolean;
   invalidText?: string;
   placeholder?: string;
+  /** Forwarded as `aria-required` on the underlying `TextInput` — see `mkLabel` for why not native `required`. */
+  required?: boolean;
   onChange: (v: number) => void;
 }) {
   const [raw, setRaw] = useState<string | null>(null);
@@ -378,6 +388,7 @@ function NumericField({
       invalid={invalid}
       invalidText={invalidText}
       placeholder={placeholder}
+      aria-required={required ? true : undefined}
     />
   );
 
@@ -849,6 +860,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           disabled={disabled}
                           invalid={Boolean(invalidText)}
                           invalidText={invalidText}
+                          aria-required={effectiveRequired ? true : undefined}
                         />
                       </DatePicker>
                       {field.helperText ? (
@@ -872,6 +884,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         disabled={disabled}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       >
                         {(field.options ?? []).map((opt) => (
                           <SelectItem key={String(opt.value)} value={opt.value} text={opt.label} />
@@ -944,6 +957,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         invalid={Boolean(effectiveInvalidText)}
                         invalidText={effectiveInvalidText}
                         placeholder={field.placeholder}
+                        required={effectiveRequired}
                         onChange={(v) => setValue(field.key, v as TData[keyof TData])}
                       />
                     </div>,
@@ -962,6 +976,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           setValue(field.key, Boolean(checked) as TData[keyof TData])
                         }
                         disabled={disabled}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -999,6 +1014,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                               )
                             }
                             disabled={disabled}
+                            aria-required={effectiveRequired ? true : undefined}
                           />
                         </div>
                       </FieldShell>
@@ -1023,6 +1039,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         maxLength={field.maxLength}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1049,6 +1066,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         readOnly={effectiveReadonly}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1076,6 +1094,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                         placeholder={field.placeholder}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1099,6 +1118,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                       invalid={Boolean(invalidText)}
                       invalidText={invalidText}
                       placeholder={field.placeholder}
+                      aria-required={effectiveRequired ? true : undefined}
                     />
                   </div>,
                 ];

package/src/vitest.setup.ts

@@ -20,3 +20,17 @@ if (typeof Element !== "undefined" && !Element.prototype.scrollIntoView) {
     /* no-op: jsdom nol punya viewport untuk digulir */
   };
 }
+
+// Sama alasannya, komponen beda: jsdom nol mengimplementasikan `ResizeObserver`.
+// Carbon `TextArea` memanggilnya (auto-resize) saat mount — tanpa tambalan ini,
+// SETIAP uji yang merender `TextArea` (langsung atau lewat `SchemaFormRenderer`)
+// melempar `ReferenceError` di layout-effect, di luar rantai promise uji — kelas
+// kegagalan yang sama: ringkasan `it()` bisa tetap hijau sementara exit code
+// menolak. No-op sengaja: yang diuji adalah apa yang terender, bukan resize.
+if (typeof globalThis.ResizeObserver === "undefined") {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+}