Stop link buttons claiming a pressed state, and lift tab contrast

A Button rendered as a link emitted aria-pressed="", which is not allowed
on a link and fails an accessibility check on every page that uses one
for a secondary action. A link has no pressed state, so the attribute is
gone from that branch; a real button still carries it.

An unselected tab used the muted text colour, which does not reach 4.5:1
against the tab strip at this size. It now blends back toward the text
colour, and the selected tab still reads as selected through its surface,
accent and shadow.

The visual contract manifest is regenerated to match.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5 committed 2026-09-18 16:29:05 +05:30
1 parent 2d9797856d
commit b34930f8f6
3 files changed
+31 -26

No files matched your search

+6 -1
View File
@@ -246,7 +246,12 @@ component Tabs {
border: 0;
border-radius: var(--wrn-radius-sm);
background: transparent;
color: var(--wrn-color-text-muted);
/*
Muted alone does not clear 4.5:1 against the strip at this size, so an
unselected tab is blended back toward the text colour. The selected one
still stands out by its surface, accent and shadow.
*/
color: color-mix(in srgb, var(--wrn-color-text) 72%, var(--wrn-color-text-muted));
font: inherit;
font-size: 0.88rem;
font-weight: 600;
+1 -1
View File
@@ -40,6 +40,7 @@ label: string = "Button"
data-full-width="{fullWidth ? 'true' : 'false'}"
>
{#if as === "a" || (as === "" && href)}
<!-- No aria-pressed here: it states a toggle button's state, and a link has none. -->
<a
{...attrs}
href="{disabled || loading ? '' : href}"
@@ -49,7 +50,6 @@ label: string = "Button"
aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
aria-disabled="{disabled || loading}"
aria-busy="{loading}"
aria-pressed="{ariaPressed}"
aria-expanded="{ariaExpanded}"
aria-controls="{ariaControls}"
tabindex="{disabled || loading ? '-1' : '0'}"