diff --git a/ui/lobby/src/view/pools.ts b/ui/lobby/src/view/pools.ts index 583a74aa9007..f8d825f0ac99 100644 --- a/ui/lobby/src/view/pools.ts +++ b/ui/lobby/src/view/pools.ts @@ -1,21 +1,39 @@ -import { h, Hooks } from 'snabbdom'; +import { h, Hooks, VNode } from 'snabbdom'; import { spinnerVdom as spinner } from 'common/spinner'; -import { bind } from 'common/snabbdom'; import LobbyController from '../ctrl'; -export const hooks = (ctrl: LobbyController): Hooks => - bind( - 'click', - e => { - if (ctrl.redirecting) return; - const id = - (e.target as HTMLElement).dataset['id'] || - ((e.target as HTMLElement).parentNode as HTMLElement).dataset['id']; - if (id === 'custom') ctrl.setupCtrl.openModal('hook'); - else if (id) ctrl.clickPool(id); +const createHandler = (ctrl: LobbyController) => (e: Event) => { + if (ctrl.redirecting) return; + + if (e instanceof KeyboardEvent) { + if (e.key !== 'Enter' && e.key !== ' ') return; + e.preventDefault(); // Prevent page scroll on space + } + + const id = + (e.target as HTMLElement).dataset['id'] || + ((e.target as HTMLElement).parentNode as HTMLElement).dataset['id']; + if (id === 'custom') ctrl.setupCtrl.openModal('hook'); + else if (id) ctrl.clickPool(id); + + ctrl.redraw(); +}; + +export const hooks = (ctrl: LobbyController): Hooks => { + const handler = createHandler(ctrl); + return { + insert: (vnode: VNode) => { + const el = vnode.elm as HTMLElement; + el.addEventListener('click', handler); + el.addEventListener('keydown', handler); }, - ctrl.redraw, - ); + destroy: (vnode: VNode) => { + const el = vnode.elm as HTMLElement; + el.removeEventListener('click', handler); + el.removeEventListener('keydown', handler); + }, + }; +}; export function render(ctrl: LobbyController) { const member = ctrl.poolMember; @@ -27,7 +45,7 @@ export function render(ctrl: LobbyController) { 'div', { class: { active, transp }, - attrs: { role: 'button', 'data-id': pool.id }, + attrs: { role: 'button', 'data-id': pool.id, tabindex: '0' }, }, [ h('div.clock', `${pool.lim}+${pool.inc}`), @@ -41,7 +59,10 @@ export function render(ctrl: LobbyController) { .concat( h( 'div.custom', - { class: { transp: !!member }, attrs: { role: 'button', 'data-id': 'custom' } }, + { + class: { transp: !!member }, + attrs: { role: 'button', 'data-id': 'custom', tabindex: '0' }, + }, i18n.site.custom, ), );