@object-ui/fields 17.3.0 → 17.6.0

package/src/__tests__/widget-aria-invalid-e2e.test.tsx

@@ -1,265 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * End-to-end: a REAL widget, inside the REAL form renderer, announces an
- * invalid field to assistive tech (objectui#3222).
- *
- * The two halves of this contract have unit tests of their own — the widgets
- * mark themselves invalid when handed an `error`
- * (`validation-feedback.test.tsx`), and the form renderer produces one
- * (`form-error-delivery.test.tsx` in `@object-ui/components`). Neither alone
- * would have caught the actual defect, because the defect was precisely that
- * the two halves never met: the widgets read `errorMessage`, the spec's
- * published contract said `error`, and NOTHING in `packages/` or `apps/`
- * produced either. Seven widgets computed `aria-invalid={!!errorMessage}` from
- * a value that was `undefined` forever, so `aria-invalid` had never once been
- * set on a failing field.
- *
- * So this file joins them: real react-hook-form validation, real widget, one
- * assertion per widget that the control is `aria-invalid="true"` after the
- * failure and `"false"` before it. `aria-invalid="false"` up front is the load
- * bearing half of each pair — `<FormControl>` is a Radix `Slot` that hands its
- * child a correct `aria-invalid`, and the widget's own attribute is written
- * AFTER the props spread, so it wins. A widget computing it from a prop nobody
- * passes does not merely miss the signal, it OVERWRITES the correct one with
- * `false`.
- *
- * The widgets are registered raw rather than through `registerAllFields()`,
- * which wraps every loader in `React.lazy`: an unbounded module load inside a
- * bounded `findBy`/`waitFor` window is the repo's known flake generator
- * (AGENTS.md 测试纪律, objectui#3010). Same component, no Suspense boundary.
- */
-
-import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ComponentRegistry } from '@object-ui/core';
-// Module scope: pulls in the form renderer's registration side effect.
-import '@object-ui/components';
-
-import { EmailField } from '../widgets/EmailField';
-import { PhoneField } from '../widgets/PhoneField';
-import { UrlField } from '../widgets/UrlField';
-import { TextAreaField } from '../widgets/TextAreaField';
-import { CurrencyField } from '../widgets/CurrencyField';
-import { PercentField } from '../widgets/PercentField';
-import { RichTextField } from '../widgets/RichTextField';
-import { TextField } from '../widgets/TextField';
-import { SelectField } from '../widgets/SelectField';
-
-/**
- * The widgets that read the validation slot, by their form-path key: the seven
- * from objectui#3222, plus `select` (objectui#3306) — the widget whose control
- * is a Radix trigger rather than a native input, where every aria-* used to be
- * swallowed by the non-DOM `Select.Root`.
- */
-const WIDGETS = [
-  ['email', EmailField],
-  ['phone', PhoneField],
-  ['url', UrlField],
-  ['textarea', TextAreaField],
-  ['currency', CurrencyField],
-  ['percent', PercentField],
-  ['markdown', RichTextField],
-  ['select', SelectField],
-] as const;
-
-beforeAll(() => {
-  for (const [type, Widget] of WIDGETS) {
-    ComponentRegistry.register(type, Widget as any, { namespace: 'field', skipFallback: true });
-  }
-}, 30000);
-
-beforeEach(() => {
-  if (!(Element.prototype as any).scrollIntoView) {
-    (Element.prototype as any).scrollIntoView = () => {};
-  }
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-function renderForm(field: any, defaultValue: unknown) {
-  const Form = ComponentRegistry.get('form')!;
-  return render(
-    <Form
-      schema={{
-        type: 'form',
-        mode: 'create',
-        showSubmit: true,
-        showCancel: false,
-        submitLabel: 'Create',
-        defaultValues: { [field.name]: defaultValue },
-        fields: [field],
-        onSubmit: () => {},
-      }}
-    />,
-  );
-}
-
-/**
- * The control the widget rendered, located through the form row rather than by
- * role — the seven widgets render `input[type=email|tel|url|number]` and
- * `textarea` between them, and the point of the assertion is the ATTRIBUTE,
- * not which element type carries it.
- */
-function controlOf(name: string): Element {
-  const control = document.querySelector(
-    `[data-field="${name}"] input, [data-field="${name}"] textarea`,
-  );
-  if (!control) throw new Error(`no control rendered for field "${name}"`);
-  return control;
-}
-
-const submit = () => fireEvent.click(screen.getByRole('button', { name: /create/i }));
-
-describe('field widgets announce an invalid field to AT (objectui#3222)', () => {
-  // `field:textarea` because the bare `textarea` key is a BUILTIN_FIELD_TYPE in
-  // the form renderer and never reaches the registry — it is the prefixed id
-  // (`mapFieldTypeToFormType`) that resolves to this package's widget.
-  it.each([
-    ['email', 'email', ''],
-    ['phone', 'phone', ''],
-    ['url', 'url', ''],
-    ['field:textarea', 'notes', ''],
-    ['currency', 'amount', null],
-    ['percent', 'ratio', null],
-    ['markdown', 'body', ''],
-  ] as const)(
-    'a required %s field is aria-invalid only AFTER validation fails',
-    async (type, name, emptyValue) => {
-      renderForm({ name, label: name, type, required: true }, emptyValue);
-
-      // Before the submit there is no error, and the widget must say so —
-      // this is the half that a Slot-provided `aria-invalid` cannot fake.
-      expect(controlOf(name)).toHaveAttribute('aria-invalid', 'false');
-
-      submit();
-
-      await waitFor(() => {
-        expect(controlOf(name)).toHaveAttribute('aria-invalid', 'true');
-      });
-    },
-  );
-
-  it('the message itself is rendered once, by the form — not by the widget', async () => {
-    // Responsibility split (the ruling's scope item 3): the widget consumes
-    // `error` for `aria-invalid` ONLY. `<FormMessage/>` owns the text; a widget
-    // that printed it too would show the user the same sentence twice.
-    renderForm({ name: 'email', label: 'Email', type: 'email', required: true }, '');
-
-    submit();
-
-    await waitFor(() => expect(screen.getAllByText('Email is required')).toHaveLength(1));
-    // And the message is NOT inside the control the widget rendered.
-    expect(controlOf('email')).not.toHaveTextContent('Email is required');
-  });
-
-  it('a widget that does NOT read `error` is still marked invalid, by the Slot', async () => {
-    // The counterpart that makes the diagnosis precise: `TextField` never
-    // computed its own `aria-invalid`, so `<FormControl>`'s Slot value reached
-    // its input untouched and it announced invalid fields correctly all along.
-    // Only the seven widgets that DID compute one were broken — they wrote
-    // theirs after the props spread, so `!!undefined` won.
-    //
-    // Pinned because the obvious "cleanup" here is to stop forwarding `error`
-    // to widgets that do not declare a use for it. That cannot be known (a
-    // third-party widget is exactly the case the contract exists for), and
-    // withholding it would recreate declared-≠-delivered one widget at a time.
-    ComponentRegistry.register('plaintext', TextField as any, { namespace: 'field', skipFallback: true });
-    renderForm({ name: 'title', label: 'Title', type: 'plaintext', required: true }, '');
-
-    submit();
-
-    await waitFor(() => expect(controlOf('title')).toHaveAttribute('aria-invalid', 'true'));
-  });
-
-  it('clears the invalid state when the field becomes valid again', async () => {
-    renderForm({ name: 'email', label: 'Email', type: 'email', required: true }, '');
-
-    submit();
-    await waitFor(() => expect(controlOf('email')).toHaveAttribute('aria-invalid', 'true'));
-
-    fireEvent.change(controlOf('email'), { target: { value: 'a@example.com' } });
-
-    await waitFor(() => expect(controlOf('email')).toHaveAttribute('aria-invalid', 'false'));
-  });
-});
-
-describe('field:select announces validation state on its TRIGGER (objectui#3306)', () => {
-  // Radix `Select.Root` renders no DOM element and silently drops every prop
-  // it does not recognise. The widget used to spread its DOM pass-through onto
-  // Root, so `aria-invalid` / `aria-describedby` / `aria-required` all
-  // vanished: a failed required select showed the red message while assistive
-  // tech was told nothing. The real control is the focusable
-  // `<button role="combobox">` the trigger renders — that is where every
-  // assertion below reads from, never a wrapper.
-  //
-  // `field:select` (not bare `select`) because `select` is a
-  // BUILTIN_FIELD_TYPE in the form renderer and never reaches the registry —
-  // same reason as `field:textarea` above.
-  const OPTIONS = [
-    { label: 'Alpha', value: 'alpha' },
-    { label: 'Beta', value: 'beta' },
-  ];
-
-  const selectField = {
-    name: 'choice',
-    label: 'Choice',
-    type: 'field:select',
-    required: true,
-    options: OPTIONS,
-  };
-
-  /** The trigger button, by role — fails loudly if it stops being a combobox. */
-  function trigger(): Element {
-    const el = document.querySelector('[data-field="choice"] [role="combobox"]');
-    if (!el) throw new Error('no select trigger rendered for field "choice"');
-    return el;
-  }
-
-  it('a required select is aria-invalid only AFTER validation fails, on the trigger', async () => {
-    renderForm(selectField, null);
-
-    // The explicit "false" half is load-bearing, same as the widgets above: a
-    // valid field SAYS it is valid rather than staying mute.
-    expect(trigger()).toHaveAttribute('aria-invalid', 'false');
-
-    submit();
-
-    // Prove the failure actually rendered before reading aria off it — an
-    // error variant that silently produces no error tests nothing.
-    await waitFor(() =>
-      expect(screen.getAllByText('Choice is required')).toHaveLength(1),
-    );
-    expect(trigger()).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('carries aria-required on the trigger — the state channel of objectui#3290', () => {
-    renderForm(selectField, null);
-
-    // Root would swallow it; the trigger is "the control" for a Radix select.
-    expect(trigger()).toHaveAttribute('aria-required', 'true');
-  });
-
-  it('aria-describedby on the trigger references the rendered error message', async () => {
-    renderForm(selectField, null);
-
-    submit();
-
-    const message = await screen.findByText('Choice is required');
-    // The association is only real if the id chain closes: the trigger must
-    // point at the exact element carrying the message text.
-    expect(message.id).not.toBe('');
-    const describedBy = trigger().getAttribute('aria-describedby') ?? '';
-    expect(describedBy.split(/\s+/)).toContain(message.id);
-  });
-});

package/src/__tests__/widget-aria-invalid-registry-e2e.test.tsx

@@ -1,338 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * GATE: every registered field widget must announce a validation failure to
- * assistive tech — `aria-invalid="true"` on some element inside its own form
- * row (objectui#3306, the paradigm of objectui#3291's leak sweep).
- *
- * ## Why a registry-wide sweep
- *
- * This failure class recurs per widget: objectui#3222 fixed seven widgets that
- * computed `aria-invalid` from a prop nobody produced; objectui#3290 fixed the
- * `aria-required` state channel; objectui#3306 fixed `select`, whose Radix
- * `Select.Root` — not being a DOM element — silently swallowed every `aria-*`
- * the form renderer delivered. Each was invisible until someone happened to
- * audit that one widget, because the per-widget tests only cover the widgets
- * someone already fixed. This sweep covers the REGISTRY, so the next widget
- * with a swallowed or missing `aria-invalid` fails here by name instead of
- * shipping.
- *
- * ## The ratchet
- *
- * Widgets listed in {@link NOT_YET_DELIVERED} are known not to deliver the
- * attribute today. They are asserted in the OPPOSITE direction — the sweep
- * proves they still do NOT deliver — so fixing one turns its entry red and
- * forces its removal from the ledger. The ledger can only shrink; a widget can
- * never silently regress INTO it, and a fix can never silently go unrecorded.
- * The remaining entries are tracked as follow-up work (see the ledger's doc
- * comment); this file is the source of truth for what is left.
- *
- * ## Discipline inherited from the #3291 sweep
- *
- * - **An error variant that produces no error tests nothing** — every case
- *   asserts the "is required" message rendered before it reads any aria. The
- *   `required` check is a PRESENCE check (`null` is missing, `false`/`0` are
- *   values — cloud#972), so `null` drives a real failure for every type.
- * - **Popovers are not opened** (happy-dom lacks the pointer-capture APIs
- *   Radix needs); the inline control every widget renders is the surface under
- *   test, which is exactly where `aria-invalid` must sit.
- * - Widgets are registered from STATIC imports wrapped in `withFieldCarrier`
- *   (the real registration seam, objectui#3233), never `registerAllFields()`,
- *   whose `React.lazy` loaders are this repo's known flake generator
- *   (AGENTS.md 测试纪律 / objectui#3010).
- */
-
-import type { ComponentType } from 'react';
-import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ComponentRegistry } from '@object-ui/core';
-// Module scope: pulls in the form renderer's registration side effect.
-import '@object-ui/components';
-
-import { withFieldCarrier } from '../withFieldCarrier';
-import { FORM_FIELD_TYPES } from '../index';
-
-import { TextField } from '../widgets/TextField';
-import { TextAreaField } from '../widgets/TextAreaField';
-import { NumberField } from '../widgets/NumberField';
-import { BooleanField } from '../widgets/BooleanField';
-import { SelectField } from '../widgets/SelectField';
-import { DateField } from '../widgets/DateField';
-import { DateTimeField } from '../widgets/DateTimeField';
-import { TimeField } from '../widgets/TimeField';
-import { EmailField } from '../widgets/EmailField';
-import { PhoneField } from '../widgets/PhoneField';
-import { UrlField } from '../widgets/UrlField';
-import { MultiSelectField } from '../widgets/MultiSelectField';
-import { RadioField } from '../widgets/RadioField';
-import { CheckboxesField } from '../widgets/CheckboxesField';
-import { TagsField } from '../widgets/TagsField';
-import { CurrencyField } from '../widgets/CurrencyField';
-import { PercentField } from '../widgets/PercentField';
-import { PasswordField } from '../widgets/PasswordField';
-import { RichTextField } from '../widgets/RichTextField';
-import { LookupField } from '../widgets/LookupField';
-import { FileField } from '../widgets/FileField';
-import { ImageField } from '../widgets/ImageField';
-import { LocationField } from '../widgets/LocationField';
-import { FormulaField } from '../widgets/FormulaField';
-import { SummaryField } from '../widgets/SummaryField';
-import { AutoNumberField } from '../widgets/AutoNumberField';
-import { UserField } from '../widgets/UserField';
-import { ObjectField } from '../widgets/ObjectField';
-import { VectorField } from '../widgets/VectorField';
-import { GridField } from '../widgets/GridField';
-import { ColorField } from '../widgets/ColorField';
-import { SliderField } from '../widgets/SliderField';
-import { RatingField } from '../widgets/RatingField';
-import { CodeField } from '../widgets/CodeField';
-import { AvatarField } from '../widgets/AvatarField';
-import { AddressField } from '../widgets/AddressField';
-import { GeolocationField } from '../widgets/GeolocationField';
-import { SignatureField } from '../widgets/SignatureField';
-import { QRCodeField } from '../widgets/QRCodeField';
-import { ObjectRefField } from '../widgets/ObjectRefField';
-import { FilterConditionField } from '../widgets/FilterConditionField';
-import { RecipientPickerField } from '../widgets/RecipientPickerField';
-
-/** Same widget map as the #3291 sweep, so the parity check covers the registry. */
-const WIDGETS: Record<string, ComponentType<any>> = {
-  text: TextField,
-  textarea: TextAreaField,
-  number: NumberField,
-  boolean: BooleanField,
-  select: SelectField,
-  date: DateField,
-  datetime: DateTimeField,
-  time: TimeField,
-  email: EmailField,
-  phone: PhoneField,
-  url: UrlField,
-  multiselect: MultiSelectField,
-  radio: RadioField,
-  checkboxes: CheckboxesField,
-  tags: TagsField,
-  currency: CurrencyField,
-  percent: PercentField,
-  password: PasswordField,
-  markdown: RichTextField,
-  html: RichTextField,
-  richtext: RichTextField,
-  lookup: LookupField,
-  master_detail: LookupField,
-  file: FileField,
-  image: ImageField,
-  location: LocationField,
-  formula: FormulaField,
-  summary: SummaryField,
-  auto_number: AutoNumberField,
-  user: UserField,
-  owner: UserField,
-  object: ObjectField,
-  vector: VectorField,
-  grid: GridField,
-  color: ColorField,
-  slider: SliderField,
-  rating: RatingField,
-  code: CodeField,
-  avatar: AvatarField,
-  address: AddressField,
-  geolocation: GeolocationField,
-  signature: SignatureField,
-  qrcode: QRCodeField,
-  'object-ref': ObjectRefField,
-  'filter-condition': FilterConditionField,
-  'recipient-picker': RecipientPickerField,
-};
-
-/**
- * THE RATCHET LEDGER — widget types MEASURED (by this very sweep, run with an
- * empty ledger) not to put `aria-invalid` on any element of their row after a
- * real validation failure. Every entry is a known accessibility gap tracked in
- * objectui#3318, not an accepted state: the field shows its red message while
- * assistive tech is told nothing.
- *
- * The objectui#3318 delivery batch cleared 20 of the original 29 entries with
- * the objectui#3222/#3306 pattern. What remains cannot take that pattern
- * as-is; each entry names why, so the follow-up starts from the blocker and
- * not from a re-audit:
- *
- * - `formula` / `summary` / `auto_number` / `vector` — read-only computed /
- *   display widgets: they render static text and NO focusable control, so
- *   there is no element assistive tech would read the state from (marking the
- *   text span would be exactly the non-focusable-wrapper move this ledger's
- *   rules forbid). A `required` failure on a non-editable field is a metadata
- *   authoring problem more than a widget one.
- * - `grid` — composite line-item editor with its own per-CELL `aria-invalid`
- *   for line validation; driving it from a FORM-level failure needs a design
- *   (which cell? the add-row button?) rather than a spread.
- * - `slider` — the focusable thumb (`role="slider"`, the ARIA-designated
- *   carrier) is rendered inside the synced shadcn `ui/slider.tsx` (a #7
- *   no-touch file), which forwards arbitrary props only to its non-focusable
- *   Root span; delivering needs a components-level change.
- * - `signature` — the drawing `<canvas>` is not focusable at all (no keyboard
- *   input path exists); the only focusable element is the auxiliary Clear
- *   button. Needs a real a11y design, not an attribute.
- * - `filter-condition` / `recipient-picker` — dependency-gated: with no
- *   sibling `object_name` / `recipient_type` chosen (the state a fresh form
- *   and THIS SWEEP render) they show a hint paragraph with no focusable
- *   control. Their editable states DO deliver `aria-invalid` since #3318's
- *   delivery batch.
- *
- * Do NOT add to this list to make a new widget pass; fix the widget (the
- * objectui#3222/#3306 pattern: spread `toDomProps(props)` onto the real
- * focusable control — never a non-DOM Radix Root — then `aria-invalid=
- * {!!error}` after the spread). An entry is removed by fixing the widget: the
- * sweep asserts each entry still fails to deliver, so a fixed widget turns
- * its own ledger row red until it is removed here. The ledger only shrinks.
- */
-const NOT_YET_DELIVERED: ReadonlySet<string> = new Set([
-  'formula',
-  'summary',
-  'auto_number',
-  'vector',
-  'grid',
-  'slider',
-  'signature',
-  'filter-condition',
-  'recipient-picker',
-]);
-
-/** Option widgets render an "unfillable" placeholder unless offered a list. */
-const OPTION_TYPES = new Set(['select', 'multiselect', 'radio', 'checkboxes', 'tags']);
-const OPTIONS = [
-  { label: 'Alpha', value: 'alpha' },
-  { label: 'Beta', value: 'beta' },
-];
-
-/** `null` is MISSING for the presence-check `required` (cloud#972). */
-const MISSING_VALUE = null;
-
-function fieldConfig(type: string) {
-  return {
-    name: 'f',
-    label: 'F',
-    type: `field:${type}`,
-    required: true,
-    ...(OPTION_TYPES.has(type) ? { options: OPTIONS } : {}),
-  };
-}
-
-function renderForm(field: Record<string, unknown>) {
-  const Form = ComponentRegistry.get('form')!;
-  return render(
-    <Form
-      schema={{
-        type: 'form',
-        mode: 'create',
-        showSubmit: true,
-        showCancel: false,
-        submitLabel: 'Create',
-        defaultValues: { f: MISSING_VALUE },
-        fields: [field],
-        onSubmit: () => {},
-      }}
-    />,
-  );
-}
-
-async function formRow(): Promise<Element> {
-  return waitFor(() => {
-    const row = document.querySelector('[data-field="f"]');
-    if (!row) throw new Error('field row never rendered');
-    return row;
-  });
-}
-
-/**
- * Drive a REAL validation failure and prove it rendered before reading aria:
- * submit, then wait for the "is required" message inside the row.
- */
-async function failValidation(): Promise<Element> {
-  fireEvent.click(screen.getByRole('button', { name: /create/i }));
-  await waitFor(() => {
-    expect(document.querySelector('[data-field="f"]')?.textContent ?? '').toContain(
-      'is required',
-    );
-  });
-  return formRow();
-}
-
-beforeAll(() => {
-  for (const [type, Widget] of Object.entries(WIDGETS)) {
-    ComponentRegistry.register(type, withFieldCarrier(Widget) as any, {
-      namespace: 'field',
-      skipFallback: true,
-    });
-  }
-}, 60000);
-
-beforeEach(() => {
-  if (!(Element.prototype as any).scrollIntoView) {
-    (Element.prototype as any).scrollIntoView = () => {};
-  }
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-});
-
-const ALL_TYPES = Object.keys(WIDGETS);
-const DELIVERING = ALL_TYPES.filter((type) => !NOT_YET_DELIVERED.has(type));
-const LEDGERED = ALL_TYPES.filter((type) => NOT_YET_DELIVERED.has(type));
-
-describe('every registered field widget announces a failed validation (objectui#3306)', () => {
-  it('covers every field type the form can render', () => {
-    expect(Object.keys(WIDGETS).sort()).toEqual([...FORM_FIELD_TYPES].sort());
-  });
-
-  it('the ledger only names types that exist', () => {
-    // A renamed/removed widget must not leave a stale ledger entry that would
-    // silently assert against nothing.
-    expect([...NOT_YET_DELIVERED].filter((type) => !(type in WIDGETS))).toEqual([]);
-  });
-
-  it.each(DELIVERING)(
-    'field:%s — carries aria-invalid inside its row after a real failure',
-    async (type) => {
-      renderForm(fieldConfig(type));
-      const row = await formRow();
-
-      // No premature alarm: a widget must not claim invalid before validation
-      // ran. (`aria-invalid="false"` is fine and expected — asserting on the
-      // "true" value keeps this half meaningful for widgets that stay silent
-      // until they fail.)
-      expect(row.querySelector('[aria-invalid="true"]')).toBeNull();
-
-      const after = await failValidation();
-      expect(
-        after.querySelector('[aria-invalid="true"]'),
-        `field:${type} rendered its "is required" message but no element in its row carries aria-invalid="true" — assistive tech is never told the field failed`,
-      ).not.toBeNull();
-    },
-  );
-
-  it.each(LEDGERED)(
-    'field:%s — KNOWN GAP: still does not deliver aria-invalid (fix it, then remove it from NOT_YET_DELIVERED)',
-    async (type) => {
-      renderForm(fieldConfig(type));
-      await formRow();
-
-      const after = await failValidation();
-      // The ratchet: the day this widget starts delivering, this assertion
-      // fails and the entry MUST be removed from the ledger above.
-      expect(
-        after.querySelector('[aria-invalid="true"]'),
-        `field:${type} now delivers aria-invalid — remove it from NOT_YET_DELIVERED so the sweep guards it forward`,
-      ).toBeNull();
-    },
-  );
-});