Skip to content

chore: upgrade vite-plus to 0.1.20 and fix surfaced a11y violations - #2697

Merged
serhalp merged 1 commit into
npmx-dev:mainfrom
fengmk2:update-vite-plus-0.1.20
May 9, 2026
Merged

chore: upgrade vite-plus to 0.1.20 and fix surfaced a11y violations#2697
serhalp merged 1 commit into
npmx-dev:mainfrom
fengmk2:update-vite-plus-0.1.20

Conversation

@fengmk2

@fengmk2fengmk2 commented May 9, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

🧭 Context

📚 Description

Upgrade vite-plus and related packages from 0.1.16 to 0.1.20 (latest stable), and fix the 14 WCAG AA color-contrast violations that the upgrade exposed in test/nuxt/a11y.spec.ts.

The strongest candidate for the behavior change is upstream vitest-dev/vitest#10049 ("fix(browser): spread user server options into browser Vite server in project"), shipped in vitest@4.1.4.
Before that fix, createBrowserServer silently dropped user server.* options, so the browser-mode Vite server didn't fully serve UnoCSS-generated CSS and axe defaulted to plain black-on-white.
After it, styles render correctly and axe surfaces pre-existing contrast issues. vite-plus 0.1.16 bundles vitest 4.1.2 (without the fix); 0.1.20 bundles 4.1.5 (with it).
The violations are real and pre-date this PR — the upgrade only stops masking them.

Source-level a11y fixes:

  • LinkBase: disabled buttons drop opacity-50 + text-fg/bg-fg (3.69:1) for text-fg-muted / bg-fg-muted tokens (~8:1) and add aria-disabled.
  • DiffSidebarPanel + DiffMobileSidebarDrawer: stats and semver badges use text-{green,red,yellow,purple}-700 dark:text-{...}-400, matching the existing Alert.vue convention.
  • DiffSkipBlock: drop redundant opacity-50; text-fg-muted on bg-bg-muted already meets contrast.
  • DiffLine: line-number cell uses text-fg-subtle (5.5:1+) instead of opacity-50 over inherited text (3.69:1).
  • main.css: light-mode --accent default oklch(0.5 0.16 247.27) so text-accent on bg-fg/10 reaches ~5:1 (was 4.19); user-set --accent-color overrides remain unaffected.

Upgrade vite-plus and related packages from 0.1.16 to 0.1.20 (latest
stable), and fix the 14 WCAG AA color-contrast violations that the
upgrade exposed in test/nuxt/a11y.spec.ts.
The strongest candidate for the behavior change is upstream
vitest-dev/vitest#10049 ("fix(browser): spread user server options into
browser Vite server in project"), shipped in vitest@4.1.4. Before that
fix, createBrowserServer silently dropped user server.* options, so the
browser-mode Vite server didn't fully serve UnoCSS-generated CSS and
axe defaulted to plain black-on-white. After it, styles render
correctly and axe surfaces pre-existing contrast issues. vite-plus
0.1.16 bundles vitest 4.1.2 (without the fix); 0.1.20 bundles 4.1.5
(with it). The violations are real and pre-date this PR — the upgrade
only stops masking them.
Source-level a11y fixes:
- LinkBase: disabled buttons drop opacity-50 + text-fg/bg-fg (3.69:1)
for text-fg-muted / bg-fg-muted tokens (~8:1) and add aria-disabled.
- DiffSidebarPanel + DiffMobileSidebarDrawer: stats and semver badges
use text-{green,red,yellow,purple}-700 dark:text-{...}-400, matching
the existing Alert.vue convention.
- DiffSkipBlock: drop redundant opacity-50; text-fg-muted on
bg-bg-muted already meets contrast.
- DiffLine: line-number cell uses text-fg-subtle (5.5:1+) instead of
opacity-50 over inherited text (3.69:1).
- main.css: light-mode --accent default oklch(0.5 0.16 247.27) so
text-accent on bg-fg/10 reaches ~5:1 (was 4.19); user-set
--accent-color overrides remain unaffected.
@vercel

vercelBot commented May 9, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devReadyReadyPreview, CommentMay 9, 2026 9:57am
npmx.devReadyReadyPreview, CommentMay 9, 2026 9:57am
1 Skipped Deployment
ProjectDeploymentActionsUpdated (UTC)
npmx-lunariaIgnoredIgnoredMay 9, 2026 9:57am

Request Review

@coderabbitai

coderabbitaiBot commented May 9, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Walkthrough

Light theme accent colours are refined from Oklch 0.53 to 0.5 lightness, with corresponding UI updates across diff viewer components removing reduced-opacity styling in favour of bolder colour variants and improved semantic markup. Build dependencies are upgraded to matching versions.

Changes

Theme Refinement and Component Styling

Layer / File(s)Summary
Theme Colour Palette
app/assets/main.css
Light theme --accent and --swatch-sky Oklch lightness adjusted from 0.53 to 0.5 for darker accent definition.
Diff Line and Skip Block Styling
app/components/Diff/Line.vue, app/components/Diff/SkipBlock.vue
Line numbers and skip block elements remove opacity-50 styling, adopting text-fg-subtle and centre-alignment for clearer visual hierarchy.
Diff Sidebar Stats and Badge Styling
app/components/Diff/MobileSidebarDrawer.vue, app/components/Diff/SidebarPanel.vue
File change counts and semver badges transition from text-*-500 to text-*-700 with dark:text-*-400 variants for increased visual prominence.
Link Component Disabled State
app/components/Link/Base.vue
Disabled link states gain aria-disabled="true", remove opacity-50, and adopt muted background/text colour classes instead of generic opacity reduction.
Dependency Updates
package.json, pnpm-workspace.yaml
vite-plus and vitest (aliasing @voidzero-dev/vite-plus-test) updated from 0.1.16 to 0.1.20; workspace overrides synchronised.

Suggested reviewers

  • alexdln
  • ghostdevv
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title accurately summarises the two main changes: upgrading vite-plus to 0.1.20 and fixing accessibility violations exposed by the upgrade.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Description check✅ PassedThe pull request description clearly explains the upgrade of vite-plus to 0.1.20 and comprehensively details the WCAG AA color-contrast fixes applied across multiple components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@socket-security

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

DiffPackageSupply Chain
Security
VulnerabilityQualityMaintenanceLicense
Updated@​voidzero-dev/​vite-plus-test@​0.1.16 ⏵ 0.1.2076-51007799+1100

View full report

@github-actions

Copy link
Copy Markdown

e18e dependency analysis

No dependency warnings found.

@codecov

codecovBot commented May 9, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 76.92308% with 3 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing linesPatch %Lines
app/components/Diff/SidebarPanel.vue57.14%3 Missing ⚠️

📢 Thoughts on this report? Let us know!

@serhalpserhalp left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thank you for this!

@serhalp
serhalp added this pull request to the merge queueMay 9, 2026
Merged via the queue into npmx-dev:main with commit 636d8adMay 9, 2026
29 checks passed
@github-actionsgithub-actionsBot mentioned this pull request May 9, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@fengmk2@serhalp