fix(web): a11y + reactivity warnings (paying down accumulated warnings)
Cleans up the 8 svelte-check warnings I deferred in prior CI runs.
Two distinct categories — handling them differently:
REAL REACTIVITY BUGS — fixed:
- AlbumMenu.svelte / ArtistMenu.svelte: cachedTracks initialized
from the `tracks` prop only at component creation. When the menu
is reused across rows (operator opens menu on one album, then
another), the cache from the first open serves stale tracks.
Fix: initialize cachedTracks to null; ensureTracks() reads the
current `tracks` prop on each call before falling through to
the network fetch.
INTENTIONAL PATTERNS LINT FLAGGED — suppressed with explanatory
comments:
- AlbumMenu / ArtistMenu / PlaylistCard menu containers: the
onclick={(e) => e.stopPropagation()} is a guard against the
window-level "any click closes the menu" listener — not
user-facing interaction. A paired keyboard handler is
intentionally absent (Escape-to-close lives on svelte:window
onkeydown). Suppressed a11y_click_events_have_key_events with
explanatory comments.
- CompactTrackCard overlay div: catches clicks on its inner
LikeButton + queue button so they don't bubble to the wrapping
play-card button. Inner buttons carry their own keyboard
handling. Suppressed both a11y_click_events_have_key_events and
a11y_no_static_element_interactions.
- theme.svelte.ts module-scope `_resolved = $state(resolve(_theme))`:
module-init reads _theme to seed _resolved; subsequent updates
go through setTheme() and the matchMedia listener. $derived
doesn't apply at module scope. Suppressed state_referenced_locally
with an explanatory comment.
Promised in the prior fix-forward: "I'll fix bugs when I see them
or open a follow-up task with a specific name, not park them in an
umbrella." Following through.
This commit is contained in:
@@ -28,6 +28,12 @@ function applyToDOM(resolved: ResolvedTheme): void {
|
||||
}
|
||||
|
||||
let _theme = $state<ThemePreference>(readPref());
|
||||
// svelte-ignore state_referenced_locally
|
||||
// Module-scope state with manual sync — _theme is read once at module
|
||||
// init to seed _resolved; subsequent updates flow through setTheme()
|
||||
// (which writes both) and the matchMedia listener (which writes
|
||||
// _resolved when prefers-color-scheme flips). Not a missed-reactivity
|
||||
// case; $derived doesn't apply at module scope here.
|
||||
let _resolved = $state<ResolvedTheme>(resolve(_theme));
|
||||
|
||||
export const theme = {
|
||||
|
||||
Reference in New Issue
Block a user