From 023733927689b4902e773b566a7211e2a6f39055 Mon Sep 17 00:00:00 2001
From: Ben Rollin <ben.rollin@clever.com>
Date: Fri, 3 May 2024 19:59:29 -0700
Subject: [PATCH] improve lobby accessibility

---
 ui/lobby/src/view/correspondence.ts |  1 +
 ui/lobby/src/view/pools.ts          | 23 +++++++++++++++--------
 ui/lobby/src/view/realTime/list.ts  |  1 +
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/lobby/src/view/correspondence.ts b/ui/lobby/src/view/correspondence.ts
index 2c541936a1bb5..fd44d603587c2 100644
--- a/ui/lobby/src/view/correspondence.ts
+++ b/ui/lobby/src/view/correspondence.ts
@@ -13,6 +13,7 @@ function renderSeek(ctrl: LobbyController, seek: Seek): VNode {
     {
       key: seek.id,
       attrs: {
+        role: 'button',
         title:
           seek.action === 'joinSeek'
             ? noarg('joinTheGame') + ' - ' + perfNames[seek.perf.key]
diff --git a/ui/lobby/src/view/pools.ts b/ui/lobby/src/view/pools.ts
index fa3bd54403815..db41d3293e32c 100644
--- a/ui/lobby/src/view/pools.ts
+++ b/ui/lobby/src/view/pools.ts
@@ -23,18 +23,25 @@ export function render(ctrl: LobbyController) {
     .map(pool => {
       const active = !!member && member.id === pool.id,
         transp = !!member && !active;
-      return h('div', { class: { active, transp: !active && transp }, attrs: { 'data-id': pool.id } }, [
-        h('div.clock', `${pool.lim}+${pool.inc}`),
-        active && member.range && ctrl.opts.showRatings
-          ? h('div.range', member.range.replace('-', '–'))
-          : h('div.perf', pool.perf),
-        active ? spinner() : null,
-      ]);
+      return h(
+        'div',
+        {
+          class: { active, transp: !active && transp },
+          attrs: { role: 'button', 'data-id': pool.id },
+        },
+        [
+          h('div.clock', `${pool.lim}+${pool.inc}`),
+          active && member.range && ctrl.opts.showRatings
+            ? h('div.range', member.range.replace('-', '–'))
+            : h('div.perf', pool.perf),
+          active ? spinner() : null,
+        ],
+      );
     })
     .concat(
       h(
         'div.custom',
-        { class: { transp: !!member }, attrs: { 'data-id': 'custom' } },
+        { class: { transp: !!member }, attrs: { role: 'button', 'data-id': 'custom' } },
         ctrl.trans.noarg('custom'),
       ),
     );
diff --git a/ui/lobby/src/view/realTime/list.ts b/ui/lobby/src/view/realTime/list.ts
index 1cbedf713c25d..8e08ecd7b6829 100644
--- a/ui/lobby/src/view/realTime/list.ts
+++ b/ui/lobby/src/view/realTime/list.ts
@@ -15,6 +15,7 @@ function renderHook(ctrl: LobbyController, hook: Hook) {
       key: hook.id,
       class: { disabled: !!hook.disabled },
       attrs: {
+        role: 'button',
         title: hook.disabled
           ? ''
           : hook.action === 'join'