fix(mapgen-studio): split field label to foreground tier and gate error live regions on rawErrors#1620
Merged
Merged
Conversation
This was referenced Jun 12, 2026
refactor(studio): decompose App.tsx non-React corpus into feature modules and shared utilities
#1608
Merged
Merged
Merged
|
Railway preview (MapGen Studio): not provisioned for this PR. Policy (Graphite stacks): previews are created only for the top-of-stack PR by default.
Debug: |
Owner
Author
This was referenced Jun 12, 2026
This was referenced Jun 12, 2026
Merged
mateicanavra
force-pushed
the
design/layout-geometry
branch
from
June 12, 2026 20:44
533a2f2 to
b8d88d2
Compare
mateicanavra
force-pushed
the
design/form-hierarchy
branch
from
June 12, 2026 20:44
552ce27 to
5d05734
Compare
Owner
Author
Merge activity
|
mateicanavra
changed the base branch from
design/layout-geometry
to
graphite-base/1620
June 12, 2026 21:20
…ated alert regions OpenSpec mapgen-studio-form-hierarchy. rjsf field labels move to the foreground tier (descriptions/help stay muted; same 11px scale — contrast split, not size); the per-field role=alert live region now mounts only when rawErrors exist, killing the 40 phantom alert regions on a pristine form while preserving the id__error association contract. New template unit test covers both paths. Verified live: label rgb(232,232,237) vs prose rgb(143,143,153); alert count 0. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
mateicanavra
force-pushed
the
design/form-hierarchy
branch
from
June 12, 2026 21:22
5d05734 to
d35b676
Compare
This was referenced Jun 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix phantom alert regions and establish label/description visual hierarchy in the config form
Problem 1 — 40 empty
role="alert"regions on a pristine formrjsf's
errorsprop is an always-truthyReactElement, so the previous guard ({errors ? … }) mounted a live region for every field regardless of whether any validation had failed. Screen readers were announcing ~40 orphaned alert regions on load. The template now readsrawErrors(the actual string array) and only mounts therole="alert"div whenrawErrors.length > 0, while still rendering the richererrorselement inside it. Theid="${id}__error"association contract used by widgets foraria-describedby/aria-invalidis preserved — the id appears exactly when the region exists.Problem 2 — labels and descriptions were visually indistinguishable
Field labels and description/help/gs-comment prose were both rendered as 11px
text-muted-foreground, giving the eye no anchor. A newFORM.fieldLabeltoken (text-foreground) is introduced for labels; descriptions, help text, and gs-comments remain on the muted tier. The split is color and weight only — no size or density change.Scope note on hand-rolled fields
The task spec called for a matching split in
src/ui/components/fields/styles.ts, but that file no longer exists — the legacy field set was removed in earlier theming work and only the layout-onlyFieldRowwrapper remains. No second label-styling site exists.Tests
A new unit test (
test/config/rjsfFieldTemplateErrors.test.tsx) covers three cases: no alert region on a pristine field, correct alert region and id when raw errors are present, and label on the foreground tier with description on the muted tier.