@isi-ui7/bos7-shared 0.3.11 → 0.4.1

package/src/form-renderer.tsx

@@ -33,7 +33,7 @@ import {
 import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
-import { toLocalISODate } from "./form-renderer-utils";
+import { toLocalISODate, fromLocalISODate } from "./form-renderer-utils";
 import { DetailModalField } from "./detail-modal-field";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
@@ -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}
     />
   );
 
@@ -836,7 +847,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         // DISIMPAN tetap ISO. Dua hal berbeda: yang satu untuk
                         // dibaca manusia, yang satu kontrak dgn backend.
                         dateFormat="d-m-Y"
-                        value={asString(rawValue)}
+                        // `value` HARUS `Date`, bukan string ISO — string ISO
+                        // di sini di-parse ULANG flatpickr seolah format
+                        // tampilan (d-m-Y), menghasilkan tanggal lain sama
+                        // sekali pada setiap re-render (laporan DG-00,
+                        // agent7 2026-08-31, kena SEMUA field tanggal).
+                        value={fromLocalISODate(asString(rawValue))}
                         onChange={([date]) =>
                           setValue(field.key, toLocalISODate(date) as TData[keyof TData])
                         }
@@ -849,6 +865,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 +889,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 +962,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 +981,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 +1019,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                               )
                             }
                             disabled={disabled}
+                            aria-required={effectiveRequired ? true : undefined}
                           />
                         </div>
                       </FieldShell>
@@ -1023,6 +1044,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 +1071,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         readOnly={effectiveReadonly}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1076,6 +1099,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 +1123,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;
+}