From 0bd34544e52aed9df17b7dfcdcce71faa3d0f200 Mon Sep 17 00:00:00 2001
From: ScreenTinker <hello@screentinker.com>
Date: Tue, 21 Apr 2026 16:00:41 -0500
Subject: [PATCH] QA fixes: toast aria-live + scope playlist flex-wrap to
 mobile

- Toast now announces via role="status"/aria-live="polite" by default,
  and role="alert"/aria-live="assertive" for errors. Screen readers
  previously got nothing when notifications appeared.
- Move playlist-item flex-wrap:wrap from inline style into the
  @media (max-width: 768px) block so desktop rows don't wrap controls
  when the viewport is intermediate-narrow.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/css/main.css           | 1 +
 frontend/js/components/toast.js | 2 ++
 frontend/js/views/playlists.js  | 2 +-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/css/main.css b/frontend/css/main.css
index cd0ffb1..e0c0e0e 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -937,6 +937,7 @@ body {
     -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
   }
   .tab { white-space: nowrap; flex-shrink: 0; }
+  .playlist-item { flex-wrap: wrap; }
 
   /* Dashboard stats stack to single column */
   .dash-stats-row { flex-direction: column; }
diff --git a/frontend/js/components/toast.js b/frontend/js/components/toast.js
index 7dafdc9..966f9e6 100644
--- a/frontend/js/components/toast.js
+++ b/frontend/js/components/toast.js
@@ -2,6 +2,8 @@ export function showToast(message, type = 'info', duration = 4000) {
   const container = document.getElementById('toastContainer');
   const toast = document.createElement('div');
   toast.className = `toast ${type}`;
+  toast.setAttribute('role', type === 'error' ? 'alert' : 'status');
+  toast.setAttribute('aria-live', type === 'error' ? 'assertive' : 'polite');
   toast.innerHTML = `
     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       ${type === 'success' ? '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>' :
diff --git a/frontend/js/views/playlists.js b/frontend/js/views/playlists.js
index cf001a3..d4791d2 100644
--- a/frontend/js/views/playlists.js
+++ b/frontend/js/views/playlists.js
@@ -294,7 +294,7 @@ function renderItems(items) {
   }
 
   itemsEl.innerHTML = items.map((item, i) => `
-    <div class="playlist-item" data-item-id="${item.id}" data-index="${i}" draggable="true" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:grab;transition:border-color 0.15s;flex-wrap:wrap">
+    <div class="playlist-item" data-item-id="${item.id}" data-index="${i}" draggable="true" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:grab;transition:border-color 0.15s">
       <div style="color:var(--text-muted);font-size:12px;min-width:24px;text-align:center;user-select:none">${i + 1}</div>
       <div style="width:48px;height:36px;border-radius:4px;overflow:hidden;background:var(--bg-input);flex-shrink:0;display:flex;align-items:center;justify-content:center">
         ${item.thumbnail_path