ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): drop aria-modal from the non-modal shortcuts popup

Browse Source 
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.
This commit is contained in:
Miguel Angel Simon Sierra
2026-07-28 18:02:09 +02:00
parent aa2811642f
commit 7f0cadcbb1
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/player/components/ShortcutsPanel.test.tsx
+3 -1
View File
@@ -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);
});
});
packages/studio/src/player/components/ShortcutsPanel.tsx
+3 -1
View File
@@ -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",