diff --git a/packages/wallet-webui/src/ui/OverflowMenu.tsx b/packages/wallet-webui/src/ui/OverflowMenu.tsx index 54fb5d93c..84b872dd0 100644 --- a/packages/wallet-webui/src/ui/OverflowMenu.tsx +++ b/packages/wallet-webui/src/ui/OverflowMenu.tsx @@ -12,11 +12,20 @@ export function OverflowMenu(props: { }) { const [open, setOpen] = useState(false); const container = useRef(null); + const trigger = useRef(null); + const menu = useRef(null); useEffect(() => { if (!open) return; + // A menu takes focus when it opens and hands it back to its button when + // it closes from the keyboard or a choice, so focus is never lost with + // the removed items. + menu.current?.querySelector('[role="menuitem"]')?.focus(); const closeOnEscape = (event: KeyboardEvent) => { - if (event.key === "Escape") setOpen(false); + if (event.key !== "Escape") return; + if (menu.current?.contains(document.activeElement)) + trigger.current?.focus(); + setOpen(false); }; const closeOutside = (event: PointerEvent) => { if (!container.current?.contains(event.target as Node)) setOpen(false); @@ -32,6 +41,7 @@ export function OverflowMenu(props: { return (