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:
parent
d8c5cacb59
commit
4ae51e8d5f
2 changed files with 18 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue