From 5f32d1657f8aa91d05cfe78a0418546450b82a23 Mon Sep 17 00:00:00 2001
From: Nils Briggen <nilsbriggen@gmail.com>
Date: Fri, 12 Jun 2026 01:23:41 +0200
Subject: [PATCH] a11y: probability bars carry their numbers for screen readers

The model/market split stays readable when the numeric triple is
hidden on narrow screens (title + aria-label on the bar row).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/features/scoreboard/ScoreboardPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/scoreboard/ScoreboardPage.tsx b/src/features/scoreboard/ScoreboardPage.tsx
index cff66fb..ff75998 100644
--- a/src/features/scoreboard/ScoreboardPage.tsx
+++ b/src/features/scoreboard/ScoreboardPage.tsx
@@ -13,8 +13,9 @@ const pct = (x: number) => `${Math.round(x * 100)}%`;
 
 function ProbTriple({ label, probs, tone }: { label: string; probs: MatchProbs; tone: 'model' | 'market' }) {
   const color = tone === 'model' ? 'bg-accent' : 'bg-gold';
+  const split = `${pct(probs.home)} / ${pct(probs.draw)} / ${pct(probs.away)}`;
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2" title={`${label}: ${split}`} aria-label={`${label}: ${split}`}>
       <span className={cn('w-12 shrink-0 text-[11px] font-bold uppercase tracking-wide', tone === 'model' ? 'text-accent' : 'text-gold')}>{label}</span>
       <div className="flex h-2 flex-1 overflow-hidden rounded-full bg-elevated">
         <div className={color} style={{ width: pct(probs.home) }} />