From 3be2bb0f200dc4431f5ed8fb7ab5aff614d111d7 Mon Sep 17 00:00:00 2001
From: drawliin <itshoussameddine@gmail.com>
Date: Sat, 24 Oct 2026 19:01:30 +0000
Subject: [PATCH] feat(ui): link trust downgrade warnings to version diffs

---
 app/components/Package/Install/Dropdown.vue   |  1 +
 .../Package/SecurityDowngradeAlert.vue        | 11 ++++++
 test/nuxt/a11y.spec.ts                        | 38 ++++++++++++++++---
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Install/Dropdown.vue b/app/components/Package/Install/Dropdown.vue
index d93eb784a8..d5ebca4aef 100644
--- a/app/components/Package/Install/Dropdown.vue
+++ b/app/components/Package/Install/Dropdown.vue
@@ -77,6 +77,7 @@ onPrehydrate(el => {
     <h2 :id="headingId" class="sr-only">{{ $t('package.get_started.title') }}</h2>
 
     <PackageSecurityDowngradeAlert
+      :package-name="packageName"
       :downgrade="publishSecurityDowngrade ?? null"
       :fallback-install-text="downgradeFallbackInstallText"
     />
diff --git a/app/components/Package/SecurityDowngradeAlert.vue b/app/components/Package/SecurityDowngradeAlert.vue
index 7bd2ddf91a..c0aca05692 100644
--- a/app/components/Package/SecurityDowngradeAlert.vue
+++ b/app/components/Package/SecurityDowngradeAlert.vue
@@ -2,6 +2,7 @@
 import type { PublishSecurityDowngrade } from '~/utils/publish-security'
 
 defineProps<{
+  packageName: string
   downgrade: PublishSecurityDowngrade | null
   fallbackInstallText?: string | null
 }>()
@@ -119,5 +120,15 @@ defineProps<{
         {{ fallbackInstallText }}
       </template>
     </p>
+    <LinkBase
+      v-if="downgrade.trustedVersion"
+      :to="diffRoute(packageName, downgrade.trustedVersion, downgrade.downgradedVersion)"
+      variant="button-secondary"
+      size="sm"
+      classicon="i-lucide:git-compare"
+      class="mt-3"
+    >
+      {{ $t('compare.file_changes') }}
+    </LinkBase>
   </div>
 </template>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index bb82b33d22..5847de4b1e 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -4074,21 +4074,47 @@ describe('component accessibility audits', () => {
   })
 
   describe('PackageSecurityDowngradeAlert', () => {
-    it('should have no accessibility violations', async () => {
+    it.each(['vue', '@nuxt/kit'])(
+      'links to the trusted-to-downgraded diff for %s without accessibility violations',
+      async packageName => {
+        const component = await mountSuspended(PackageSecurityDowngradeAlert, {
+          props: {
+            packageName,
+            downgrade: {
+              downgradedVersion: '2.0.0',
+              downgradedTrustLevel: 'none',
+              downgradedTrustedPublisher: true,
+              trustedVersion: '1.9.0',
+              trustedTrustLevel: 'provenance',
+            },
+            fallbackInstallText: 'Consider installing 1.9.0 instead.',
+          },
+        })
+        const link = component.get('a[href*="/diff/"]')
+        expect(link.text()).toBe('File Changes')
+        expect(link.attributes('href')).toBe(`/diff/${packageName}/v/1.9.0...2.0.0`)
+        const results = await runAxe(component)
+        expect(results.violations).toEqual([])
+      },
+    )
+
+    it('hides the diff link without a trusted version and hides the alert without a downgrade', async () => {
       const component = await mountSuspended(PackageSecurityDowngradeAlert, {
         props: {
+          packageName: 'vue',
           downgrade: {
             downgradedVersion: '2.0.0',
             downgradedTrustLevel: 'none',
-            downgradedTrustedPublisher: true,
-            trustedVersion: '1.9.0',
+            downgradedTrustedPublisher: false,
             trustedTrustLevel: 'provenance',
           },
-          fallbackInstallText: 'Consider installing 1.9.0 instead.',
         },
       })
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
+      expect(component.find('[role="alert"]').exists()).toBe(true)
+      expect(component.find('a[href*="/diff/"]').exists()).toBe(false)
+
+      await component.setProps({ downgrade: null })
+      expect(component.find('[role="alert"]').exists()).toBe(false)
     })
   })