add keyboard support to lobby pools

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,
       ),
     );