feat: add a11y tests

Author: garthdw

test/nuxt/a11y.spec.ts

@@ -1,9 +1,9 @@
-import type { AxeResults, RunOptions } from 'axe-core'
-import type { VueWrapper } from '@vue/test-utils'
 import type { ColumnConfig, FilterChip } from '#shared/types/preferences'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import type { VueWrapper } from '@vue/test-utils'
 import 'axe-core'
+import type { AxeResults, RunOptions } from 'axe-core'
 import { afterEach, describe, expect, it } from 'vitest'
-import { mountSuspended } from '@nuxt/test-utils/runtime'
 
 // axe-core is a UMD module that exposes itself as window.axe in the browser
 declare const axe: {
@@ -58,7 +58,6 @@ import {
   AppFooter,
   AppHeader,
   BaseCard,
-  UserAvatar,
   BuildEnvironment,
   CallToAction,
   CodeDirectoryListing,
@@ -67,30 +66,33 @@ import {
   CodeViewer,
   CollapsibleSection,
   ColumnPicker,
+  CompareComparisonGrid,
   CompareFacetCard,
   CompareFacetRow,
   CompareFacetSelector,
-  CompareComparisonGrid,
   ComparePackageSelector,
   DateTime,
   DependencyPathPopup,
   FilterChips,
   FilterPanel,
   HeaderAccountMenu,
+  HeaderConnectorModal,
+  HeaderSearchBox,
   LicenseDisplay,
   LoadingSpinner,
-  PackageChartModal,
-  PackageClaimPackageModal,
-  HeaderConnectorModal,
   OrgMembersPanel,
   OrgOperationsQueue,
   OrgTeamsPanel,
   PackageAccessControls,
   PackageCard,
+  PackageChartModal,
+  PackageClaimPackageModal,
+  PackageCompatibility,
   PackageDependencies,
   PackageDeprecatedTree,
   PackageDownloadAnalytics,
   PackageInstallScripts,
+  PackageKeywords,
   PackageList,
   PackageListControls,
   PackageListToolbar,
@@ -108,6 +110,7 @@ import {
   PaginationControls,
   ProvenanceBadge,
   Readme,
+  SearchSuggestionCard,
   SettingsAccentColorPicker,
   SettingsBgThemePicker,
   SettingsToggle,
@@ -116,8 +119,7 @@ import {
   TooltipAnnounce,
   TooltipApp,
   TooltipBase,
-  HeaderSearchBox,
-  SearchSuggestionCard,
+  UserAvatar,
   VersionSelector,
   ViewModeToggle,
 } from '#components'
@@ -610,6 +612,49 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('PackageCompatibility', () => {
+    it('should have no accessibility violations without engines', async () => {
+      const component = await mountSuspended(PackageCompatibility, {
+        props: {},
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with engines', async () => {
+      const component = await mountSuspended(PackageCompatibility, {
+        props: {
+          engines: {
+            node: '>=14',
+            npm: '>=10',
+          },
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('PackageKeywords', () => {
+    it('should have no accessibility violations without keywords', async () => {
+      const component = await mountSuspended(PackageKeywords, {
+        props: {},
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations with keywords', async () => {
+      const component = await mountSuspended(PackageKeywords, {
+        props: {
+          keywords: ['keyword1', 'keyword2'],
+        },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('CodeViewer', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CodeViewer, {