From 2b41c276165333030e4e34f4e0211f8400923885 Mon Sep 17 00:00:00 2001
From: Logan <logan@ljones.me>
Date: Thu, 13 Aug 2026 01:55:17 -0400
Subject: [PATCH] fix(a11y): let a clipped value be read, and name a row's own
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

a11y.24: `text-overflow: ellipsis` in 40+ places, and the four
highest-density lists were the ones with no `title` — the queue panel
(whose width is user-resizable down to MIN_WIDTH), track-info, every
track-list cell, and the playlist sidebar.

In track-list the attribute is on the *cell*, not on what is inside it:
the value may be a link, a highlighted search match or plain text, and
a tooltip is inherited by descendants either way. One binding rather
than three, and the same value the accessor already computed.

a11y.32: every queue row's remove button was named "Remove from queue",
so a list whose entire purpose is which track is where had four
identically named controls.
---
 .../components/playlist-view/playlist-view.ts |  1 +
 .../src/components/queue-panel/queue-panel.ts | 14 ++++--
 .../src/components/track-info/track-info.ts   |  6 ++-
 .../src/components/track-list/track-list.ts   |  6 ++-
 frontend/test/components/aria-tail.test.ts    | 44 +++++++++++++++++++
 .../test/components/queue-reorder.test.ts     | 35 ++++++++++++++-
 6 files changed, 99 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/playlist-view/playlist-view.ts b/frontend/src/components/playlist-view/playlist-view.ts
index 5a951b7..775d94f 100644
--- a/frontend/src/components/playlist-view/playlist-view.ts
+++ b/frontend/src/components/playlist-view/playlist-view.ts
@@ -1786,6 +1786,7 @@ export class PlaylistView extends ViewLifecycleMixin(LitElement) {
                         : html`
                               <span
                                   class="playlist-name"
+                                  title=${entry.summary.Name}
                               >
                                   ${entry.summary
                                       .Name}
diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts
index 78d2746..6453424 100644
--- a/frontend/src/components/queue-panel/queue-panel.ts
+++ b/frontend/src/components/queue-panel/queue-panel.ts
@@ -1595,6 +1595,13 @@ export class QueuePanel
 
         const artUrl = track.coverArtPath || '';
 
+        // The panel's width is user-resizable down to MIN_WIDTH, so
+        // both of these are routinely clipped (a11y.24) — and the
+        // remove button is one of every row, named identically
+        // (a11y.32).
+        const title = this.getDisplayTitle(track);
+        const artist = track.artist || 'Unknown Artist';
+
         // No inline closures — all events delegated via data-index
         // on the virtualizer element (see firstUpdated).
         return html`
@@ -1620,16 +1627,17 @@ export class QueuePanel
                 </span>
                 ${artUrl ? html`<div class="track-art"><img src="${artUrl}" alt="" loading="lazy" /></div>` : nothing}
                 <div class="track-details">
-                    <span class="track-title">
-                        ${trackLink(this.getDisplayTitle(track), track.album, track.releaseGroupMbid, track.recordingMbid, undefined, track.artist)}
+                    <span class="track-title" title=${title}>
+                        ${trackLink(title, track.album, track.releaseGroupMbid, track.recordingMbid, undefined, track.artist)}
                     </span>
-                    <span class="track-artist">
+                    <span class="track-artist" title=${artist}>
                         ${artistLink(track.artist, track.artistMbid) || 'Unknown Artist'}
                     </span>
                 </div>
                 <button
                     class="remove-button"
                     title="Remove from queue"
+                    aria-label="Remove ${title} from queue"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="14" height="14">
                         ${svg`<path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>`}
diff --git a/frontend/src/components/track-info/track-info.ts b/frontend/src/components/track-info/track-info.ts
index f617f23..b208ab9 100644
--- a/frontend/src/components/track-info/track-info.ts
+++ b/frontend/src/components/track-info/track-info.ts
@@ -118,10 +118,12 @@ export class TrackInfo extends LitElement {
             ${showCover ? this.renderCoverArt() : nothing}
             <div class="text">
                 ${displayTitle
-                    ? html`<span class="title">${displayTitle}</span>`
+                    ? html`<span class="title" title=${displayTitle}
+                          >${displayTitle}</span
+                      >`
                     : nothing}
                 ${secondaryParts
-                    ? html`<span class="secondary"
+                    ? html`<span class="secondary" title=${secondaryParts}
                           >${secondaryParts}</span
                       >`
                     : nothing}
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index 11aa5d6..424ab62 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -1839,8 +1839,12 @@ export class TrackList
                     display = albumLink(track.Album, track.ReleaseGroupMBID, display as any, track.ArtistName);
                 }
 
+                // `title` on the cell rather than on whatever is inside
+                // it: the value may be a link, a highlighted match or
+                // plain text, and a tooltip is inherited by descendants
+                // either way (a11y.24).
                 return html`
-                    <div role="gridcell" class=${classMap({
+                    <div role="gridcell" title=${val} class=${classMap({
                         cell: true,
                         'cell-center': centered,
                         'cell-right': !centered && col.align === 'right',
diff --git a/frontend/test/components/aria-tail.test.ts b/frontend/test/components/aria-tail.test.ts
index 511cf29..ba31564 100644
--- a/frontend/test/components/aria-tail.test.ts
+++ b/frontend/test/components/aria-tail.test.ts
@@ -15,6 +15,7 @@ import type { LitElement } from 'lit';
 import '@components/track-list/track-list';
 import '@components/artists-view/artists-view';
 import '@components/genres-view/genres-view';
+import '@components/track-info/track-info';
 import { emit, stub, flush, resetHarness } from '@test/support/harness';
 import { Events } from '../../src/events';
 import { fixture, shadow, shadowAll } from '@test/support/render';
@@ -191,3 +192,46 @@ describe('a selectable grid is a listbox, not a row of buttons', () => {
     expect(list!.getAttribute('aria-multiselectable')).toBe('true');
   });
 });
+
+describe('a clipped value is readable somewhere', () => {
+  beforeEach(async () => {
+    resetHarness();
+    searchStore.setTerm('');
+    stub('library.Library.GetAllTracks', TRACKS);
+    stub('library.Library.GetAllAlbums', []);
+    emit(Events.LibraryScanComplete);
+  });
+
+  it('gives every track-list cell the value it may be clipping', async () => {
+    const el = await fixture<LitElement>('track-list');
+
+    sized(el);
+    await settle(el);
+
+    const titles = shadowAll(el, '.track-row [role="gridcell"].cell').map((c) =>
+      c.getAttribute('title'),
+    );
+
+    // `a11y.24`: `text-overflow: ellipsis` in 40+ places, and the
+    // highest-density lists were the ones without a `title`. The
+    // attribute is on the cell rather than on what is inside it,
+    // because the value may be a link or a highlighted match and a
+    // tooltip is inherited by descendants either way.
+    expect(titles.length).toBeGreaterThan(0);
+    expect(titles).toContain('Departure');
+    expect(titles.every((t) => t !== null && t !== '')).toBe(true);
+  });
+
+  it('gives track-info its own title and secondary line', async () => {
+    const el = await fixture<LitElement>('track-info', {
+      trackTitle: 'An Exhaustively Overlong Track Name',
+      artist: 'Aurora Fields',
+    });
+
+    await el.updateComplete;
+
+    expect(shadow(el, '.title')?.getAttribute('title'))
+      .toBe('An Exhaustively Overlong Track Name');
+    expect(shadow(el, '.secondary')?.getAttribute('title')).toBeTruthy();
+  });
+});
diff --git a/frontend/test/components/queue-reorder.test.ts b/frontend/test/components/queue-reorder.test.ts
index e60d5f2..75a8542 100644
--- a/frontend/test/components/queue-reorder.test.ts
+++ b/frontend/test/components/queue-reorder.test.ts
@@ -19,7 +19,7 @@ import { describe, expect, it, beforeEach } from 'vitest';
 import '@components/queue-panel/queue-panel';
 import type { QueuePanel } from '@components/queue-panel/queue-panel';
 import { Events } from '../../src/events';
-import { emit, calls, flush, lastArgs } from '@test/support/harness';
+import { emit, calls, flush, lastArgs, resetHarness } from '@test/support/harness';
 import { fixture, shadow, shadowAll } from '@test/support/render';
 import type { QueueTrack } from '@store/queue-store';
 
@@ -170,3 +170,36 @@ describe('<queue-panel> keyboard reorder', () => {
     expect(calls().some((c) => c.path.includes('Move'))).toBe(false);
   });
 });
+
+describe('a queue row says which track its controls act on', () => {
+  beforeEach(() => {
+    resetHarness();
+  });
+
+  it('names each remove button after its own track', async () => {
+    const el = await panelWithQueue();
+
+    const labels = shadowAll(el, '.remove-button').map((b) =>
+      b.getAttribute('aria-label'),
+    );
+
+    // `a11y.32`: `title="Remove from queue"` on every row is a name
+    // that never identifies which track — four identical buttons in a
+    // list whose whole purpose is the order.
+    expect(labels.slice(0, 4)).toEqual([
+      'Remove First from queue',
+      'Remove Second from queue',
+      'Remove Third from queue',
+      'Remove Fourth from queue',
+    ]);
+  });
+
+  it('gives the title and artist a tooltip, since the panel is resizable', async () => {
+    const el = await panelWithQueue();
+
+    // `a11y.24` calls this one acute: MIN_WIDTH is narrow enough that
+    // both lines clip routinely, and nothing else can show the value.
+    expect(shadow(el, '.track-title')?.getAttribute('title')).toBe('First');
+    expect(shadow(el, '.track-artist')?.getAttribute('title')).toBe('Artist');
+  });
+});