fix(search): polish action bar tooltips and enhance empty state (#983)#987
fix(search): polish action bar tooltips and enhance empty state (#983)#987ericsocrat merged 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📸 PR ScreenshotsCaptured 4 screenshots (2 mobile, 2 desktop) for 2 changed page(s):
📥 Download screenshots from workflow artifacts. Captured by PR Screenshots workflow • 2026-03-20 |
Bundle Size Report
✅ Bundle size is within acceptable limits. |
There was a problem hiding this comment.
Pull request overview
This PR improves the search page UX by enhancing the “no search yet” empty state and adding tooltip text to action-bar controls to help identify icon-only actions (especially on mobile).
Changes:
- Added tooltip text (
title) to view mode toggle, save search, and saved searches link. - Enhanced the empty state to include a descriptive subtitle and clickable popular-search chips.
- Added new i18n strings (en/pl/de) and expanded Vitest coverage for the new UI.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/app/app/search/page.tsx | Adds title tooltips to action bar controls; augments empty state with description and popular search chips. |
| frontend/src/app/app/search/page.test.tsx | Adds tests for empty state description/chips, chip click behavior, and saved searches tooltip. |
| frontend/messages/en.json | Adds new search empty-state/label strings used by the updated UI. |
| frontend/messages/pl.json | Adds Polish equivalents for the new search UI strings. |
| frontend/messages/de.json | Adds German equivalents for the new search UI strings. |
| <button | ||
| type="button" | ||
| onClick={() => setShowSaveDialog(true)} | ||
| className="touch-target text-xs text-foreground-muted hover:text-brand" | ||
| title={t("search.saveSearch")} | ||
| > |
There was a problem hiding this comment.
The Save Search button is icon-only below the xs breakpoint (the text is display:none), and it currently relies on title for labeling. title is not a reliable accessible name for screen readers, so the control can be announced without a name on mobile. Add an aria-label (and keep title only as an optional visual tooltip).
| @@ -454,6 +456,7 @@ | |||
| <Link | |||
| href="/app/search/saved" | |||
| className="touch-target text-xs text-foreground-muted hover:text-brand" | |||
There was a problem hiding this comment.
The Saved Searches link text is hidden on small screens (hidden xs:inline), so the link can lose its accessible name. Using only title doesn’t consistently fix this for assistive tech. Add an aria-label (and optionally keep title for mouse hover) so the link is always announced correctly.
| className="touch-target text-xs text-foreground-muted hover:text-brand" | |
| className="touch-target text-xs text-foreground-muted hover:text-brand" | |
| aria-label={t("search.savedSearches")} |
| it("saved searches link has title attribute for accessibility", () => { | ||
| render(<SearchPage />, { wrapper: createWrapper() }); | ||
| const link = screen.getByTitle("Saved searches"); |
There was a problem hiding this comment.
This test asserts accessibility via getByTitle, but title is not a reliable accessibility mechanism and isn’t exposed consistently through the accessibility tree. After adding an aria-label/accessible name on the Saved Searches link, prefer asserting with getByRole('link', { name: ... }) instead.
| it("saved searches link has title attribute for accessibility", () => { | |
| render(<SearchPage />, { wrapper: createWrapper() }); | |
| const link = screen.getByTitle("Saved searches"); | |
| it("saved searches link is accessible via role and name", () => { | |
| render(<SearchPage />, { wrapper: createWrapper() }); | |
| const link = screen.getByRole("link", { name: "Saved searches" }); |
Summary
Polishes action bar button accessibility and enhances the search empty state with descriptive text and popular search term chips.
Changes
Verification
Closes #983