fix(web): put the SSE badge on the status variant so it clears the a11y contrast gate (#2318)
The first story to render a long-lived GET entry tripped axe on the filled orange badge (white on #f76707, 3.04:1); the light variant is no better (3.03:1). ThemeBadge already pins status + orange to a mid amber fill with black text for this reason. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01APKSYHGxXBUpnR7ErFiLJn Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
parent
d57801d7b3
commit
af7beab488
1 changed files with 12 additions and 1 deletions
|
|
@ -213,6 +213,17 @@ const SentinelTooltip = Tooltip.withProps({
|
|||
w: 280,
|
||||
});
|
||||
|
||||
// The long-lived-stream marker on a GET entry, on the `status` variant like
|
||||
// the status chip beside it. Amber cannot clear WCAG AA as either a filled
|
||||
// (white on orange, 3.04:1) or a light (orange on tint, 3.03:1) badge at this
|
||||
// size; `ThemeBadge` pins `status` + orange to a mid amber fill with black
|
||||
// text for exactly that reason, which is what the a11y gate needs the moment a
|
||||
// story renders one (#2318 added the first).
|
||||
const StreamBadge = Badge.withProps({
|
||||
color: "orange",
|
||||
variant: "status",
|
||||
});
|
||||
|
||||
const Base64Badge = Badge.withProps({
|
||||
size: "xs",
|
||||
color: "gray",
|
||||
|
|
@ -538,7 +549,7 @@ export function NetworkEntry({
|
|||
{entry.duration != null && (
|
||||
<DurationText>{formatDuration(entry.duration)}</DurationText>
|
||||
)}
|
||||
{isLongLivedStreamEntry(entry) && <Badge color="orange">SSE</Badge>}
|
||||
{isLongLivedStreamEntry(entry) && <StreamBadge>SSE</StreamBadge>}
|
||||
<Badge color={statusColor(entry)} variant="status">
|
||||
{statusLabel(entry)}
|
||||
</Badge>
|
||||
|
|
|
|||
Loading…
Reference in a new issue