From d5fb60bfe2dc2ac5f24415bc5572a9674de01eca Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Oct 2026 10:09:43 +0000
Subject: [PATCH] fix(ui): use a focusable div for the lyrics resizer and hide
 the decorative lyrics icon

A button with role=separator mixes button activation semantics into the
resizer; a tabbable div keeps it a plain focusable separator. The lyrics
toolbar icon is decorative since its button already has an aria-label.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016L1sBqsygMkdhf583gTEnE
---
 ui/src/audioplayer/LyricsSidebar.jsx | 4 ++--
 ui/src/audioplayer/PlayerToolbar.jsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/audioplayer/LyricsSidebar.jsx b/ui/src/audioplayer/LyricsSidebar.jsx
index ae4995f32..27d7cd169 100644
--- a/ui/src/audioplayer/LyricsSidebar.jsx
+++ b/ui/src/audioplayer/LyricsSidebar.jsx
@@ -256,8 +256,8 @@ const LyricsSidebar = ({
       aria-hidden={!interactive}
       inert={interactive ? undefined : ''}
     >
-      <button
-        type="button"
+      <div
+        tabIndex={0}
         ref={resizerRef}
         className={classes.resizer}
         data-testid="lyrics-sidebar-resizer"
diff --git a/ui/src/audioplayer/PlayerToolbar.jsx b/ui/src/audioplayer/PlayerToolbar.jsx
index e146bc238..adecd803c 100644
--- a/ui/src/audioplayer/PlayerToolbar.jsx
+++ b/ui/src/audioplayer/PlayerToolbar.jsx
@@ -130,6 +130,7 @@ const PlayerToolbar = ({
           aria-pressed={lyricsActive}
         >
           <RiFileMusicLine
+            aria-hidden="true"
             className={!isDesktop ? classes.mobileIcon : undefined}
           />
         </IconButton>