From 7f0cadcbb1f24df12bee091d5156e3cbf67f51e4 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Tue, 28 Jul 2026 05:02:13 +0200
Subject: [PATCH] fix(studio): drop aria-modal from the non-modal shortcuts
 popup

The panel does not trap focus and leaves the rest of the editor operable,
so aria-modal would tell assistive tech the whole app is inert while it is
open. role=dialog plus aria-controls and Escape is the correct non-modal
disclosure shape.
---
 packages/studio/src/player/components/ShortcutsPanel.test.tsx | 4 +++-
 packages/studio/src/player/components/ShortcutsPanel.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/studio/src/player/components/ShortcutsPanel.test.tsx b/packages/studio/src/player/components/ShortcutsPanel.test.tsx
index 95ab9c1ea..31d5b0f9f 100644
--- a/packages/studio/src/player/components/ShortcutsPanel.test.tsx
+++ b/packages/studio/src/player/components/ShortcutsPanel.test.tsx
@@ -150,7 +150,9 @@ describe("ShortcutsPanel", () => {
 
     expect(panelId).not.toBeNull();
     expect(panel?.getAttribute("role")).toBe("dialog");
-    expect(panel?.getAttribute("aria-modal")).toBe("true");
+    // Non-modal on purpose: focus is not trapped and the editor behind stays
+    // operable, so aria-modal would lie to assistive tech about inertness.
+    expect(panel?.getAttribute("aria-modal")).toBeNull();
     expect(panel?.id).toBe(panelId);
   });
 });
diff --git a/packages/studio/src/player/components/ShortcutsPanel.tsx b/packages/studio/src/player/components/ShortcutsPanel.tsx
index 9eb5e72c7..d36336e41 100644
--- a/packages/studio/src/player/components/ShortcutsPanel.tsx
+++ b/packages/studio/src/player/components/ShortcutsPanel.tsx
@@ -170,7 +170,9 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
         <div
           id={shortcutsPanelId}
           role="dialog"
-          aria-modal="true"
+          // Deliberately NOT aria-modal. This is a non-modal disclosure: focus is
+          // not trapped and the rest of the editor stays operable, so claiming
+          // modality would make assistive tech treat the whole app as inert.
           className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto"
           style={{
             background: "#161618",