Put one dealer button on the table

A poker table has one dealer button. This one drew nine. Every seat carried a puck: the real one in gold, and eight ghosts at 0.32 opacity that existed to be pressed. Measured on a nine-seat table -- eight pale discs, all eight showing the letter D, one of them the button. Finding it meant comparing nine identical shapes for the one that's gold, when it should be the only thing of its kind on the felt. The ghosts also sat on their neighbours. Every remaining "something important is covered" offender on a crowded table was a live seat covered by the seat-next-door's ghost puck: 844x390, 915x412, 360x640 and 640x360 each reported one, and they were all the same thing. And a screen reader heard nine buttons named "D". So a seat without the button doesn't draw one. Hovering a seat fades its slot in -- a preview of where the button would go, one click as before -- and on touch, where there is no hover, "Give the button" has been in the seat's long-press menu all along. Keyboard reaches it by focus, where the slot appears too. pointer-events matters as much as the opacity: an invisible puck that still took taps would be worse than a visible one. visible pucks 9 -> 1 at every size layout offenders 915x412 1->0, 360x640 1->0, 844x390 3->2, 640x360 3->2 clean viewports 4 of 9 -> 6 of 9 labels nine "D" -> "Ann has the dealer button" and "Give the dealer button to Ben" The audit now checks it, because this is a rule about the table rather than about CSS: one puck drawn, and no two announcing themselves the same way. Verified against the old behaviour put back -- it reports 9 and 9. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
2026-09-01 12:16:00 -06:00
parent 0c6cd55951
commit 784315f2ea
4 changed files with 69 additions and 7 deletions
@@ -174,8 +174,18 @@ const Render = {
            node.querySelector(".seatChairNumber").textContent = index + 1;

            const dealerChip = node.querySelector(".dealerChip");
-            dealerChip.classList.toggle("active", index === dealerIndex);
+            const hasButton = index === dealerIndex;
+            dealerChip.classList.toggle("active", hasButton);
            dealerChip.classList.toggle("hidden", !!this.state.dedicatedDealer);
+            // Every one of these announced itself as "D", so a screen reader heard a row
+            // of nine identical buttons and couldn't tell which seat held the real one.
+            // The label now says whose it is, or what pressing it would do.
+            const who = (player.name || "").trim() || `seat ${index + 1}`;
+            const chipLabel = hasButton
+                ? `${who} has the dealer button`
+                : `Give the dealer button to ${who}`;
+            dealerChip.setAttribute("aria-label", chipLabel);
+            dealerChip.title = chipLabel;
            // Tapping the puck is the same act as "Give the button" in the seat menu,
            // so it goes through the same hook — otherwise this one path would move
            // the button without moving the blinds that follow it.