Improve API status indicator accessibility — use shadcn tooltip and increase hit area#2880
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR improves the API status indicator UX in RunFrameWithApi by making it keyboard/focus accessible via a shadcn/Radix tooltip wrapper and increasing the indicator’s hit area.
Changes:
- Wrap the API status indicator in a tooltip and replace the raw
<span title/aria-label>with a focusable<button>trigger. - Adjust the “connected” indicator styling (reduced opacity) and increase the clickable/hoverable area.
- Minor refactor to URL hash update string building.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| lib/hooks/styles.generated.ts | Regenerates the Tailwind-generated style string to include newly referenced utility classes. |
| lib/components/RunFrameWithApi/RunFrameWithApi.tsx | Adds tooltip-based, focusable API status indicator and tweaks URL hash update formatting. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
seveibar
left a comment
seveibar
left a comment
There was a problem hiding this comment.
message is an awful var name inside RunFrameForApi, it could mean a million things, move this code outside this element and make sure youre naming well based on contrxt
rushabhcodes
requested review from
a team,
ShiboSoftwareDev,
imrishabh18 and
seveibar
seveibar
left a comment
seveibar
left a comment
There was a problem hiding this comment.
why have an enum? adds complexity for no gain in this case
|
This PR has been automatically marked as stale because it has had no recent activity. It will be closed if no further activity occurs. |
MustafaMulla29
left a comment
MustafaMulla29
left a comment
There was a problem hiding this comment.
Those strings are too long for tool tip ig, maybe we can do: "dev server connected" and "connection lost"
|
@MustafaMulla29 fixed "Dev server disconnected" : "Dev server connected" |
This pull request enhances the user experience for the API status indicator in the
RunFrameWithApicomponent by adding a tooltip for accessibility and clarity.UI/UX Improvements:
Tooltip,TooltipTrigger,TooltipContent, andTooltipProvidercomponents fromlib/components/ui/tooltip, improving accessibility and providing a clearer status message on hover or focus. [1] [2]titleandaria-labelon the status indicator with a button wrapped in a tooltip, and adjusted the indicator's opacity for the connected state for better visual feedback.