From dd86ffca9491f2d60e6a91e21e3f0223c92f05ae Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 29 Apr 2026 22:29:07 -0400
Subject: [PATCH] fix(web): a11y on /requests aria-labels when titles are
 absent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/src/routes/requests/+page.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/requests/+page.svelte b/web/src/routes/requests/+page.svelte
index 72c0d6b9..3907cc8c 100644
--- a/web/src/routes/requests/+page.svelte
+++ b/web/src/routes/requests/+page.svelte
@@ -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