fix(a11y): mark the playing row with a shape, not only a colour

a11y.22, WCAG 1.4.1: `.track-row.active` was a background tint and a
text colour, and the row markup carried no aria-current either — so a
colour-blind user could not find the playing row and AT had no signal
at all. The queue panel had aria-current from Phase 1 and the same
colour-only visual.

A triangle drawn in each row's own left padding by `::before`. It is a
shape that is present or absent, and it costs no layout: track-list's
grid columns are computed from the host width, so a marker in the flow
would move every cell on the playing row and nothing else.

Both directions are asserted in both tiers. A marker that renders on
every row satisfies "the playing row has one" for free, which is this
plan's oldest rule.

And one thing the reproduction found: a track started from the *list*
leaves the queue's currentIndex at -1, so the panel has no current row
in that flow at all. Pre-existing, and the reason this looked broken
the first time it was checked in the running app.

frontend/src/components/queue-panel/queue-panel.ts

@@ -378,6 +378,22 @@ export class QueuePanel
             color: var(--yj-accent-text, #ffd43b);
         }
 
+        /* a11y.22, the same rule as track-list one panel over: the
+           playing row was a tint and a text colour and nothing else.
+           The triangle lives in the row's own 16px left padding, so it
+           is a shape that is present or absent and the flex row does
+           not move. */
+        .track-item.active::before {
+            content: '';
+            position: absolute;
+            left: 5px;
+            top: 50%;
+            transform: translateY(-50%);
+            border-left: 5px solid var(--yj-accent-text, #ffd43b);
+            border-top: 4px solid transparent;
+            border-bottom: 4px solid transparent;
+        }
+
         .track-art {
             width: 32px;
             height: 32px;

frontend/src/components/track-list/track-list.ts

@@ -1002,6 +1002,7 @@ export class TrackList
     }
 
     .track-row {
+      position: relative;
       display: grid;
       grid-template-columns: var(--grid-cols);
       font-size: var(--yj-text-sm);
@@ -1042,6 +1043,24 @@ export class TrackList
       color: var(--yj-accent-text, #ffd43b);
     }
 
+    /* a11y.22: the playing row was a background tint and a text colour
+       and nothing else, so a colour-blind user could not find it
+       (WCAG 1.4.1). A triangle drawn in the row's own 8px left padding
+       is a *shape* that is present or absent, and it costs no layout:
+       the grid columns are computed from the host width and every one
+       of them would have had to move for a marker in the flow. Sized
+       to that padding rather than to the glyph a font would give. */
+    .track-row.active::before {
+      content: '';
+      position: absolute;
+      left: 1px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left: 5px solid currentColor;
+      border-top: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+    }
+
     .track-row.selected.active {
       background-color: var(--yj-selection-bg, rgba(100, 160, 255, 0.15));
     }
@@ -1808,6 +1827,7 @@ export class TrackList
         role="row"
         aria-rowindex=${index + 1}
         aria-selected=${selected}
+        aria-current=${active ? 'true' : 'false'}
         tabindex=${index === this.focusedIndex ? 0 : -1}
         draggable="true"
         data-index=${index}