fix: address skeleton/nav-progress review findings
Correctness: - MangaGridSkeleton: covers rendered 0px tall because height="0" is a definite height that defeats aspect-ratio. Skeleton gains an `aspectRatio` prop (height stays auto) so the 2/3 cover box is reserved and the grid no longer shifts when real covers load. - Move `.manga-card` layout into global tokens.css (it was scoped to MangaCard, so the skeleton's cards inherited none of it). Both consumers now share one definition. - NavProgress: rebuilt as an idle/loading/done state machine. It now completes to full and fades on settle (was snapping away instantly), restarts the trickle when one navigation supersedes another (was parking frozen near 90%), animates transform/opacity only with will-change gated to the active phase, and hides itself in reader fullscreen. - Skeleton: text-variant height resolved in one place (no inline style shadowing a stylesheet rule); shimmer gradient/animation gated behind prefers-reduced-motion: no-preference so reduced motion shows a flat block. A11y: - Home loading region announces via visually-hidden text instead of an aria-label a live region won't reliably read. Cleanup: - Drop the fragile :first-child selector and index-keying ceremony in MangaGridSkeleton; simplify Skeleton's style construction. Tests: adds regression guards for the 0px cover collapse, the aspect-ratio box, text-height defaulting, and the nav-progress complete/restart phases. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -660,7 +660,8 @@
|
||||
</Sheet>
|
||||
|
||||
{#if loading}
|
||||
<div data-testid="loading" role="status" aria-label="Loading manga">
|
||||
<div data-testid="loading" role="status">
|
||||
<span class="visually-hidden">Loading manga…</span>
|
||||
<MangaGridSkeleton />
|
||||
</div>
|
||||
{:else if error}
|
||||
@@ -975,6 +976,18 @@
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user