From 6bed829e4851018e3cdd1a5c8ed541a88971f917 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Thu, 3 Sep 2026 16:12:54 +0000
Subject: [PATCH 1/2] fix songbook transpose readout width collapsing mobile
 controls bar (#5999)

---
 client/src/pages/SongBookViewer.jsx      | 4 +++-
 client/src/pages/SongBookViewer.test.jsx | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/SongBookViewer.jsx b/client/src/pages/SongBookViewer.jsx
index 0ccf07b208..5f1329ba44 100644
--- a/client/src/pages/SongBookViewer.jsx
+++ b/client/src/pages/SongBookViewer.jsx
@@ -944,7 +944,9 @@ export default function SongBookViewer() {
                   <Minus size={16} />
                 </button>
                 <span className="min-w-[3.5rem] text-center text-sm text-gray-300 font-mono" title="Transpose (semitones)" role="status" aria-live="polite" aria-atomic="true">
-                  Transpose {transpose > 0 ? `+${transpose}` : transpose} semitones
+                  <span className="sr-only">Transpose </span>
+                  <span aria-hidden="true">{transpose > 0 ? `+${transpose}` : transpose}</span>
+                  <span className="sr-only"> semitones</span>
                 </span>
                 <button type="button" onClick={() => setTranspose(transpose + 1)} className={ctrlBtnClass} aria-label={`Transpose up (currently ${transpose > 0 ? '+' : ''}${transpose} semitones)`} title="Transpose up (])">
                   <Plus size={16} />
diff --git a/client/src/pages/SongBookViewer.test.jsx b/client/src/pages/SongBookViewer.test.jsx
index b88133a9fb..29095704d8 100644
--- a/client/src/pages/SongBookViewer.test.jsx
+++ b/client/src/pages/SongBookViewer.test.jsx
@@ -377,6 +377,9 @@ E|--3-----|`;
       const statuses = screen.getAllByRole('status');
       expect(statuses.some((status) => status.textContent === 'Transpose 0 semitones')).toBe(true);
       expect(screen.getByRole('button', { name: /Transpose up \(currently 0 semitones\)/ })).toBeTruthy();
+      // Visible offset stays numeric-only so the control keeps its compact width (#5999).
+      const transposeStatus = statuses.find((status) => status.textContent === 'Transpose 0 semitones');
+      expect(transposeStatus.querySelector('[aria-hidden="true"]').textContent).toBe('0');
 
       fireEvent.click(screen.getByRole('button', { name: /Transpose up \(currently 0/ }));
       expect(screen.getAllByRole('status').some((status) => status.textContent === 'Transpose +1 semitones')).toBe(true);

From be677707a4e812e3dcdd74b72a253f23a80ab750 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Thu, 3 Sep 2026 16:14:34 +0000
Subject: [PATCH 2/2] keep transpose offset in the accessible name for
 live-region announcements (#5999)

---
 client/src/pages/SongBookViewer.jsx      | 2 +-
 client/src/pages/SongBookViewer.test.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/SongBookViewer.jsx b/client/src/pages/SongBookViewer.jsx
index 5f1329ba44..fc88bc7ab9 100644
--- a/client/src/pages/SongBookViewer.jsx
+++ b/client/src/pages/SongBookViewer.jsx
@@ -945,7 +945,7 @@ export default function SongBookViewer() {
                 </button>
                 <span className="min-w-[3.5rem] text-center text-sm text-gray-300 font-mono" title="Transpose (semitones)" role="status" aria-live="polite" aria-atomic="true">
                   <span className="sr-only">Transpose </span>
-                  <span aria-hidden="true">{transpose > 0 ? `+${transpose}` : transpose}</span>
+                  <span>{transpose > 0 ? `+${transpose}` : transpose}</span>
                   <span className="sr-only"> semitones</span>
                 </span>
                 <button type="button" onClick={() => setTranspose(transpose + 1)} className={ctrlBtnClass} aria-label={`Transpose up (currently ${transpose > 0 ? '+' : ''}${transpose} semitones)`} title="Transpose up (])">
diff --git a/client/src/pages/SongBookViewer.test.jsx b/client/src/pages/SongBookViewer.test.jsx
index 29095704d8..622e2748da 100644
--- a/client/src/pages/SongBookViewer.test.jsx
+++ b/client/src/pages/SongBookViewer.test.jsx
@@ -379,7 +379,7 @@ E|--3-----|`;
       expect(screen.getByRole('button', { name: /Transpose up \(currently 0 semitones\)/ })).toBeTruthy();
       // Visible offset stays numeric-only so the control keeps its compact width (#5999).
       const transposeStatus = statuses.find((status) => status.textContent === 'Transpose 0 semitones');
-      expect(transposeStatus.querySelector('[aria-hidden="true"]').textContent).toBe('0');
+      expect(transposeStatus.querySelector('span:not(.sr-only)').textContent).toBe('0');
 
       fireEvent.click(screen.getByRole('button', { name: /Transpose up \(currently 0/ }));
       expect(screen.getAllByRole('status').some((status) => status.textContent === 'Transpose +1 semitones')).toBe(true);