Repository navigation
Palette 5.2.8: streamline export, editing and admin workflows - #140
Merged
Merged
Conversation
The 5.2.8 editor's live preview was a plain <div aria-label="Live palette preview"> with no role, which axe flags as a serious aria-prohibited-attr violation (aria-label is not permitted on a div with no role). The Playwright a11y check on /palettes/new failed on it. Add role="img" — the preview is a graphical colour strip — so the accessible name is valid without any visual change. This is the only fix on top of the imported 5.2.8 reference; the reference's e2e/a11y suite had not been run in its source environment.
…changes The 5.2.8 export, admin and shared-editor redesigns (and the changelog entry) change how six visual pages render, so the committed baselines no longer match. Re-recorded the six affected baselines (export, admin, changelog, palette editor, confirm modal, sort-select-open) in the pinned Playwright image (mcr.microsoft.com/playwright:v1.62.1-noble) — the environment CI compares in — and confirmed a clean compare passes (22/22). No app or test code changed.
Add a dated section to the 5.2.8 review with the full verification run: frontend build/lint/format, 237 vitest with coverage, css:orphans; backend ruff/mypy/pytest against local PostgreSQL, alembic agreement and pip-audit; Playwright e2e/a11y (with the role="img" a11y fix) and the six re-recorded visual baselines. Notes the deviations from the reference and the gates left for CI.
The 5.2.8 admin opens the create form in a separate non-modal panel instead of showing it inline on /admin, so the real-stack integration test timed out waiting for the name field. Click "New palette" first — the same flow AdminPage.test.tsx already drives — so the test exercises the new admin create path. Note the deviation in the 5.2.8 review.
…gmented controls The Export "Image / Code" toggle snapped its active background while the theme toggle and the admin tabs slide a highlight. Give it the same sliding indicator (an absolute element that translateX-es with transform 240ms cubic-bezier, and no transition under prefers-reduced-motion), so every segmented control animates consistently. The active button now only flips text colour; the highlight is the moving part. Re-recorded the export visual baseline for the new appearance.
…reens A width audit (320–1440) found two pre-existing horizontal-scroll bugs, both present on main and untouched by the 5.2.8 code: - The signed-in desktop header (~885px: wordmark, five nav links, account and the theme toggle) only collapsed to the compact avatar+menu header below 680px, so it overflowed tablet widths such as 768. Raise that breakpoint to 900px so the compact header appears before the nav can overflow. Guest pages already fit but share the one breakpoint for consistent header behaviour. - The admin Palettes/Tags/Reports tab strip is three 104px tabs (322px min) and was wider than a 320px phone. At <=480px the strip now fills the row and the tabs share the width. After the fix, horizontal overflow is 0 at every audited width (320/360/390/768/ 1024/1440, plus the 899/900/901 boundary) for guest and signed-in pages. Desktop visual baselines are unchanged (compare 22/22) and 237 unit tests pass.
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.
Streamlines the export flow, unifies palette editing behind one accessible form, and reworks the admin editor. Imported 1:1 from the reviewed 5.2.8 handoff bundle (reference
d095fb9, based on the local 5.2.7 head0bc2730).Since 5.2.7 is already merged into
main(#139), this branch was created from the currentmainand the two 5.2.8 commits were cherry-picked onto it —1d68361thend095fb9— so it carries only the 5.2.8 delta plus the fixes below. No 5.2.7 commit is re-introduced.Changes
owner/handle + slug, so a detail deep link works independently of the public search and never falls back to a same-named public palette. Search, clearing the field and switching format no longer drop the selection;source/format/handle/sluglive in the URL and create Back/Forward history. Sources: a single palette and the account's full Favorites (guests are told Favorites needs an account; public export works signed-out). Image (PNG/SVG) and Code (CSS variables, CSS OKLCH, Tailwind, JSON) with correct MIME types; SVG preview is the same data URL that downloads, PNG preview and download share one generated data URL. Loading/error states gate download/copy.marginBottom: 20pxonpanelActionsinExportPage.css.ts, separating the export action buttons from the preview/code — both Image and Code actions.main.tsxmoves fromBrowserRoutertocreateBrowserRouter+RouterProvidersouseBlockerdrives the unsaved-changes guard (Stay / Discard, pending saves, retained API errors,beforeunloadfallback). Route definitions stay inApp.main.py). No backend business logic changed.Validation
Run in this environment; full detail in
docs/releases/5.2.8-review.md. All CI checks green on the current head.vitest --coverage: 237/43, lines 81.75%.pytest192, coverage 88.92%; alembic agree; pip-audit clean.e2e/32 passed; visual 22/22 in the pinned image; Integration E2E (CI) passed.Deviations from the reference (each a separate commit)
role="img"a11y fix on the editor live preview — was<div aria-label>with no role (axearia-prohibited-attr, serious, on/palettes/new); accessible name preserved, no visual change.e2e/integration/stack.spec.tsclicks New palette before filling the create form — the 5.2.8 admin opens the editor in a non-modal panel, so the old inline-form assumption timed out CI's real-stack integration job. Same flowAdminPage.test.tsxdrives.transform 240ms cubic-bezier(0.22,1,0.36,1), disabled underprefers-reduced-motion) matching the theme toggle and admin tabs. Export baseline re-recorded.main, untouched by 5.2.8 code): the signed-in desktop header (~885px) only collapsed to the compact header below 680px and overflowed tablet widths — breakpoint raised to 900px; and the admin Palettes/Tags/Reports tab strip (3×104px) exceeded a 320px screen — at ≤480px it now fills the row and the tabs share the width. Post-fix: 0 horizontal overflow at every audited width, desktop visual baselines unchanged (22/22), 237 unit tests pass.All other code is the reference 5.2.8 verbatim.
Open gates / limits
No merge, deployment or tag is included.
🤖 Generated with Claude Code
https://claude.ai/code/session_01WUEj1ssxL5BHJN6m84rL7e