fix: SW-2443 per-variant disabled treatment for legible contrast - #209
Open
boramyi-ts wants to merge 2 commits into
Open
fix: SW-2443 per-variant disabled treatment for legible contrast#209boramyi-ts wants to merge 2 commits into
boramyi-ts wants to merge 2 commits into
Conversation
Replace the blanket disabled:opacity-50 (which failed AA text contrast on every variant and left the transparent variants indistinguishable from enabled) with a neutral muted disabled treatment per variant: solids and outline get a muted fill, outline keeps a muted border, ghost/link use muted text. Adds a DisabledContrast story asserting opacity is no longer the mechanism and every variant clears 4.5:1. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
boramyi-ts
temporarily deployed
to
artifactory-prod
September 9, 2026 15:21 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![unblocked[bot]](https://avatars.githubusercontent.com/in/166219?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ No issues found
About Unblocked
Unblocked has been set up to automatically review your team's pull requests to identify genuine bugs and issues.
📖 Documentation — Learn more in our docs.
💬 Ask questions — Mention @unblocked to request a review or summary, or ask follow-up questions.
👍 Give feedback — React to comments with 👍 or 👎 to help us improve.
⚙️ Customize — Adjust settings in your preferences.
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SW-2443 — Button disabled state: legible, consistent contrast
Jira: SW-2443
Buttonapplied a blanketdisabled:opacity-50to every variant. On the soliddefaultthat's fine, but at half opacity the transparent variants (outline/ghost/link) and thedestructivetint stay colored and barely separate from their enabled state — and, measured, the faded label drops below the AA text-contrast threshold on every variant.Change: drop the blanket opacity fade; give each variant a neutral muted disabled treatment instead:
default/secondary/destructive→bg-muted+text-muted-foregroundoutline→ muted border + faintbg-muted/40+text-muted-foregroundghost/link→text-muted-foreground(no fill;linkalso drops its underline)Disabled now reads as clearly "off," stays legible, and looks consistent across variants.
Before / After
opacity-50)Measured text-vs-fill contrast, disabled state:
All variants clear AA (≥ 4.5:1) after the change, in both themes.
Tests
New
DisabledContraststory + play test asserts, for every variant, that the disabled button no longer relies on opacity (opacity === 1) and that measured text-vs-fill contrast is ≥ 4.5:1 (a regression guard against the opacity fade returning). Full Button play suite passes (7/7) incl. the automatic axe check; typecheck + lint clean. Zephyr id to be generated viazephyr_sync.Consumer impact
Every disabled Button in the kit changes appearance (fade → neutral). No API change.
🤖 Generated with Claude Code