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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user