fix(a11y): draw an unfavourited track as an outline, not a dimmer fill
`favCtrl.iconName` returned the solid glyph in both states, so "not a favourite" was a filled heart in a duller colour and the only thing separating the two states was hue. That fails outright for anyone who cannot tell the two colours apart (WCAG 1.4.1), and reads as "everything is a favourite" to everyone else. `iconFor(favorited)` returns the outline or the fill, and the nine `<wa-icon>` call sites split into the two cases they always were. The three that show a *state* -- the mini player, the phone's now-playing view, and the sidebar's marker for the favourites playlist itself -- pass it. The rest are context-menu items, which are actions rather than states and take the outline `iconName` still returns. `track-list` and `album-dropdown` already had this right, from inline SVG paths of their own; this is the same rule for the call sites that go through the icon library. `regular/star` is vendored to go with `regular/heart`, which was already there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MeQt5hgXg5YGoNZQ9ozG7L
This commit is contained in:
@@ -307,7 +307,7 @@ export class NowPlayingView extends LitElement {
|
||||
: `Add ${track.title} to ${this.favCtrl.playlistName}`}
|
||||
@click=${this.toggleFavorite}
|
||||
>
|
||||
<wa-icon name=${this.favCtrl.iconName}></wa-icon>
|
||||
<wa-icon name=${this.favCtrl.iconFor(favorited)}></wa-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -527,7 +527,7 @@ export class NowPlaying extends LitElement {
|
||||
)}
|
||||
>
|
||||
<wa-icon
|
||||
name=${this.favCtrl.iconName}
|
||||
name=${this.favCtrl.iconFor(isFav)}
|
||||
variant=${favVariant}
|
||||
></wa-icon>
|
||||
</button>
|
||||
|
||||
@@ -1756,7 +1756,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
|
||||
${entry.summary.ID === this.favCtrl.playlistId
|
||||
? html`<wa-icon
|
||||
class="playlist-icon"
|
||||
name=${this.favCtrl.iconName}
|
||||
name=${this.favCtrl.iconFor(true)}
|
||||
></wa-icon>`
|
||||
: entry.summary.IsSmart
|
||||
? html`<wa-icon
|
||||
|
||||
Reference in New Issue
Block a user