From e6368dedf6550f52840c6b8fe15289825461f6e5 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:33:28 +0000
Subject: [PATCH 1/3] feat: add keyboard navigation to section roadmap scroll
 area

---
 .Jules/palette.md                                      | 3 +++
 apps/desktop/src/features/workspace/SectionRoadmap.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index bb0f82a6..556b245c 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -9,3 +9,6 @@
 ## 2026-06-13 - Added screen reader text for tooltip divs
 **Learning:** When using `title` attributes on non-interactive elements like icon-only `div`s for tooltips, screen readers might not announce them properly because they aren't focusable. The visual tooltip is not enough for accessibility.
 **Action:** Always add a visually hidden `<span className="sr-only">[Tooltip Text]</span>` inside non-interactive elements that rely on a `title` attribute so that screen readers have text content to announce.
+## 2026-06-18 - Added keyboard accessibility to scrollable regions
+**Learning:** Horizontally scrollable regions (like the `SectionRoadmap` component) are not accessible to keyboard-only users unless they can receive focus. Keyboard users must be able to focus the container to scroll its content using arrow keys.
+**Action:** For proper keyboard accessibility in custom scrollable regions, always include `tabIndex={0}`, an appropriate `aria-label`, `role="region"`, and explicit focus visible styling (e.g., `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300`).
diff --git a/apps/desktop/src/features/workspace/SectionRoadmap.tsx b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
index 593311c6..0d7957e3 100644
--- a/apps/desktop/src/features/workspace/SectionRoadmap.tsx
+++ b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
@@ -77,7 +77,12 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
         <span className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">{t("sectionRoadmapScrollHint")}</span>
       </div>
 
-      <div className="hide-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 pt-2">
+      <div
+        className="hide-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 pt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 focus-visible:rounded-xl"
+        role="region"
+        tabIndex={0}
+        aria-label={t("sectionRoadmapTitle")}
+      >
         {song.sections.map((section) => (
           <Card
             key={section.id}

From 9a1982336b9a5fd1d44bda26b31f650ba76b3eaa Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 18 Jun 2026 11:51:48 +0000
Subject: [PATCH 2/3] feat: add keyboard navigation to section roadmap scroll
 area


From 36eb2a9dec74df44a8321f13d57d22c2a7fd30aa Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Thu, 18 Jun 2026 21:22:30 +0900
Subject: [PATCH 3/3] fix: label section roadmap region

---
 apps/desktop/src/features/workspace/SectionRoadmap.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/features/workspace/SectionRoadmap.tsx b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
index 0d7957e3..8f9ad0c1 100644
--- a/apps/desktop/src/features/workspace/SectionRoadmap.tsx
+++ b/apps/desktop/src/features/workspace/SectionRoadmap.tsx
@@ -1,5 +1,5 @@
 import type { RehearsalSong, RehearsalRole } from "@bandscope/shared-types";
-import { useMemo } from "react";
+import { useId, useMemo } from "react";
 import { createTranslator, detectPreferredLocale } from "../../i18n";
 import { ConfidenceBadge } from "./ConfidenceBadge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
@@ -15,6 +15,7 @@ interface SectionRoadmapProps {
 
 /** Documented. */
 export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadmapProps) {
+  const sectionRoadmapTitleId = useId();
   const locale = useMemo(() => detectPreferredLocale(), []);
   const t = useMemo(() => createTranslator(locale), [locale]);
 
@@ -70,7 +71,7 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
   return (
     <div className="mt-6 space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="flex items-center text-xl font-black tracking-tight text-white">
+        <h2 id={sectionRoadmapTitleId} className="flex items-center text-xl font-black tracking-tight text-white">
           <Music2 className="mr-2 size-5 text-cyan-300" aria-hidden="true" />
           {t("sectionRoadmapTitle")}
         </h2>
@@ -78,10 +79,10 @@ export function SectionRoadmap({ song, activeRole, onSongUpdate }: SectionRoadma
       </div>
 
       <div
-        className="hide-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto pb-6 pt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 focus-visible:rounded-xl"
+        className="hide-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto rounded-xl pb-6 pt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300"
         role="region"
         tabIndex={0}
-        aria-label={t("sectionRoadmapTitle")}
+        aria-labelledby={sectionRoadmapTitleId}
       >
         {song.sections.map((section) => (
           <Card