diff --git a/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx b/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx index 10a190b0f6447e126cbfb65a8e79daa7f8f0eb2b..13a886b3915b7a0eab64da8c90307f133289b305 100644 --- a/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx +++ b/packages/react-dev-overlay/src/internal/components/Dialog/Dialog.tsx @@ -20,6 +20,37 @@ const Dialog: React.FC = function Dialog({ }, []) useOnClickOutside(dialog, onClose) + // Make HTMLElements with `role=link` accessible to be triggered by the + // keyboard, i.e. [Enter]. + React.useEffect(() => { + if (dialog == null) { + return + } + + const root = dialog.getRootNode() + // Always true, but we do this for TypeScript: + if (!(root instanceof ShadowRoot)) { + return + } + const shadowRoot = root + function handler(e: KeyboardEvent) { + const el = shadowRoot.activeElement + if ( + e.key === 'Enter' && + el instanceof HTMLElement && + el.getAttribute('role') === 'link' + ) { + e.preventDefault() + e.stopPropagation() + + el.click() + } + } + + shadowRoot.addEventListener('keydown', handler) + return () => shadowRoot.removeEventListener('keydown', handler) + }, [dialog]) + return (