diff --git a/packages/wallet-webui/src/ui/DemoBanner.tsx b/packages/wallet-webui/src/ui/DemoBanner.tsx index 4b0c92ac1..9018e4394 100644 --- a/packages/wallet-webui/src/ui/DemoBanner.tsx +++ b/packages/wallet-webui/src/ui/DemoBanner.tsx @@ -12,11 +12,18 @@ export function DemoBanner(props: { const [open, setOpen] = useState(false); const [confirmReset, setConfirmReset] = useState(false); const menuRef = useRef(null); + const triggerRef = useRef(null); useEffect(() => { if (!open) return; + // Move into the menu when it opens and back to its button when it closes + // from the keyboard or a choice, so focus is not lost with the items. + menuRef.current?.querySelector('[role="menuitem"]')?.focus(); const close = (event: KeyboardEvent) => { - if (event.key === "Escape") setOpen(false); + if (event.key !== "Escape") return; + if (menuRef.current?.contains(document.activeElement)) + triggerRef.current?.focus(); + setOpen(false); }; const outside = (event: PointerEvent) => { if (!menuRef.current?.contains(event.target as Node)) setOpen(false); @@ -56,6 +63,7 @@ export function DemoBanner(props: { )}