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

Author: fengmk2

app/assets/main.css

@@ -95,11 +95,11 @@
   --border-subtle: oklch(0.922 0 0);
   --border-hover: oklch(0.715 0 0);
 
-  --accent: var(--accent-color, oklch(0.53 0.16 247.27));
+  --accent: var(--accent-color, oklch(0.5 0.16 247.27));
   --accent-muted: var(--accent-color, oklch(0.205 0 0));
 
   /* accent colors */
-  --swatch-sky: oklch(0.53 0.16 247.27);
+  --swatch-sky: oklch(0.5 0.16 247.27);
   --swatch-coral: oklch(0.56 0.17 10.75);
   --swatch-amber: oklch(0.58 0.18 46.34);
   --swatch-emerald: oklch(0.51 0.13 162.4);

app/components/Diff/Line.vue

@@ -84,7 +84,7 @@ const renderedSegments = computed(() =>
     <td :class="borderClasses" />
 
     <!-- Line number -->
-    <td class="tabular-nums text-center opacity-50 px-2 text-xs select-none w-12 shrink-0">
+    <td class="tabular-nums text-center text-fg-subtle px-2 text-xs select-none w-12 shrink-0">
       {{ line.type === 'delete' ? '–' : lineNumberNew }}
     </td>
 

app/components/Diff/MobileSidebarDrawer.vue

@@ -59,11 +59,17 @@ watch(open, value => {
         <div class="flex items-center justify-between gap-2 py-2 px-4">
           <div class="text-xs font-mono text-fg-muted flex items-center gap-2">
             <span class="flex items-center gap-1">
-              <span class="text-green-500">+{{ props.compare.stats.filesAdded }}</span>
+              <span class="text-green-700 dark:text-green-400"
+                >+{{ props.compare.stats.filesAdded }}</span
+              >
               <span class="text-fg-subtle">/</span>
-              <span class="text-red-500">-{{ props.compare.stats.filesRemoved }}</span>
+              <span class="text-red-700 dark:text-red-400"
+                >-{{ props.compare.stats.filesRemoved }}</span
+              >
               <span class="text-fg-subtle">/</span>
-              <span class="text-yellow-500">~{{ props.compare.stats.filesModified }}</span>
+              <span class="text-yellow-700 dark:text-yellow-400"
+                >~{{ props.compare.stats.filesModified }}</span
+              >
             </span>
             <span class="text-fg-subtle">•</span>
             <span>{{

app/components/Diff/SidebarPanel.vue

@@ -57,13 +57,13 @@ const filteredChanges = computed(() => {
 function getSemverBadgeClass(semverDiff: string | null | undefined): string {
   switch (semverDiff) {
     case 'major':
-      return 'bg-red-500/10 text-red-500'
+      return 'bg-red-500/10 text-red-700 dark:text-red-400'
     case 'minor':
-      return 'bg-yellow-500/10 text-yellow-500'
+      return 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400'
     case 'patch':
-      return 'bg-green-500/10 text-green-500'
+      return 'bg-green-500/10 text-green-700 dark:text-green-400'
     case 'prerelease':
-      return 'bg-purple-500/10 text-purple-500'
+      return 'bg-purple-500/10 text-purple-700 dark:text-purple-400'
     default:
       return 'bg-bg-muted text-fg-subtle'
   }
@@ -87,11 +87,15 @@ function handleFileSelect(file: FileChange) {
           </span>
           <div class="flex items-center gap-3 font-mono text-3xs">
             <span class="flex items-center gap-1">
-              <span class="text-green-500">+{{ compare.stats.filesAdded }}</span>
+              <span class="text-green-700 dark:text-green-400"
+                >+{{ compare.stats.filesAdded }}</span
+              >
               <span class="text-fg-subtle">/</span>
-              <span class="text-red-500">-{{ compare.stats.filesRemoved }}</span>
+              <span class="text-red-700 dark:text-red-400">-{{ compare.stats.filesRemoved }}</span>
               <span class="text-fg-subtle">/</span>
-              <span class="text-yellow-500">~{{ compare.stats.filesModified }}</span>
+              <span class="text-yellow-700 dark:text-yellow-400"
+                >~{{ compare.stats.filesModified }}</span
+              >
             </span>
             <span v-if="compare.dependencyChanges.length > 0" class="text-fg-muted">
               {{

app/components/Diff/SkipBlock.vue

@@ -12,11 +12,11 @@ defineProps<{
   <!-- Skip block row -->
   <tr class="h-10 font-mono bg-bg-muted text-fg-muted">
     <td />
-    <td class="opacity-50 select-none text-center">
+    <td class="select-none text-center">
       <span class="i-lucide:chevrons-up-down w-4 h-4" />
     </td>
     <td>
-      <span class="px-0 sticky inset-is-2 italic opacity-50">
+      <span class="px-0 sticky inset-is-2 italic">
         {{ content || $t('compare.lines_hidden', { count }, count) }}
       </span>
     </td>

app/components/Link/Base.vue

@@ -72,15 +72,16 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
 <template>
   <span
     v-if="disabled"
+    aria-disabled="true"
     :class="{
       'flex': block,
       'inline-flex': !block,
-      'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      'gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
-      'text-bg bg-fg': variant === 'button-primary',
-      'bg-transparent text-fg': variant === 'button-secondary',
+      'text-bg bg-fg-muted': variant === 'button-primary',
+      'bg-transparent text-fg-muted': variant === 'button-secondary',
     }"
     ><slot
   /></span>

package.json

@@ -108,7 +108,7 @@
     "validate-npm-package-name": "7.0.2",
     "virtua": "0.48.8",
     "vite-plugin-pwa": "1.2.0",
-    "vite-plus": "0.1.16",
+    "vite-plus": "0.1.20",
     "vue": "3.5.34",
     "vue-data-ui": "3.19.4",
     "vue-router": "5.0.4"
@@ -145,7 +145,7 @@
     "storybook-i18n": "catalog:storybook",
     "typescript": "6.0.2",
     "unplugin-vue-markdown": "30.0.0",
-    "vitest": "npm:@voidzero-dev/vite-plus-test@0.1.16",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@0.1.20",
     "vue-i18n-extract": "2.0.7",
     "vue-tsc": "3.2.6"
   },