feat(ui): pseudo-function style for 404, footer, empty state, library card#6436
Open
MarkusNeusinger wants to merge 2 commits into
Open
feat(ui): pseudo-function style for 404, footer, empty state, library card#6436MarkusNeusinger wants to merge 2 commits into
MarkusNeusinger wants to merge 2 commits into
Conversation
…ibrary card Follow-up to #5293. Applies the brand's `.verb()` / `subject.verb()` notation to the surfaces already in the codebase that were deferred in issue #5292: page.miss() 404 headline (NotFoundPage) page.home() NotFoundPage back-to-home link .about() footer about link .legal() footer legal link results.empty() empty filter state (FilterBar, MapPage) .explore() library-card hover CTA (was "browse →") aria-labels keep human-readable copy for screen readers per style guide §7.4.1. Out-of-scope items from #5292 (keyboard-help overlay, RSS, spec-detail share button) remain tracked there — those surfaces don't exist in the codebase yet. Refs #5292
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR continues the frontend “pseudo-function” brand copy pass by updating a few remaining UI surfaces (404 page, footer links, empty states, and the library-card CTA) to use .verb() / subject.verb() notation while keeping screen-reader-friendly text via aria-label.
Changes:
- Restyled the 404 page headline/link and updated related tests to assert via accessible heading name.
- Updated footer “about/legal” link labels to
.about()/.legal()and adjusted tests accordingly. - Updated empty-result copy in
FilterBar/MapPagetoresults.empty()and the library card CTA to.explore()(with hover color change).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/src/pages/SpecPage.test.tsx | Updates 404 assertions to match the new NotFound copy/accessibility name. |
| app/src/pages/NotFoundPage.tsx | Applies pseudo-function styling to 404 headline/sub-message/home link. |
| app/src/pages/NotFoundPage.test.tsx | Adjusts NotFoundPage tests for new heading/message/link rendering. |
| app/src/pages/MapPage.tsx | Updates empty search state copy to results.empty(). |
| app/src/components/RouteErrorBoundary.test.tsx | Updates 404 fallback assertions to match new NotFound copy/accessibility name. |
| app/src/components/LibraryCard.tsx | Changes hover CTA from “browse →” to .explore() and adds hover color styling. |
| app/src/components/Footer.tsx | Renames footer link labels to .about() / .legal() and adds aria-labels. |
| app/src/components/Footer.test.tsx | Updates footer tests for the new .about() / .legal() labels. |
| app/src/components/FilterBar.tsx | Updates “no matches” empty state to results.empty() with mono styling. |
Comment on lines
32
to
38
| <Box | ||
| component={Link} | ||
| to="/" | ||
| sx={{ color: colors.primary, fontFamily: typography.fontFamily, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }} | ||
| sx={{ color: colors.primary, fontFamily: typography.mono, textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }} | ||
| > | ||
| back to anyplot.ai | ||
| <Box component="span" sx={{ color: 'var(--ink-muted)' }}>page</Box>.home() | ||
| </Box> |
Comment on lines
+97
to
108
| <Box className="lib-card-cta" sx={{ | ||
| fontFamily: typography.mono, | ||
| fontSize: '11px', | ||
| color: 'var(--ink-muted)', | ||
| mt: 'auto', | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| transition: 'color 0.2s', | ||
| }}> | ||
| <span>browse →</span> | ||
| <span aria-label={`Browse ${name} examples`}>.explore()</span> | ||
| </Box> |
| render(<NotFoundPage />); | ||
| const link = screen.getByText('back to anyplot.ai'); | ||
| expect(link.closest('a')).toHaveAttribute('href', '/'); | ||
| const link = screen.getByText('.home()').closest('a'); |
…ntrols Address Copilot review feedback on #6436: - NotFoundPage home link: add aria-label="Go home" and wrap the visible page.home() text in aria-hidden so screen readers announce the human-readable name instead of "dot home open close paren". - LibraryCard button: add aria-label="Browse <name> examples" on the outer button (the interactive element) and mark the visible .explore() span as aria-hidden. - NotFoundPage test: assert via getByRole('link', { name: /go home/i }) so the test verifies the accessible name rather than implementation text nodes. Matches style guide §7.4.1: pseudo-function style is a visual convention; aria-label must stay in readable human language.
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
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.
Follow-up to #5293, addresses the in-codebase surfaces from #5292.
Summary
Applies the brand's
.verb()/subject.verb()notation (style guide §7.4.1) to the surfaces that already exist in the frontend and were deferred from the previous pseudo-function pass.NotFoundPage)404page.miss()page not found404 — no route matchedback to anyplot.aipage.home()about.about()legal.legal()FilterBar,MapPage)no matchesresults.empty()LibraryCard)browse →.explore()aria-labelattributes retain human-readable copy ("Page not found", "About anyplot", "No matches", etc.) per §7.4.1 — screen readers shouldn't announce.about()as "dot about open close paren".Out of scope (still tracked on #5292)
These surfaces don't exist in the codebase yet — the issue stays open for convention-before-build:
?) overlay →help.keys()feed.subscribe().share()Footer
contactlink also doesn't exist; onlyaboutandlegalwere re-labelled.legalmapped to.legal()rather than the issue's.license()because the actual page covers legal notice, privacy, and transparency —.license()would be too narrow.Test plan
yarn lint(no new warnings)yarn tsc --noEmit(clean)yarn test --run(452/452 passing — updated NotFoundPage, Footer, RouteErrorBoundary, SpecPage tests for new copy)/some-bogus-routeand confirmpage.miss()headline renders two-tone.explore()turns greenresults.empty()renders monoRefs #5292
Generated by Claude Code