fix: dark-mode contrast for stock MUI components + self-explanatory spec tabs#9622
Merged
Conversation
…pec tabs MUI's palette must hold raw light-mode hexes (decomposeColor rejects CSS vars), so stock components rendered light-theme colors on dark: unselected tab labels at ~2.1:1, invisible dividers, wrong skeletons and alerts. MuiTab, MuiDivider, MuiSkeleton and MuiAlert are now wired to the CSS-var system. The spec-detail tabs also stop hiding the page's main content: index 0 (Code in detail mode, Spec on hub pages) starts open, the selected tab shows a collapse caret so the toggle behavior is discoverable, the quality tab reads "Quality 91" with an explanatory aria-label instead of a bare number, and tabs/panels got standard id/aria-controls wiring. Audit 2026-07-08 High#4 + High#5 + Low#1. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the frontend’s dark-mode visual consistency by routing a few stock MUI components through the app’s CSS-variable theme tokens, and refines the spec-detail tab UX/accessibility so the primary content is visible by default and tabs/panels have standard ARIA wiring.
Changes:
- Add MUI
styleOverridesforMuiTab,MuiDivider,MuiSkeleton, andMuiAlertto align stock components with the CSS-var theming system in dark mode. - Update
SpecTabsto default-open index 0 (Code in detail mode / Spec in overview), add a caret affordance for the “click again to collapse” behavior, and wireid/aria-controls↔aria-labelledbyviauseId. - Expand/update the
SpecTabstest suite to cover default-open behavior, collapse tracking, and ARIA pairing.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| CHANGELOG.md | Adds [Unreleased] entries for the dark-mode contrast fixes and SpecTabs UX/a11y updates. |
| app/src/theme/components.ts | Adds component-level MUI theme overrides to use CSS vars for better dark-mode contrast. |
| app/src/sections/spec-detail/SpecTabs/SpecTabs.test.tsx | Updates and grows tests for the new default-open, collapse, and ARIA behaviors. |
| app/src/sections/spec-detail/SpecTabs/md.tsx | Extends TabPanel to support tab↔panel id wiring. |
| app/src/sections/spec-detail/SpecTabs/index.tsx | Implements default-open tabs, caret affordance, and useId-based ARIA wiring; updates divider color token usage. |
| app/src/sections/spec-detail/RelatedSpecs.tsx | Updates divider border color to the CSS-var rule token for dark-mode consistency. |
…idden panels Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Comment on lines
19
to
+20
| <Collapse in={isOpen}> | ||
| <Box role="tabpanel" sx={{ pt: 2 }}> | ||
| <Box |
# Conflicts: # CHANGELOG.md
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
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.
Summary
decomposeColorrejectsvar(...)tokens — seepalette.ts), so stock components rendered light-theme colors on dark backgrounds: unselected tab labels at ~2.1:1, near-invisible dividers, wrong skeleton/alert surfaces.MuiTab,MuiDivider,MuiSkeleton, andMuiAlertnow carrystyleOverrideswired to the CSS-var system (--ink-soft/--rule/--bg-elevated), and the twoborderColor: 'divider'sx usages (SpecTabs, RelatedSpecs) usevar(--rule).▴caret as the affordance for the click-to-collapse toggle; the quality tab reads "Quality 91" (short form "91" on xs) with an explanatoryaria-labelinstead of an unexplained bare number.id/aria-controls↔aria-labelledbypairing between tabs and panels viauseId.Note: default-opening the Code tab means
tab_toggle open codeis no longer fired for the initial state — expect the event mix on/plotsanalytics to shift towardcloseevents forcode.Plan
agentic/audits/2026-07-08-product-ux.md (High#4, High#5, Low#1)
Test plan
yarn test(605 passed, SpecTabs 25/25),yarn type-check,yarn lint,yarn fm:check,yarn build— greentab_toggle close; quality tab shows "Quality 91" (desktop) / "★ 91" (mobile)aria-selected/aria-controls/aria-labelledbyverified in the live DOM