fix: Additional Phase 2 accessibility fixes (5 errors fixed)

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)
This commit is contained in:
Justin Edmund 2025-11-24 03:35:00 -08:00
parent d8c5cacb59
commit 4ae51e8d5f
2 changed files with 18 additions and 4 deletions

View file

@ -211,7 +211,13 @@
{#if dev} {#if dev}
<div class="debug-panel" class:minimized={isMinimized}> <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> <h3>Debug Panel</h3>
<button class="minimize-btn" aria-label={isMinimized ? 'Expand' : 'Minimize'}> <button class="minimize-btn" aria-label={isMinimized ? 'Expand' : 'Minimize'}>
{isMinimized ? '▲' : '▼'} {isMinimized ? '▲' : '▼'}
@ -289,7 +295,15 @@
{#each albums as album} {#each albums as album}
{@const albumId = `${album.artist.name}:${album.name}`} {@const albumId = `${album.artist.name}:${album.name}`}
<div class="album-item" class:playing={album.isNowPlaying} class:expanded={expandedAlbumId === albumId}> <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-content">
<div class="album-info"> <div class="album-info">
<span class="name">{album.name}</span> <span class="name">{album.name}</span>

View file

@ -127,8 +127,8 @@
onmouseenter={isClickable ? handleMouseEnter : undefined} onmouseenter={isClickable ? handleMouseEnter : undefined}
onmouseleave={isClickable ? handleMouseLeave : undefined} onmouseleave={isClickable ? handleMouseLeave : undefined}
style="transform: {transform};" style="transform: {transform};"
role={isClickable ? 'button' : 'article'} role={isClickable ? 'button' : undefined}
tabindex={isClickable ? 0 : -1} {...(isClickable ? { tabindex: 0 } : {})}
> >
<div class="project-logo" style="background-color: {backgroundColor}"> <div class="project-logo" style="background-color: {backgroundColor}">
{#if svgContent} {#if svgContent}