Chart builder: drop unparseable expressions mid-edit, polite glyphed inline feedback

src/app/components/ChartBuilderModal.module.css

@@ -234,11 +234,21 @@
 
 .exprError,
 .exprWarn {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
   margin: 0;
   font-size: 11px;
   line-height: 1.4;
 }
 
+/* Severity reads from the glyph shape + colour, not colour alone (arch 10 §3); the
+   icon inherits the line's colour via currentColor (round error / triangle warning). */
+.exprFeedbackIcon {
+  flex: none;
+  margin-top: 1px;
+}
+
 .exprError {
   color: var(--support-error);
 }

src/app/components/ChartBuilderModal.test.tsx

@@ -256,8 +256,15 @@ describe('ChartBuilderModal', () => {
       await Promise.resolve();
     });
 
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert?.textContent).toMatch(/nexpected|Invalid/);
+    // Polite, not assertive: live per-keystroke validation uses role="status" with a
+    // status glyph, never an assertive alert (council: APG Alert / WCAG 2.2.4).
+    const messages = Array.from(container.querySelectorAll('[role="status"]'));
+    const errorMsg = messages.find((n) => /nexpected|Invalid/.test(n.textContent ?? ''));
+    expect(errorMsg).toBeTruthy();
+    // The expression input is linked to its message and flagged invalid.
+    const exprInput = container.querySelector('input[aria-label="Filter expression"]');
+    expect(exprInput?.getAttribute('aria-invalid')).toBe('true');
+    expect(exprInput?.getAttribute('aria-describedby')).toBe(errorMsg?.id);
   });
 
   test('the Vega expression reference shows only when an expression is in play (1E)', async () => {

src/app/components/ChartBuilderModal.tsx

@@ -346,11 +346,26 @@ function ChannelBlock({ channel }: { channel: ChannelName }) {
 
 /**
  * Inline feedback for an expression input (filter expression / calculated field):
- * a parse error (assertive) takes priority, else a soft warning for `datum.<field>`
- * references that don't match a known column — a typo guard before the chart renders
- * empty (1E). Nothing renders for a valid, fully-resolved expression.
+ * a parse error takes priority, else a soft warning for `datum.<field>` references
+ * that don't match a known column — a typo guard before the chart renders empty (1E).
+ * Nothing renders for a valid, fully-resolved expression. `messageId` lets the owning
+ * input point at this node via `aria-describedby`.
+ *
+ * Both severities are a **polite** live region carrying a **status glyph** (round
+ * error / triangle warning), not an assertive alert and never colour alone: the
+ * expression validates on every keystroke, so an assertive role would interrupt on
+ * each character (APG Alert / WCAG 2.2.4), and severity must read without colour
+ * (arch 10 §3; the input also carries `aria-invalid`).
  */
-function ExprFeedback({ expr, columns }: { expr: string; columns: BuilderColumns }) {
+function ExprFeedback({
+  expr,
+  columns,
+  messageId,
+}: {
+  expr: string;
+  columns: BuilderColumns;
+  messageId?: string;
+}) {
   const feedback = useMemo(() => {
     const validation = validateExpression(expr);
     if (!validation.valid) {
@@ -359,19 +374,23 @@ function ExprFeedback({ expr, columns }: { expr: string; columns: BuilderColumns
     const unknown = referencedFields(expr).filter((f) => !columns.columns.includes(f));
     if (unknown.length > 0) {
       const plural = unknown.length > 1 ? 's' : '';
-      return { kind: 'warn' as const, text: `Unknown field${plural}: ${unknown.join(', ')}` };
+      return {
+        kind: 'warn' as const,
+        text: `Unknown field${plural}: ${unknown.join(', ')} — not a column in this dataset.`,
+      };
     }
     return null;
   }, [expr, columns]);
 
   if (!feedback) return null;
-  return feedback.kind === 'error' ? (
-    <p className={styles.exprError} role="alert">
-      {feedback.text}
-    </p>
-  ) : (
-    <p className={styles.exprWarn} role="status">
-      {feedback.text}
+  const isError = feedback.kind === 'error';
+  return (
+    <p id={messageId} className={isError ? styles.exprError : styles.exprWarn} role="status">
+      <Icon
+        name={isError ? 'status-error' : 'status-warning'}
+        className={styles.exprFeedbackIcon}
+      />
+      <span>{feedback.text}</span>
     </p>
   );
 }
@@ -412,6 +431,9 @@ function FilterRow({ filter, columns }: { filter: BuilderFilter; columns: Builde
   const op = filter.op ?? 'equal';
   const arity = filterOpArity(op);
   const hasColumns = columns.columns.length > 0;
+  // Links the expression input to its feedback line; harmless when no message renders
+  // (aria-describedby to an absent id is ignored — GOV.UK error-message association).
+  const exprMsgId = `filter-${filter.id}-expr-msg`;
 
   return (
     <div className={styles.transformBlock}>
@@ -423,6 +445,7 @@ function FilterRow({ filter, columns }: { filter: BuilderFilter; columns: Builde
             placeholder={exprPlaceholder(columns, 'filter')}
             value={filter.expr ?? ''}
             aria-invalid={!validateExpression(filter.expr ?? '').valid || undefined}
+            aria-describedby={exprMsgId}
             onChange={(e) => updateFilter(filter.id, { expr: e.target.value })}
           />
         ) : (
@@ -496,7 +519,9 @@ function FilterRow({ filter, columns }: { filter: BuilderFilter; columns: Builde
         </div>
       )}
 
-      {expressionMode && <ExprFeedback expr={filter.expr ?? ''} columns={columns} />}
+      {expressionMode && (
+        <ExprFeedback expr={filter.expr ?? ''} columns={columns} messageId={exprMsgId} />
+      )}
 
       {hasColumns && (
         <button
@@ -515,6 +540,7 @@ function FilterRow({ filter, columns }: { filter: BuilderFilter; columns: Builde
 function CalculateRow({ calc, columns }: { calc: BuilderCalculate; columns: BuilderColumns }) {
   const updateCalculate = useChartBuilderStore((s) => s.updateCalculate);
   const removeCalculate = useChartBuilderStore((s) => s.removeCalculate);
+  const exprMsgId = `calc-${calc.id}-expr-msg`;
 
   return (
     <div className={styles.transformBlock}>
@@ -535,6 +561,7 @@ function CalculateRow({ calc, columns }: { calc: BuilderCalculate; columns: Buil
           placeholder={exprPlaceholder(columns, 'calc')}
           value={calc.expr}
           aria-invalid={!validateExpression(calc.expr).valid || undefined}
+          aria-describedby={exprMsgId}
           onChange={(e) => updateCalculate(calc.id, { expr: e.target.value })}
         />
         <button
@@ -546,7 +573,7 @@ function CalculateRow({ calc, columns }: { calc: BuilderCalculate; columns: Buil
           <Icon name="close" />
         </button>
       </div>
-      <ExprFeedback expr={calc.expr} columns={columns} />
+      <ExprFeedback expr={calc.expr} columns={columns} messageId={exprMsgId} />
     </div>
   );
 }
@@ -782,9 +809,15 @@ function BuilderPreview() {
             setTooLarge({ heightPx: e.heightPx, limitPx: e.limitPx });
             setError(null);
           } else if (e instanceof DatasetNotFoundError) {
+            // TODO: this drops the next-step the error contract wants (arch 10); LivePreview
+            // gives "Create it from Datasets…". Near-unreachable here (the builder opens from
+            // an existing dataset), so it's terse — restore the next-step if it can be reached.
             setError(`Dataset "${e.datasetName}" not found.`);
             setTooLarge(null);
           } else {
+            // TODO: arch 10 routes a raw diagnostic into a disclosure, not the headline. The
+            // editor surfaces the Vega message inline by design; the builder could fold it
+            // behind a details disclosure and keep the headline plain.
             setError(`Couldn't render this chart: ${(e as Error).message}`);
             setTooLarge(null);
           }

src/core/chart-builder.test.ts

@@ -974,6 +974,29 @@ describe('buildTransforms (predicate coercion + shape)', () => {
     };
     expect(buildTransforms(config)).toEqual([]);
   });
+
+  it('drops a syntactically-invalid expression filter (mid-edit preview resilience)', () => {
+    const t = buildTransforms(
+      withFilters(
+        filter({ mode: 'expression', expr: 'datum.value *' }), // half-typed → unparseable
+        filter({ id: 'f2', mode: 'expression', expr: 'datum.value > 0' }), // valid stays
+      ),
+    );
+    expect(t).toEqual([{ filter: 'datum.value > 0' }]);
+  });
+
+  it('drops a calculated field whose expression does not parse', () => {
+    const config: BuilderConfig = {
+      datasetName: 'D',
+      mark: 'bar',
+      encodings: {},
+      calculates: [
+        calc({ as: 'bad', expr: 'datum.a +' }),
+        calc({ id: 'c2', as: 'ok', expr: 'datum.a' }),
+      ],
+    };
+    expect(buildTransforms(config)).toEqual([{ calculate: 'datum.a', as: 'ok' }]);
+  });
 });
 
 describe('buildChartSpec — transform integration', () => {

src/core/chart-builder.ts

@@ -26,6 +26,7 @@ import type { ColumnStats } from './profile';
 import { DISTINCT_CAP } from './profile';
 import type { ColumnType } from './type-inference';
 import { VEGA_LITE_SCHEMA_URL } from './snippet';
+import { validateExpression } from './expr-validate';
 
 /** The five mark types the builder offers, in selector order (spec §06). */
 export const MARK_TYPES = ['bar', 'line', 'point', 'area', 'circle'] as const;
@@ -835,25 +836,31 @@ function predicateObject(filter: BuilderFilter): Record<string, unknown> | null
 function filterTransformObject(filter: BuilderFilter): Record<string, unknown> | null {
   if (filter.mode === 'expression') {
     const expr = (filter.expr ?? '').trim();
-    return expr === '' ? null : { filter: expr };
+    // A syntactically-invalid expression is dropped like an empty one: a half-typed
+    // `datum.x *` must not reach the renderer and blank the preview mid-edit — the
+    // inline feedback already flags it. (Same mid-edit resilience as a partial predicate.)
+    return expr === '' || !validateExpression(expr).valid ? null : { filter: expr };
   }
   const predicate = predicateObject(filter);
   return predicate ? { filter: predicate } : null;
 }
 
-/** One calculate's `{ calculate, as }` transform entry, or `null` when incomplete. */
+/** One calculate's `{ calculate, as }` transform entry, or `null` when incomplete or unparseable. */
 function calculateTransformObject(calc: BuilderCalculate): Record<string, unknown> | null {
   const expr = calc.expr.trim();
   const as = calc.as.trim();
-  return expr === '' || as === '' ? null : { calculate: expr, as };
+  return expr === '' || as === '' || !validateExpression(expr).valid
+    ? null
+    : { calculate: expr, as };
 }
 
 /**
  * The complete top-level `transform` array for a configuration: every calculated
  * field first (so filters and encodings can reference the derived columns), then
- * every filter, each in the user's list order. Incomplete entries (a half-typed
- * filter, an unnamed calculate) are dropped so a configuration mid-edit still
- * produces a renderable spec. An empty result means no `transform` key is emitted.
+ * every filter, each in the user's list order. Incomplete or unparseable entries (a
+ * half-typed predicate, an unnamed calculate, an expression that doesn't parse) are
+ * dropped so a configuration mid-edit still produces a renderable spec. An empty
+ * result means no `transform` key is emitted.
  */
 export function buildTransforms(config: BuilderConfig): Array<Record<string, unknown>> {
   const out: Array<Record<string, unknown>> = [];