feat(ui): link trust downgrade warnings to version diffs

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"
     />

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>

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)
     })
   })