fix(web): a11y on /requests aria-labels when titles are absent

Album- and track-kind requests can have null album_title/track_title (the
type allows it). Previously aria-label rendered 'Cancel request for —' which
is meaningless to a screen reader. Fall back to 'this album by <artist>' /
'this track by <artist>' so the cancel/listen buttons stay disambiguable.
This commit is contained in:
2026-04-29 22:29:07 -04:00
parent ad904afaf6
commit dd86ffca94
+10 -2
View File
@@ -35,6 +35,14 @@
return r.track_title ?? '—';
}
// Used in aria-labels — '—' is meaningless to screen readers, so when a
// title is missing fall back to a generic-but-intelligible phrase.
function rowAccessibleName(r: LidarrRequest): string {
if (r.kind === 'artist') return r.artist_name;
if (r.kind === 'album') return r.album_title ?? `this album by ${r.artist_name}`;
return r.track_title ?? `this track by ${r.artist_name}`;
}
// Keep the meta line short and readable. We always lead with the artist,
// then a relative-ish date — locale formatting is good enough for v1
// and keeps tests deterministic without pinning Intl.RelativeTimeFormat.
@@ -103,7 +111,7 @@
{#if r.status === 'pending'}
<button
type="button"
aria-label={`Cancel request for ${rowTitle(r)}`}
aria-label={`Cancel request for ${rowAccessibleName(r)}`}
class="inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm text-text-secondary hover:bg-surface-hover"
onclick={() => onCancel(r.id)}
>
@@ -112,7 +120,7 @@
{:else if r.status === 'completed' && href}
<a
{href}
aria-label={`Listen to ${rowTitle(r)}`}
aria-label={`Listen to ${rowAccessibleName(r)}`}
class="inline-flex items-center gap-1 text-sm text-accent hover:underline"
>
<Music2 size={16} strokeWidth={1} /> Listen