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>
This commit is contained in:
@@ -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) }} />
|
||||
|
||||
Reference in New Issue
Block a user