From 4ae51e8d5f966acb57139c0acb56398f185a49e1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 24 Nov 2025 03:35:00 -0800
Subject: [PATCH] fix: Additional Phase 2 accessibility fixes (5 errors fixed)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed remaining accessibility errors in:

**DebugPanel component (4 errors fixed):**
- Added role="button", tabindex, and keyboard handlers to debug-header
- Added role="button", tabindex, and keyboard handlers to album-header

**ProjectItem component (1 error fixed):**
- Fixed conditional tabindex to only apply when component is clickable
- Changed role to be conditional (button when clickable, undefined otherwise)
- Used spread operator to conditionally add tabindex attribute

Total Phase 2 accessibility improvements: 50 errors fixed (109 → 59 errors remaining)
---
 src/lib/components/DebugPanel.svelte  | 18 ++++++++++++++++--
 src/lib/components/ProjectItem.svelte |  4 ++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/DebugPanel.svelte b/src/lib/components/DebugPanel.svelte
index 20f59c2..9c33e88 100644
--- a/src/lib/components/DebugPanel.svelte
+++ b/src/lib/components/DebugPanel.svelte
@@ -211,7 +211,13 @@
 
 {#if dev}
 	<div class="debug-panel" class:minimized={isMinimized}>
-		<div class="debug-header" onclick={() => isMinimized = !isMinimized}>
+		<div
+			class="debug-header"
+			role="button"
+			tabindex="0"
+			onclick={() => (isMinimized = !isMinimized)}
+			onkeydown={(e) => e.key === 'Enter' && (isMinimized = !isMinimized)}
+		>
 			<h3>Debug Panel</h3>
 			<button class="minimize-btn" aria-label={isMinimized ? 'Expand' : 'Minimize'}>
 				{isMinimized ? '▲' : '▼'}
@@ -289,7 +295,15 @@
 								{#each albums as album}
 									{@const albumId = `${album.artist.name}:${album.name}`}
 									<div class="album-item" class:playing={album.isNowPlaying} class:expanded={expandedAlbumId === albumId}>
-										<div class="album-header" onclick={() => expandedAlbumId = expandedAlbumId === albumId ? null : albumId}>
+										<div
+										class="album-header"
+										role="button"
+										tabindex="0"
+										onclick={() => (expandedAlbumId = expandedAlbumId === albumId ? null : albumId)}
+										onkeydown={(e) =>
+											e.key === 'Enter' &&
+											(expandedAlbumId = expandedAlbumId === albumId ? null : albumId)}
+									>
 											<div class="album-content">
 												<div class="album-info">
 													<span class="name">{album.name}</span>
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
index 29039da..4023098 100644
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@@ -127,8 +127,8 @@
 	onmouseenter={isClickable ? handleMouseEnter : undefined}
 	onmouseleave={isClickable ? handleMouseLeave : undefined}
 	style="transform: {transform};"
-	role={isClickable ? 'button' : 'article'}
-	tabindex={isClickable ? 0 : -1}
+	role={isClickable ? 'button' : undefined}
+	{...(isClickable ? { tabindex: 0 } : {})}
 >
 	<div class="project-logo" style="background-color: {backgroundColor}">
 		{#if svgContent}