From 994a233a28a794e7805263be415447be1a1eba95 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Fri, 23 Oct 2026 23:54:50 +0000
Subject: [PATCH 1/4] fix(frontend): label the categorical filter "Clear"
 button "Select none"

In a categorical column-filter popover the footer button sets an
explicit empty allow-list, which hides every row. Labelled "Clear", it
reads as "remove this filter", so a user resetting a filter got an empty
table instead (UX-28). The empty allow-list is deliberate (it lets you
start from nothing and tick one value), so keep the behavior and name it
for what it does. Numeric filters keep "Clear", which does remove the
filter; (All) is how a categorical filter is removed.

Applied to every popover that shares the pattern: Purchase History,
the two RI Exchange tables, Plans' planned purchases and Opportunities.

Refs #727

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/lib/history-filter-popover.ts | 5 ++++-
 frontend/src/plans.ts                      | 3 ++-
 frontend/src/recommendations.ts            | 3 ++-
 frontend/src/riexchange.ts                 | 6 ++++--
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/history-filter-popover.ts b/frontend/src/lib/history-filter-popover.ts
index 7c7a48a65..705f671a5 100644
--- a/frontend/src/lib/history-filter-popover.ts
+++ b/frontend/src/lib/history-filter-popover.ts
@@ -308,7 +308,10 @@ export function openHistoryColumnPopover<TColumnId extends string>(
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.className = 'column-filter-clear';
-  clearBtn.textContent = 'Clear';
+  // Issue #727 (UX-28): on a categorical filter this button selects
+  // nothing (an explicit empty allow-list, which hides every row), so it
+  // must not be called "Clear". (All) is how the filter is removed.
+  clearBtn.textContent = config.kind === 'numeric' ? 'Clear' : 'Select none';
   clearBtn.addEventListener('click', () => {
     if (config.kind === 'numeric') {
       if (inputRef) inputRef.value = '';
diff --git a/frontend/src/plans.ts b/frontend/src/plans.ts
index e9365d926..b8c27837f 100644
--- a/frontend/src/plans.ts
+++ b/frontend/src/plans.ts
@@ -516,7 +516,8 @@ function buildPlansPopoverContent(
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.className = 'column-filter-clear';
-  clearBtn.textContent = 'Clear';
+  // Categorical: selects nothing (hides every row), so not "Clear" (#727).
+  clearBtn.textContent = input ? 'Clear' : 'Select none';
   clearBtn.addEventListener('click', () => {
     if (input) {
       state.setPlansColumnFilter(column, null);
diff --git a/frontend/src/recommendations.ts b/frontend/src/recommendations.ts
index 307ff2d7a..fbad39fe5 100644
--- a/frontend/src/recommendations.ts
+++ b/frontend/src/recommendations.ts
@@ -2433,7 +2433,8 @@ function buildPopoverContent(
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.className = 'column-filter-clear';
-  clearBtn.textContent = 'Clear';
+  // Categorical: selects nothing (hides every row), so not "Clear" (#727).
+  clearBtn.textContent = input ? 'Clear' : 'Select none';
   clearBtn.addEventListener('click', () => {
     if (input) {
       // Numeric column: Clear drops the expression entirely (no filter).
diff --git a/frontend/src/riexchange.ts b/frontend/src/riexchange.ts
index 4b0855f7b..9f43a7c90 100644
--- a/frontend/src/riexchange.ts
+++ b/frontend/src/riexchange.ts
@@ -1024,7 +1024,8 @@ function activeRiBuildPopover(column: state.ActiveRiColumnId): ActiveRiPopoverSt
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.className = 'column-filter-clear';
-  clearBtn.textContent = 'Clear';
+  // Categorical: selects nothing (hides every row), so not "Clear" (#727).
+  clearBtn.textContent = input ? 'Clear' : 'Select none';
   clearBtn.addEventListener('click', () => {
     if (input) {
       state.setActiveRiColumnFilter(column, null);
@@ -1273,7 +1274,8 @@ function riexBuildPopover(
   const clearBtn = document.createElement('button');
   clearBtn.type = 'button';
   clearBtn.className = 'column-filter-clear';
-  clearBtn.textContent = 'Clear';
+  // Categorical: selects nothing (hides every row), so not "Clear" (#727).
+  clearBtn.textContent = input ? 'Clear' : 'Select none';
   clearBtn.addEventListener('click', () => {
     if (input) {
       state.setRiExchangeColumnFilter(column, null);

From 89a109a5a85dbffb733865e634816b9356191739 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Fri, 23 Oct 2026 23:54:50 +0000
Subject: [PATCH 2/4] fix(frontend): show user form validation next to the
 fields

A refused user save was reported only through a toast (UX-33): it fades,
sits away from the field, and gives screen-reader users no cue on the
control. The email, required-groups and minlength checks were native
bubbles that vanish on the next click, and they pre-empted the app's own
group checks, so the admin met problems one at a time.

New lib/field-errors.ts puts a .field-error message under the field,
sets aria-invalid and appends the message to aria-describedby (existing
help text stays announced), and clears it on the next edit of that
field. #user-form is now novalidate; saveUser collects every problem at
once (blank or malformed email, password requirements on create, no
group or a contradictory group combination), marks each field and
focuses the first. The group and password messages still toast as
before. Opening the modal clears old messages. A forms.css rule lets the
red border show on unfocused fields, since .form-group's border rule
outranks the global [aria-invalid] one.

Refs #727

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/index.html          |  2 +-
 frontend/src/lib/field-errors.ts | 67 +++++++++++++++++++++++++++++
 frontend/src/styles/forms.css    |  7 ++++
 frontend/src/users/userModals.ts | 72 ++++++++++++++++++++++----------
 4 files changed, 124 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/lib/field-errors.ts

diff --git a/frontend/src/index.html b/frontend/src/index.html
index ebbbdd24c..19f3bc59a 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1055,7 +1055,7 @@ <h2 id="create-apikey-modal-title">Create API Key</h2>
         <div id="user-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="user-modal-title">
             <div class="modal-content">
                 <h2 id="user-modal-title">Create User</h2>
-                <form id="user-form">
+                <form id="user-form" novalidate>
                     <input type="hidden" id="user-id">
                     <div class="form-group">
                         <label for="user-email">Email</label>
diff --git a/frontend/src/lib/field-errors.ts b/frontend/src/lib/field-errors.ts
new file mode 100644
index 000000000..e52004014
--- /dev/null
+++ b/frontend/src/lib/field-errors.ts
@@ -0,0 +1,67 @@
+/**
+ * Field-level validation messages for modal forms (issue #727, UX-33).
+ *
+ * The user and group forms used to report a refused save only through a
+ * toast: it fades after a few seconds, sits away from the field, and gives
+ * a screen-reader user no cue on the control itself. showFieldError puts
+ * the message under the field (a `.field-error`, styled in base.css), sets
+ * aria-invalid and links the message with aria-describedby (appended, so
+ * existing help text stays announced). The next edit of the field clears it.
+ */
+
+let seq = 0;
+
+function errorIdFor(control: HTMLElement): string {
+  if (!control.dataset['fieldErrorId']) {
+    control.dataset['fieldErrorId'] = `${control.id || 'field'}-error-${++seq}`;
+  }
+  return control.dataset['fieldErrorId'];
+}
+
+function removeToken(list: string | null, token: string): string {
+  return (list ?? '').split(/\s+/).filter(t => t && t !== token).join(' ');
+}
+
+/**
+ * Show `message` under `control`. `anchor` is the element the message is
+ * placed after; it defaults to the control itself. Pass the enclosing row
+ * when the control sits in a flex row, so the message lands below the row
+ * instead of becoming a flex item beside the control.
+ */
+export function showFieldError(control: HTMLElement, message: string, anchor?: Element): void {
+  const id = errorIdFor(control);
+  let note = document.getElementById(id);
+  if (!note) {
+    note = document.createElement('p');
+    note.id = id;
+    note.className = 'field-error';
+    (anchor ?? control).insertAdjacentElement('afterend', note);
+  }
+  note.textContent = message;
+  control.setAttribute('aria-invalid', 'true');
+  const describedBy = removeToken(control.getAttribute('aria-describedby'), id);
+  control.setAttribute('aria-describedby', describedBy ? `${describedBy} ${id}` : id);
+
+  if (control.dataset['fieldErrorWired'] !== '1') {
+    control.dataset['fieldErrorWired'] = '1';
+    const clear = (): void => clearFieldError(control);
+    control.addEventListener('input', clear);
+    control.addEventListener('change', clear);
+  }
+}
+
+/** Remove the message and invalid marker from `control`, if any. */
+export function clearFieldError(control: HTMLElement): void {
+  const id = control.dataset['fieldErrorId'];
+  if (!id) return;
+  document.getElementById(id)?.remove();
+  control.removeAttribute('aria-invalid');
+  const describedBy = removeToken(control.getAttribute('aria-describedby'), id);
+  if (describedBy) control.setAttribute('aria-describedby', describedBy);
+  else control.removeAttribute('aria-describedby');
+}
+
+/** Clear every field error raised by showFieldError inside `root`. */
+export function clearFieldErrors(root: ParentNode): void {
+  root.querySelectorAll<HTMLElement>('[data-field-error-id]').forEach(clearFieldError);
+}
diff --git a/frontend/src/styles/forms.css b/frontend/src/styles/forms.css
index e965e1dae..0267e6cb3 100644
--- a/frontend/src/styles/forms.css
+++ b/frontend/src/styles/forms.css
@@ -157,6 +157,13 @@ label {
     border-radius: 4px;
 }
 
+/* The rule above outranks the global [aria-invalid] border (base.css), so
+   repeat it here or a field flagged by showFieldError (#727) only turns
+   red while focused. */
+.form-group [aria-invalid="true"] {
+    border-color: var(--cudly-error);
+}
+
 .form-help {
     font-size: 0.8rem;
     color: var(--cudly-text-muted);
diff --git a/frontend/src/users/userModals.ts b/frontend/src/users/userModals.ts
index 107121362..78a7470e9 100644
--- a/frontend/src/users/userModals.ts
+++ b/frontend/src/users/userModals.ts
@@ -17,6 +17,7 @@ import {
 import { escapeHtml, showError, showSuccess, validateGroupCombination } from './utils';
 import { loadUsers } from './userActions';
 import { openModal, closeModal } from '../modal';
+import { clearFieldErrors, showFieldError } from '../lib/field-errors';
 
 /**
  * Open create user modal
@@ -31,6 +32,7 @@ export function openCreateUserModal(): void {
 
   title.textContent = 'Create User';
   form.reset();
+  clearFieldErrors(form);
   (document.getElementById('user-id') as HTMLInputElement).value = '';
 
   // Show password field for new user. Password is optional: leaving it
@@ -63,6 +65,7 @@ export async function openEditUserModal(userId: string): Promise<void> {
     if (!modal || !title || !form) return;
 
     title.textContent = 'Edit User';
+    clearFieldErrors(form);
     (document.getElementById('user-id') as HTMLInputElement).value = user.id;
     (document.getElementById('user-email') as HTMLInputElement).value = user.email;
     // role field no longer exists in the API response (PR #912).
@@ -114,25 +117,56 @@ export async function saveUser(e: Event): Promise<void> {
   }
 }
 
+interface FieldProblem {
+  control: HTMLElement;
+  message: string;
+  /** Also toast it (the pre-#727 behavior these messages already had). */
+  toast: boolean;
+}
+
+/**
+ * Every reason the form cannot be saved, in field order (issue #727,
+ * UX-33). #user-form is novalidate, so this is the only gate: the browser's
+ * own bubbles vanish on the next click and never reached the group checks.
+ */
+function userFormProblems(email: HTMLInputElement, password: HTMLInputElement,
+  groupsSelect: HTMLSelectElement, selectedGroups: string[]): FieldProblem[] {
+  const problems: FieldProblem[] = [];
+  if (email.value.trim() === '') {
+    problems.push({ control: email, message: 'Enter an email address.', toast: false });
+  } else if (email.validity?.typeMismatch) {
+    problems.push({ control: email, message: 'Enter a valid email address, like name@example.com.', toast: false });
+  }
+  // Password is optional on create (blank emails an invite) and hidden on edit.
+  if (!currentEditingUser && password.value) {
+    const requirementError = describePasswordValidationError(password.value);
+    if (requirementError) problems.push({ control: password, message: requirementError, toast: true });
+  }
+  // Enforce >= 1 group on the client side so the user gets a clear
+  // validation message rather than a 400 from the backend. Then reject
+  // contradictory combinations (view-only + write-capable).
+  const groupProblem = selectedGroups.length === 0
+    ? 'At least one group is required. Select one or more groups for this user.'
+    : validateGroupCombination(selectedGroups, availableGroups);
+  if (groupProblem) problems.push({ control: groupsSelect, message: groupProblem, toast: true });
+  return problems;
+}
+
 async function submitUserForm(): Promise<void> {
-  const email = (document.getElementById('user-email') as HTMLInputElement).value;
-  const password = (document.getElementById('user-password') as HTMLInputElement).value;
+  const emailInput = document.getElementById('user-email') as HTMLInputElement;
+  const passwordInput = document.getElementById('user-password') as HTMLInputElement;
+  const email = emailInput.value;
+  const password = passwordInput.value;
   // role selector removed: PR #912 drops the role column.
   const groupsSelect = document.getElementById('user-groups') as HTMLSelectElement;
   const selectedGroups = Array.from(groupsSelect.selectedOptions).map(opt => opt.value);
 
-  // Enforce >= 1 group on the client side so the user gets a clear
-  // validation message rather than a 400 from the backend.
-  if (selectedGroups.length === 0) {
-    showError('At least one group is required. Select one or more groups for this user.');
-    return;
-  }
-
-  // Reject contradictory group combinations (view-only + write-capable)
-  // before hitting the API so the user gets an actionable message.
-  const groupConflict = validateGroupCombination(selectedGroups, availableGroups);
-  if (groupConflict) {
-    showError(groupConflict);
+  const problems = userFormProblems(emailInput, passwordInput, groupsSelect, selectedGroups);
+  if (problems.length > 0) {
+    for (const p of problems) showFieldError(p.control, p.message);
+    const toast = problems.find(p => p.toast);
+    if (toast) showError(toast.message);
+    problems[0]!.control.focus();
     return;
   }
 
@@ -147,15 +181,7 @@ async function submitUserForm(): Promise<void> {
     } else {
       // Create new user. Password is optional: if blank, the backend
       // emails an invite that lets the user pick their own password on
-      // first login. Only run client-side strength checks when a
-      // password was actually entered.
-      if (password) {
-        const requirementError = describePasswordValidationError(password);
-        if (requirementError) {
-          showError(requirementError);
-          return;
-        }
-      }
+      // first login. Strength checks ran in userFormProblems.
       const result = await api.createUser({
         email,
         password,

From 4968c82c4a7895692e7b90334f8cf4551b7ea076 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Fri, 23 Oct 2026 23:54:50 +0000
Subject: [PATCH 3/4] test(frontend): cover field-level user form errors and
 the Select none label

Jest: the field-errors helper (placement after an anchor row,
aria-describedby kept and restored, clear on edit), the user form
(all problems at once with focus on the first, blank email, contradictory
groups inline and toasted, clear then save, hidden password ignored on
edit, reset on reopen) and the history popover footer label and commit
for categorical vs numeric filters. Playwright: the Opportunities
provider filter reads "Select none", and the user form flags fields in a
real browser.

Refs #727

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/__tests__/form-validation-727.test.ts | 219 ++++++++++++++++++
 .../filter-select-none-and-user-form.spec.ts  |  43 ++++
 2 files changed, 262 insertions(+)
 create mode 100644 frontend/src/__tests__/form-validation-727.test.ts
 create mode 100644 frontend/tests-e2e/filter-select-none-and-user-form.spec.ts

diff --git a/frontend/src/__tests__/form-validation-727.test.ts b/frontend/src/__tests__/form-validation-727.test.ts
new file mode 100644
index 000000000..19a55774a
--- /dev/null
+++ b/frontend/src/__tests__/form-validation-727.test.ts
@@ -0,0 +1,219 @@
+/**
+ * Issue #727.
+ * UX-33: user form validation must be field-level (message under the
+ * field, aria-invalid + aria-describedby, focus on the first problem), not
+ * toast-only.
+ * UX-28: the categorical filter popover's footer button selects nothing,
+ * so it is labelled "Select none"; numeric filters keep "Clear".
+ */
+import './setup';
+
+jest.mock('../api', () => ({
+  createUser: jest.fn(),
+  updateUser: jest.fn(),
+  getUser: jest.fn(),
+  listUsers: jest.fn(),
+  listGroups: jest.fn(),
+}));
+
+jest.mock('../users/userActions', () => ({
+  loadUsers: jest.fn().mockResolvedValue(undefined),
+}));
+
+import * as api from '../api';
+import * as userState from '../users/state';
+import { openCreateUserModal, openEditUserModal, saveUser } from '../users/userModals';
+import { clearFieldError, clearFieldErrors, showFieldError } from '../lib/field-errors';
+import { openHistoryColumnPopover, closeOpenHistoryPopover } from '../lib/history-filter-popover';
+
+const GROUPS = [
+  { id: 'w1', name: 'Writers', description: '', permissions: [{ action: 'update', resource: 'plans' }] },
+  { id: 'v1', name: 'Viewers', description: '', permissions: [{ action: 'view', resource: '*' }] },
+];
+
+function setUpUserForm(): void {
+  // Mirrors index.html's #user-modal, including the novalidate the fix adds.
+  document.body.innerHTML = `
+    <div id="user-modal" class="modal hidden">
+      <h2 id="user-modal-title"></h2>
+      <form id="user-form" novalidate>
+        <input type="hidden" id="user-id">
+        <div class="form-group"><input type="email" id="user-email" required></div>
+        <div id="password-fields" class="form-group">
+          <input type="password" id="user-password" minlength="12">
+          <small class="form-help">help</small>
+        </div>
+        <div class="form-group">
+          <select id="user-groups" multiple required></select>
+          <small class="form-help">At least one group is required.</small>
+        </div>
+        <button type="submit">Save User</button>
+      </form>
+    </div>`;
+}
+
+const $ = <T extends HTMLElement>(id: string): T => document.getElementById(id) as T;
+
+function errorFor(control: HTMLElement): string | null | undefined {
+  const id = control.dataset['fieldErrorId'];
+  return id ? document.getElementById(id)?.textContent : null;
+}
+
+async function submit(): Promise<void> {
+  const e = new Event('submit');
+  e.preventDefault = jest.fn();
+  await saveUser(e);
+}
+
+function selectGroups(...ids: string[]): void {
+  Array.from($<HTMLSelectElement>('user-groups').options).forEach(o => { o.selected = ids.includes(o.value); });
+}
+
+describe('lib/field-errors', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div class="form-row"><label><input id="amt" aria-describedby="amt-help"></label></div><small id="amt-help">h</small>';
+  });
+
+  it('places the message after the anchor and links it without dropping existing help', () => {
+    const input = $<HTMLInputElement>('amt');
+    showFieldError(input, 'Too small.', input.closest('.form-row')!);
+    const id = input.dataset['fieldErrorId']!;
+    const note = document.getElementById(id)!;
+    expect(note.previousElementSibling?.classList.contains('form-row')).toBe(true);
+    expect(note.className).toBe('field-error');
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(input.getAttribute('aria-describedby')).toBe(`amt-help ${id}`);
+  });
+
+  it('updates in place, and clears on the next edit, restoring aria-describedby', () => {
+    const input = $<HTMLInputElement>('amt');
+    showFieldError(input, 'First.');
+    showFieldError(input, 'Second.');
+    expect(document.querySelectorAll('.field-error')).toHaveLength(1);
+    expect(errorFor(input)).toBe('Second.');
+    input.dispatchEvent(new Event('input'));
+    expect(document.querySelector('.field-error')).toBeNull();
+    expect(input.hasAttribute('aria-invalid')).toBe(false);
+    expect(input.getAttribute('aria-describedby')).toBe('amt-help');
+  });
+
+  it('clearFieldError and clearFieldErrors are safe on untouched fields', () => {
+    const input = $<HTMLInputElement>('amt');
+    expect(() => clearFieldError(input)).not.toThrow();
+    showFieldError(input, 'x');
+    clearFieldErrors(document);
+    expect(document.querySelector('.field-error')).toBeNull();
+  });
+});
+
+describe('user form field-level validation (#727 UX-33)', () => {
+  beforeEach(() => {
+    setUpUserForm();
+    jest.clearAllMocks();
+    userState.setAvailableGroups(GROUPS as api.APIGroup[]);
+    userState.setCurrentEditingUser(null);
+    (api.createUser as jest.Mock).mockResolvedValue({});
+    (api.updateUser as jest.Mock).mockResolvedValue({});
+  });
+
+  it('marks every problem at once and focuses the first', async () => {
+    openCreateUserModal();
+    $<HTMLInputElement>('user-email').value = 'not-an-email';
+    $<HTMLInputElement>('user-password').value = 'short';
+    await submit();
+
+    expect(api.createUser).not.toHaveBeenCalled();
+    const email = $<HTMLInputElement>('user-email');
+    const password = $<HTMLInputElement>('user-password');
+    const groups = $<HTMLSelectElement>('user-groups');
+    expect(errorFor(email)).toBe('Enter a valid email address, like name@example.com.');
+    expect(errorFor(password)).toBe('Password must be at least 12 characters long');
+    expect(errorFor(groups)).toBe('At least one group is required. Select one or more groups for this user.');
+    for (const el of [email, password, groups]) {
+      expect(el.getAttribute('aria-invalid')).toBe('true');
+      expect(el.getAttribute('aria-describedby')).toBe(el.dataset['fieldErrorId']);
+    }
+    expect(document.activeElement).toBe(email);
+  });
+
+  it('asks for an email when it is blank (no native bubble with novalidate)', async () => {
+    openCreateUserModal();
+    selectGroups('w1');
+    await submit();
+    expect(api.createUser).not.toHaveBeenCalled();
+    expect(errorFor($('user-email'))).toBe('Enter an email address.');
+    expect(document.activeElement).toBe($('user-email'));
+  });
+
+  it('puts the contradictory-groups message on the groups field and still toasts it', async () => {
+    openCreateUserModal();
+    $<HTMLInputElement>('user-email').value = 'a@example.com';
+    selectGroups('w1', 'v1');
+    await submit();
+    expect(api.createUser).not.toHaveBeenCalled();
+    expect(errorFor($('user-groups'))).toContain('Contradictory');
+    expect(document.querySelector('.toast-error .toast-message')?.textContent).toContain('Contradictory');
+    expect(document.activeElement).toBe($('user-groups'));
+  });
+
+  it('clears a field message when the field is edited, then saves', async () => {
+    openCreateUserModal();
+    $<HTMLInputElement>('user-email').value = 'a@example.com';
+    await submit();
+    const groups = $<HTMLSelectElement>('user-groups');
+    expect(groups.getAttribute('aria-invalid')).toBe('true');
+    selectGroups('w1');
+    groups.dispatchEvent(new Event('change'));
+    expect(groups.hasAttribute('aria-invalid')).toBe(false);
+    expect(document.querySelector('.field-error')).toBeNull();
+    await submit();
+    expect(api.createUser).toHaveBeenCalledWith({ email: 'a@example.com', password: '', groups: ['w1'] });
+  });
+
+  it('does not check the hidden password field when editing', async () => {
+    (api.getUser as jest.Mock).mockResolvedValue({ id: 'u1', email: 'a@example.com', groups: ['w1'], mfa_enabled: false });
+    await openEditUserModal('u1');
+    $<HTMLInputElement>('user-password').value = 'short';
+    await submit();
+    expect(api.updateUser).toHaveBeenCalledWith('u1', { email: 'a@example.com', groups: ['w1'] });
+    expect(document.querySelector('.field-error')).toBeNull();
+  });
+
+  it('reopening the modal clears old messages', async () => {
+    openCreateUserModal();
+    await submit();
+    expect(document.querySelectorAll('.field-error').length).toBeGreaterThan(0);
+    openCreateUserModal();
+    expect(document.querySelector('.field-error')).toBeNull();
+    expect(document.querySelector('[aria-invalid="true"]')).toBeNull();
+  });
+});
+
+describe('history filter popover footer label (#727 UX-28)', () => {
+  afterEach(() => closeOpenHistoryPopover());
+
+  function open(kind: 'numeric' | 'categorical', onCommit = jest.fn()): HTMLButtonElement {
+    document.body.innerHTML = '<button id="anchor"></button>';
+    openHistoryColumnPopover({
+      column: 'provider', anchor: $('anchor'), currentFilter: undefined, headerLabel: 'Provider', kind,
+      distinctValues: kind === 'categorical' ? ['aws', 'gcp'] : undefined, onCommit,
+    });
+    return document.querySelector<HTMLButtonElement>('.column-filter-clear')!;
+  }
+
+  it('labels the categorical button "Select none", which selects nothing', () => {
+    const onCommit = jest.fn();
+    const btn = open('categorical', onCommit);
+    expect(btn.textContent).toBe('Select none');
+    btn.click();
+    expect(onCommit).toHaveBeenLastCalledWith({ kind: 'set', values: [] });
+  });
+
+  it('keeps "Clear" for numeric filters, which removes the filter', () => {
+    const onCommit = jest.fn();
+    const btn = open('numeric', onCommit);
+    expect(btn.textContent).toBe('Clear');
+    btn.click();
+    expect(onCommit).toHaveBeenLastCalledWith(null);
+  });
+});
diff --git a/frontend/tests-e2e/filter-select-none-and-user-form.spec.ts b/frontend/tests-e2e/filter-select-none-and-user-form.spec.ts
new file mode 100644
index 000000000..78cac3e60
--- /dev/null
+++ b/frontend/tests-e2e/filter-select-none-and-user-form.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { mockApi, seedAuth } from './fixtures/recs';
+
+// Issue #727 UX-28: a categorical column filter's footer button selects
+// nothing (hiding every row), so it reads "Select none", not "Clear".
+test('categorical column filter footer reads "Select none" and selects nothing', async ({ page }) => {
+  await seedAuth(page);
+  await mockApi(page);
+  await page.goto('/opportunities');
+  const btn = page.locator('th .column-filter-btn[data-column="provider"]');
+  await btn.click();
+  const popover = page.locator('.column-filter-popover');
+  await expect(popover.locator('.column-filter-clear')).toHaveText('Select none');
+  await popover.locator('.column-filter-clear').click();
+  await expect(popover.locator('input[type="checkbox"]:checked')).toHaveCount(0);
+});
+
+// Issue #727 UX-33: the user form explains problems next to the fields.
+test('user form shows field-level errors and focuses the first one', async ({ page }) => {
+  await page.addInitScript(() => localStorage.setItem('cudly:purchaser-prompt-dismissed', '1'));
+  await seedAuth(page);
+  await mockApi(page);
+  await page.route('**/api/users', route => route.fulfill({ json: { users: [] } }));
+  await page.route('**/api/groups', route => route.fulfill({ json: { groups: [
+    { id: 'g1', name: 'Finance', description: '', permissions: [{ action: 'view', resource: 'plans' }], allowed_accounts: [] },
+  ] } }));
+  await page.goto('/admin/users');
+  await page.locator('#create-user-btn').click();
+  const modal = page.locator('#user-modal');
+  await expect(modal).toBeVisible();
+  await page.locator('#user-email').fill('not-an-email');
+  await modal.locator('button[type="submit"]').click();
+
+  await expect(page.locator('#user-email')).toHaveAttribute('aria-invalid', 'true');
+  await expect(page.locator('#user-email')).toBeFocused();
+  await expect(modal.locator('.field-error').first()).toHaveText('Enter a valid email address, like name@example.com.');
+  await expect(page.locator('#user-groups')).toHaveAttribute('aria-invalid', 'true');
+  await expect(modal.locator('.field-error')).toHaveCount(2);
+
+  await page.locator('#user-email').fill('ann@example.com');
+  await expect(page.locator('#user-email')).not.toHaveAttribute('aria-invalid', 'true');
+  await expect(modal.locator('.field-error')).toHaveCount(1);
+});

From 24fc242cc6a436d3e0ca2cbd4fd23c84651a6060 Mon Sep 17 00:00:00 2001
From: Astrid Gealer <astrid@gealer.email>
Date: Sat, 24 Oct 2026 17:07:39 +0000
Subject: [PATCH 4/4] fix(frontend): update #727 tests for main's scoped and
 shared filter popovers

main's #1342 made `scope` a required field of the history popover config,
so the #727 footer-label test no longer typechecked; pass scope 'history'.
Also assert the "Select none" / "Clear" labels in main's shared
column-filter-popover tests, which now carry the label for Plans and
RI Exchange.

Refs #727

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/__tests__/column-filter-popover.test.ts | 11 ++++++++---
 frontend/src/__tests__/form-validation-727.test.ts   |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/__tests__/column-filter-popover.test.ts b/frontend/src/__tests__/column-filter-popover.test.ts
index 39982917a..ba9568405 100644
--- a/frontend/src/__tests__/column-filter-popover.test.ts
+++ b/frontend/src/__tests__/column-filter-popover.test.ts
@@ -133,9 +133,12 @@ describe('categorical commits', () => {
     expect(onCommit).toHaveBeenLastCalledWith('plans', 'provider', null);
   });
 
-  test('Clear writes an explicit empty allow-list', () => {
+  test('Select none writes an explicit empty allow-list', () => {
     openFor('plans', 'provider');
-    document.querySelector<HTMLButtonElement>('.column-filter-clear')!.click();
+    const btn = document.querySelector<HTMLButtonElement>('.column-filter-clear')!;
+    // #727 (UX-28): it hides every row, so it is not labelled "Clear".
+    expect(btn.textContent).toBe('Select none');
+    btn.click();
     expect(onCommit).toHaveBeenLastCalledWith('plans', 'provider', { kind: 'set', values: [] });
     expect(box('azure').checked).toBe(false);
   });
@@ -168,7 +171,9 @@ describe('numeric commits', () => {
     filters['plans:count'] = { kind: 'expr', expr: '5' };
     openFor('plans', 'count');
     expect(exprInput().value).toBe('5');
-    document.querySelector<HTMLButtonElement>('.column-filter-clear')!.click();
+    const btn = document.querySelector<HTMLButtonElement>('.column-filter-clear')!;
+    expect(btn.textContent).toBe('Clear');
+    btn.click();
     expect(exprInput().value).toBe('');
     expect(onCommit).toHaveBeenLastCalledWith('plans', 'count', null);
   });
diff --git a/frontend/src/__tests__/form-validation-727.test.ts b/frontend/src/__tests__/form-validation-727.test.ts
index 19a55774a..27d62b04d 100644
--- a/frontend/src/__tests__/form-validation-727.test.ts
+++ b/frontend/src/__tests__/form-validation-727.test.ts
@@ -195,7 +195,7 @@ describe('history filter popover footer label (#727 UX-28)', () => {
   function open(kind: 'numeric' | 'categorical', onCommit = jest.fn()): HTMLButtonElement {
     document.body.innerHTML = '<button id="anchor"></button>';
     openHistoryColumnPopover({
-      column: 'provider', anchor: $('anchor'), currentFilter: undefined, headerLabel: 'Provider', kind,
+      scope: 'history', column: 'provider', anchor: $('anchor'), currentFilter: undefined, headerLabel: 'Provider', kind,
       distinctValues: kind === 'categorical' ? ['aws', 'gcp'] : undefined, onCommit,
     });
     return document.querySelector<HTMLButtonElement>('.column-filter-clear')!;