Repository navigation
Explain the required-field asterisk: hover tooltip and a legend on create forms - #4623
devin-ai-integration[bot] wants to merge 2 commits into
Conversation
…e swarm form Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| </span> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="top" variant="muted"> | ||
| Required | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| <span className="sr-only">(required)</span> |
There was a problem hiding this comment.
🟡 Keyboard misses required-field explanation
On forms without the legend, keyboard navigation cannot focus the TooltipTrigger span. The required-field explanation remains unavailable.
Prompt for agents
Make RequiredMark's explanation available to sighted keyboard users without exposing duplicate or misleading text to assistive technology. The current TooltipTrigger in mcpjam-inspector/client/src/components/shared/required-mark.tsx wraps an aria-hidden, non-focusable span, so Radix can only open it through pointer hover. Account for the existing sr-only “(required)” text and the fact that most RequiredMark call sites do not render RequiredLegend. Add keyboard-focused test coverage as well as the existing hover coverage.
Was this helpful? React with 👍 or 👎 to provide feedback.
There was a problem hiding this comment.
Deliberate trade-off rather than an oversight: making the glyph focusable adds an extra tab stop after every required label (4 on the Swarm form alone), which is worse for keyboard users than the missing hover text. Screen-reader users already get "(required)" via the sr-only span. The legend is the keyboard-visible explanation; extending it to the other forms that use RequiredMark is the cleaner fix, and I've asked Sophie whether she wants that.
Internal previewPreview URL: https://mcp-inspector-pr-4623.up.railway.app |
…ms too Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
devin-ai-integration
Bot
changed the title
This branch was successfully deployed
2 participants
Summary
The orange
*next to required labels (RequiredMark, added in #3916) had nothing to point at — no legend, no hover text — so it read as an unexplained footnote marker rather than "required".RequiredMarknow wraps the glyph in a design-systemTooltip("Required", muted variant). The glyph staysaria-hiddenand thesr-only"(required)" text is unchanged, so assistive tech behavior is identical; only sighted hover gains the explanation. Applies everywhere the mark is used (Swarm create flow, target composer, User Testing scenario flow, Evaluate suite page).RequiredLegend(* Required field, muted) rendered once under the "Create an agentic swarm" subtitle. Only wired into the Swarm form for now — the other forms can adopt it the same way if wanted.Tests:
required-mark.test.tsxcovers the aria-hidden glyph + sr-only text, tooltip on hover, and the legend text.Link to Devin session: https://app.devin.ai/sessions/56837586939b4c6e8d37bb9ea8e196ee
Open in Devin Desktop: https://app.devin.ai/desktop/session/56837586939b4c6e8d37bb9ea8e196ee?variant=devin
Requested by: @sophiemarinavo
Summary by cubic
Adds hover tooltips and a legend to the required-field asterisk so the mark now clearly means "required" instead of reading as an unexplained footnote.
RequiredMarknow shows a muted "Required" tooltip on hover; thearia-hiddenglyph andsr-only"(required)" text are unchanged, so screen-reader behavior is identical.RequiredLegend("* Required field") under the subtitle of the Swarm create flow, eval suite page, and user testing scenario flow.Written for commit a8317de. Summary will update on new commits.