未验证 提交 e70e35a7 编写于 作者: J Joe Haddad 提交者: GitHub

Elements with `role=link` should open on [Enter] (#12460)

上级 11404551
......@@ -20,6 +20,37 @@ const Dialog: React.FC<DialogProps> = 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 (
<div
ref={onDialog}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册