From 7281d75727b3d07af6fc366057734cc6a0f3146d Mon Sep 17 00:00:00 2001
From: Etan Joseph Heyman <etan@heyman.net>
Date: Mon, 23 Feb 2026 04:06:20 +0200
Subject: [PATCH] =?UTF-8?q?nightshift:=20fix=20a11y=20=E2=80=94=20add=20Sp?=
 =?UTF-8?q?ace=20key=20support=20for=20video=20toggle=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Elements with role="button" must handle both Enter and Space keys per
WCAG 2.1 keyboard accessibility guidelines. The mobile video collapse
toggle only responded to Enter, leaving keyboard-only users unable to
activate it with Space. Also adds preventDefault() to avoid page
scrolling on Space press.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/routes/song.$songId.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/routes/song.$songId.tsx b/src/routes/song.$songId.tsx
index f0a6480..0c9a030 100644
--- a/src/routes/song.$songId.tsx
+++ b/src/routes/song.$songId.tsx
@@ -702,7 +702,12 @@ function SongPageContent({ songId }: SongPageContentProps) {
                 role="button"
                 tabIndex={0}
                 onClick={handleVideoCollapsedToggle}
-                onKeyDown={(e) => e.key === 'Enter' && handleVideoCollapsedToggle()}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleVideoCollapsedToggle();
+                  }
+                }}
                 className="w-full flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700 hover:bg-gray-700/50 transition-colors cursor-pointer"
               >
                 <div className="flex items-center gap-3 min-w-0 flex-1">