import { CHART_ANNOTATOR_SLOTS, type AnnotatorSlotName } from '~/utils/charts'
import { DEFAULT_FILTERS, type ColumnConfig, type FilterChip } from '#shared/types/preferences'
import { mountSuspended, registerEndpoint, mockNuxtImport } from '@nuxt/test-utils/runtime'
import { flushPromises, type VueWrapper } from '@vue/test-utils'
import 'axe-core'
import type { AxeResults, RunOptions } from 'axe-core'
import { afterEach, beforeEach, describe, expect, it, type MockInstance, vi } from 'vite-plus/test'
import { createLikesLeaderboardEntry } from '~~/test/fixtures/likes-leaderboard'

// axe-core is a UMD module that exposes itself as window.axe in the browser
declare const axe: {
  run: (context: Element, options?: RunOptions) => Promise<AxeResults>
}

mockNuxtImport('useCharts', original => vi.fn(original))

// Track mounted containers for cleanup
const mountedContainers: HTMLElement[] = []

const axeRunOptions: RunOptions = {
  // Only compute violations to reduce work per run
  resultTypes: ['violations'],
  // Disable rules that don't apply to isolated component testing
  rules: {
    // These rules check page-level concerns that don't apply to isolated components
    'landmark-one-main': { enabled: false },
    'region': { enabled: false },
    'page-has-heading-one': { enabled: false },
    // Duplicate landmarks are expected when testing multiple header/footer components
    'landmark-no-duplicate-banner': { enabled: false },
    'landmark-no-duplicate-contentinfo': { enabled: false },
    'landmark-no-duplicate-main': { enabled: false },
  },
}

/**
 * Run axe accessibility audit on a mounted component.
 * Mounts the component in an isolated container to avoid cross-test pollution.
 */
async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
  // Create an isolated container for this test
  const container = document.createElement('div')
  container.id = `test-container-${Date.now()}`
  document.body.appendChild(container)
  mountedContainers.push(container)

  // Clone the element into our isolated container
  const el = wrapper.element.cloneNode(true) as HTMLElement
  container.appendChild(el)

  // Run axe only on the isolated container
  return axe.run(container, axeRunOptions)
}

async function runAxeElements(elements: Array<Element | null | undefined>): Promise<AxeResults> {
  const container = document.createElement('div')
  container.id = `test-container-${Date.now()}`
  document.body.appendChild(container)
  mountedContainers.push(container)

  for (const element of elements) {
    if (!element) continue
    container.appendChild(element.cloneNode(true))
  }

  return axe.run(container, axeRunOptions)
}

// --- Console warning assertion --------------------------------------------------
// Fail any test that emits unexpected console.warn calls. This catches issues
// like missing/invalid props that would otherwise silently pass.
let warnSpy: MockInstance

// Patterns that are expected and safe to ignore in the test environment.
const allowedWarnings: RegExp[] = [
  // vue-i18n logs this when <i18n-t> is used outside a component-scoped i18n;
  // it falls back to the global scope and still renders correctly.
  /\[intlify\] Not found parent scope/,
  // mountSuspended wraps each component instance and calls expose() after
  // setup. For recursive components (e.g. DiffFileTree rendering child
  // DiffFileTree instances), this triggers a duplicate expose() call on the
  // inner wrapper. The warning does not affect test correctness.
  /expose\(\) should be called only once/,
]

beforeEach(() => {
  warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
})

afterEach(() => {
  // Collect unexpected warnings
  const unexpected = warnSpy.mock.calls.filter(
    args => !allowedWarnings.some(re => re.test(String(args[0]))),
  )
  warnSpy.mockRestore()

  if (unexpected.length > 0) {
    const msgs = unexpected.map(args => args.map(String).join(' ')).join('\n')
    throw new Error(`Test emitted unexpected console.warn:\n${msgs}`)
  }
})

// Clean up mounted containers after each test
afterEach(() => {
  for (const container of mountedContainers) {
    container.remove()
  }
  mountedContainers.length = 0
})

// VueUiXy is imported directly in <script setup>, so global stubs cannot override it.
// We mock the module itself to prevent vue-data-ui from mounting charts during tests
// (it relies on DOM measurements and causes runtime errors in Vitest / Playwright).
// This render-function stub avoids the Vue runtime-compiler warning and keeps slots working.
vi.mock('vue-data-ui/vue-ui-xy', () => {
  return {
    VueUiXy: defineComponent({
      name: 'VueUiXy',
      inheritAttrs: false,
      // Declare the props VueUiXy receives so they don't fall through to attrs.
      // Spreading `dataset` onto a DOM element triggers a Vue warning because
      // HTMLElement.dataset is a read-only getter.
      props: {
        dataset: { type: Array, default: () => [] },
        config: { type: Object, default: () => ({}) },
      },
      setup(_, { slots }) {
        return () => h('div', { 'data-test-id': 'vue-ui-xy-stub' }, slots.default?.() ?? [])
      },
    }),
  }
})

// VueUiHeatmap relies on browser measurements that are not
// available in isolated a11y tests. Keep the component's SVG slot rendered.
vi.mock('vue-data-ui/vue-ui-heatmap', () => {
  return {
    VueUiHeatmap: defineComponent({
      name: 'VueUiHeatmap',
      inheritAttrs: false,
      props: {
        dataset: { type: Array, default: () => [] },
        config: { type: Object, default: () => ({}) },
      },
      setup(props, { slots }) {
        return () => {
          const rows = props.dataset as Array<{ values: Array<number | null> }>
          const cells = rows.flatMap((row, rowIndex) =>
            row.values.map((value, columnIndex) => ({
              rowIndex,
              columnIndex,
              x: 48 + columnIndex * 12,
              y: 8 + rowIndex * 12,
              width: 11,
              height: 11,
              datapoint: { id: `${rowIndex}-${columnIndex}`, value },
            })),
          )

          return h('div', { 'data-test-id': 'vue-ui-heatmap-stub' }, [
            h(
              'svg',
              { 'role': 'img', 'aria-label': 'Daily downloads heatmap', 'viewBox': '0 0 720 160' },
              slots.svg?.({
                svg: {
                  cells,
                  drawingArea: { left: 40, bottom: 112 },
                  width: 720,
                  height: 160,
                },
              }) ?? [],
            ),
            slots.default?.() ?? [],
          ])
        }
      },
    }),
  }
})

vi.mock('~/composables/useCanGoBack', () => {
  return {
    useCanGoBack: () => shallowRef(true),
  }
})

// Import components from #components where possible
// For server/client variants, we need to import directly to test the specific variant
import {
  Alert,
  AppFooter,
  AppHeader,
  AppLogo,
  AppMark,
  AboutLogoImg,
  AboutLogoList,
  AboutGovernanceList,
  AuthorAvatar,
  AuthorList,
  BackButton,
  BlogPostFederatedArticles,
  BlogPostListCard,
  BlogPostWrapper,
  BlueskyComment,
  BlueskyComments,
  BaseCard,
  BlueskyPostEmbed,
  BuildEnvironment,
  ButtonBase,
  LandingIntroHeader,
  NoodleArtemisLogo,
  NoodleEmojiDayLogo,
  NoodleEmojiDayThemedLogo,
  NoodleKawaiiLogo,
  NoodleTransgenderVisibilityLogo,
  NoodleListCard,
  NoodleNodejsLogo,
  NoodlePressLogo,
  NoodlePride1Logo,
  NoodlePride2Logo,
  NoodleLens,
  NoodlePride3Logo,
  NoodleTetrisLogo,
  NoodleGifDayLogo,
  NoodleGifDayGifText,
  NoodleIojsNodejsLogo,
  NoodleBlenderLogo,
  NoodleBlenderArt,
  LinkBase,
  CallToAction,
  ChangelogCard,
  ChangelogSkeleton,
  ChangelogErrorMsg,
  CodeDirectoryListing,
  CodeFileTree,
  CodeHeader,
  CodeMobileTreeDrawer,
  CodeSkeletonLoader,
  CodeViewer,
  CopyToClipboardButton,
  CollapsibleSection,
  ColumnPicker,
  CompareComparisonGrid,
  CompareFacetCard,
  CompareFacetRow,
  CompareFacetSelector,
  CompareLineChart,
  ComparePackageSelector,
  CompareReplacementSuggestion,
  DateTime,
  DependencyPathPopup,
  DepsStatsDependencyList,
  DepsStatsDependencyStats,
  DepsStatsDependencyStatsPanel,
  DepsStatsPackageJsonUpload,
  FilterChips,
  FilterPanel,
  HeaderAccountMenu,
  HeaderConnectorModal,
  HeaderSearchBox,
  InstantSearch,
  InputBase,
  LicenseDisplay,
  LoadingSpinner,
  PackageProvenanceSection,
  OrgMembersPanel,
  OrgOperationsQueue,
  OrgTeamsPanel,
  PackageAccessControls,
  PackageCard,
  PackageClaimPackageModal,
  PackageCompatibility,
  PackageDependencies,
  PackageDeprecatedTree,
  PackageHeader,
  PackageInstallScripts,
  PackageKeywords,
  PackageList,
  PackageListControls,
  PackageListToolbar,
  PackageMaintainers,
  PackageInstallDownloadTarball,
  PackageInstallDropdown,
  PackageInstallAdditionalCommands,
  PackageSecurityDowngradeAlert,
  PackageManagerSelect,
  PackageMetricsBadges,
  PackagePlaygrounds,
  PackageReplacement,
  PackageSidebar,
  PackageSkeleton,
  PackageSkillsCard,
  PackageTable,
  PackageTableRow,
  PackageTimelineChartDepSizeTooltip,
  PackageTimelineChartDepSizeSvgSlot,
  PackageTimelineChartXyTooltip,
  PackageTimelineChartXySvgSlot,
  PackageVersions,
  PackageVulnerabilityTree,
  PaginationControls,
  ProgressBar,
  ProvenanceBadge,
  StagedPublishBadge,
  TrustedPublishingBadge,
  Readme,
  ReadmeTocDropdown,
  SearchProviderToggle,
  SearchSuggestionCard,
  SelectBase,
  SelectField,
  SettingsAccentColorPicker,
  SettingsBgThemePicker,
  SettingsFgThemePicker,
  SettingsToggle,
  TagStatic,
  TagRadioButton,
  TerminalExecute,
  TooltipAnnounce,
  TooltipApp,
  TooltipBase,
  UserAvatar,
  VersionSelector,
  ViewModeToggle,
  DiffFileTree,
  DiffHunk,
  DiffLine,
  DiffMobileSidebarDrawer,
  DiffSidebarPanel,
  DiffSkipBlock,
  DiffTable,
  DiffViewerPanel,
  PackageActionBar,
  PackageSelectionView,
  PackageSelectionCheckbox,
  PackageExternalLinks,
  LicenseChangeWarning,
  ChartSplitSparkline,
  ChartCopyPngButton,
  ChartAnnotatorIcon,
  ChartFullscreenIcon,
  TabRoot,
  TabList,
  TabItem,
  TabPanel,
  ButtonCopyMd,
} from '#components'

// Server variant components must be imported directly to test the server-side render
// The #components import automatically provides the client variant
import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
import CommandPaletteComponent from '~/components/CommandPalette.client.vue'
import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
import ToggleServer from '~/components/Settings/Toggle.server.vue'
import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
import PackageTrendsChart from '~/components/Package/TrendsChart.vue'
import DailyDownloadsHeatmap from '~/components/Package/DailyDownloadsHeatmap.vue'
import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
import FacetScatterChart from '~/components/Compare/FacetScatterChart.vue'
import PackageTimelineChart from '~/components/Package/TimelineChart.vue'
import PackageLikeCard from '~/components/Package/LikeCard.vue'
import PackageTypeahead from '~/components/Package/Typeahead.vue'
import SizeIncrease from '~/components/Package/SizeIncrease.vue'
import SizeDecrease from '~/components/Package/SizeDecrease.vue'
import Likes from '~/components/Package/Likes.vue'
import LikesLeaderboardPage from '~/pages/leaderboard/likes.vue'
import type { VueUiXyDatasetItem, VueUiXySvgSlotProps } from 'vue-data-ui/vue-ui-xy'
import type { VueUiStackbarSvgSlotProps } from 'vue-data-ui/vue-ui-stackbar'

describe('component accessibility audits', () => {
  describe('DateTime', () => {
    it('should have no accessibility violations with ISO string datetime', async () => {
      const component = await mountSuspended(DateTime, {
        props: { datetime: '2024-01-15T12:00:00.000Z' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with Date object', async () => {
      const component = await mountSuspended(DateTime, {
        props: { datetime: new Date('2024-01-15T12:00:00.000Z') },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom title', async () => {
      const component = await mountSuspended(DateTime, {
        props: {
          datetime: '2024-01-15T12:00:00.000Z',
          title: 'Last updated on January 15, 2024',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with dateStyle', async () => {
      const component = await mountSuspended(DateTime, {
        props: {
          datetime: '2024-01-15T12:00:00.000Z',
          dateStyle: 'medium',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with individual date parts', async () => {
      const component = await mountSuspended(DateTime, {
        props: {
          datetime: '2024-01-15T12:00:00.000Z',
          year: 'numeric',
          month: 'short',
          day: 'numeric',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AppHeader', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AppHeader)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations without logo', async () => {
      const component = await mountSuspended(AppHeader, {
        props: { showLogo: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations without connector', async () => {
      const component = await mountSuspended(AppHeader, {
        props: { showConnector: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LandingIntroHeader', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(LandingIntroHeader)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Noodles', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleKawaiiLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleTransgenderVisibilityLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodlePressLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleNodejsLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleArtemisLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleEmojiDayLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleEmojiDayThemedLogo, {
        props: {
          emojiSets: {},
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodlePride1Logo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodlePride2Logo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodlePride3Logo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleTetrisLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleLens, {
        props: {
          logo: NoodleKawaiiLogo,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleGifDayGifText, {
        props: {
          text: 'N',
          backgroundUrl: 'some_image_here.gif',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleGifDayLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleIojsNodejsLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleBlenderLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleBlenderArt)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AppFooter', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AppFooter)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LicenseChangeWarning', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(LicenseChangeWarning, {
        props: {
          change: { from: 'MIT', to: 'GPL-3.0' },
        },
        global: {
          mocks: { $t: (key: string) => key },
          stubs: { 'i18n-t': { template: '<span><slot name="license_change" /></span>' } },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })
  describe('AppLogo', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AppLogo)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom class', async () => {
      const component = await mountSuspended(AppLogo, {
        props: { class: 'h-6 w-6 text-accent' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AppMark', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AppMark)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom class', async () => {
      const component = await mountSuspended(AppMark, {
        props: { class: 'h-6 w-6 text-accent' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AboutLogoImg', () => {
    it('should have no accessibility violations with string src', async () => {
      const component = await mountSuspended(AboutLogoImg, {
        props: {
          src: LogoNuxt,
          alt: 'Nuxt logo',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with dark/light src', async () => {
      const component = await mountSuspended(AboutLogoImg, {
        props: {
          src: {
            dark: LogoNuxt,
            light: 'auto',
          },
          alt: 'Nuxt logo',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AboutLogoList', () => {
    it('should have no accessibility violations with direct logo items', async () => {
      const component = await mountSuspended(AboutLogoList, {
        props: {
          list: [
            {
              name: 'Nuxt',
              url: 'https://nuxt.com',
              logo: LogoNuxt,
            },
            {
              name: 'Nuxt',
              url: 'https://nuxt.com',
              logo: {
                dark: LogoNuxt,
                light: 'auto',
              },
            },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with grouped items', async () => {
      const component = await mountSuspended(AboutLogoList, {
        props: {
          list: [
            {
              name: 'OSS Partners',
              items: [
                {
                  name: 'Nuxt',
                  url: 'https://nuxt.com',
                  logo: LogoNuxt,
                },
                {
                  name: 'Nuxt',
                  url: 'https://nuxt.com',
                  logo: {
                    dark: LogoNuxt,
                    light: 'auto',
                  },
                },
              ],
            },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AboutGovernanceList', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AboutGovernanceList, {
        props: {
          members: [
            {
              id: 1,
              login: 'steward1',
              avatar_url: 'https://github.com/steward1.png',
              html_url: 'https://github.com/steward1',
              contributions: 100,
              role: 'steward',
              sponsors_url: 'https://github.com/sponsors/steward1',
            },
            {
              id: 3,
              login: 'contributor1',
              avatar_url: 'https://github.com/contributor1.png',
              html_url: 'https://github.com/contributor1',
              contributions: 100,
              role: 'contributor',
              sponsors_url: 'https://github.com/sponsors/contributor1',
            },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BaseCard', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BaseCard, {
        slots: { default: '<p>Card content</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with exact match highlight', async () => {
      const component = await mountSuspended(BaseCard, {
        props: { isExactMatch: true },
        slots: { default: '<p>Exact match content</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BackButton', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BackButton)
      expect(component.find('button').exists()).toBe(true)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CommandPalette', () => {
    let commandPalette: ReturnType<typeof useCommandPalette> | null = null

    const CommandPaletteHarness = defineComponent({
      name: 'CommandPaletteHarness',
      setup() {
        commandPalette = useCommandPalette()

        onMounted(() => {
          commandPalette?.open()
        })

        onBeforeUnmount(() => {
          commandPalette?.close()
          commandPalette?.clearPackageContext()
        })

        return () => h('div', [h(CommandPaletteComponent)])
      },
    })

    afterEach(() => {
      commandPalette?.close()
      commandPalette?.clearPackageContext()
      commandPalette = null
    })

    it('should have no accessibility violations when open', async () => {
      const wrapper = await mountSuspended(CommandPaletteHarness)
      await nextTick()
      await nextTick()

      const dialog = document.getElementById('command-palette-modal')
      const announcer = wrapper.element.querySelector('#command-palette-modal-announcement')

      expect(dialog).not.toBeNull()
      expect(announcer).not.toBeNull()

      const results = await runAxeElements([announcer, dialog])
      expect(results.violations).toEqual([])
    })
  })

  describe('TagStatic', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(TagStatic, {
        slots: { default: 'Tag content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ButtonBase', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ButtonBase, {
        slots: { default: 'Button content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for disabled state', async () => {
      const component = await mountSuspended(ButtonBase, {
        props: { disabled: true },
        slots: { default: 'Button content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations as primary button', async () => {
      const component = await mountSuspended(ButtonBase, {
        props: { variant: 'primary' },
        slots: { default: 'Button content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with size small', async () => {
      const component = await mountSuspended(ButtonBase, {
        props: { size: 'sm' },
        slots: { default: 'Button content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LinkBase', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(LinkBase, {
        props: { to: 'http://example.com' },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it("should have no accessibility violations when it's the current link", async () => {
      const component = await mountSuspended(LinkBase, {
        props: { to: 'http://example.com', current: true },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when disabled (plain text)', async () => {
      const component = await mountSuspended(LinkBase, {
        props: { to: 'http://example.com', disabled: true },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations as secondary button', async () => {
      const component = await mountSuspended(LinkBase, {
        props: { to: 'http://example.com', disabled: true, variant: 'button-secondary' },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations as primary button', async () => {
      const component = await mountSuspended(LinkBase, {
        props: { to: 'http://example.com', disabled: true, variant: 'button-primary' },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations as small button', async () => {
      const component = await mountSuspended(LinkBase, {
        props: {
          to: 'http://example.com',
          disabled: true,
          variant: 'button-secondary',
          size: 'sm',
        },
        slots: { default: 'Button link content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Likes', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(Likes, {
        props: { packageName: 'svelte' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with the top-liked badge visible', async () => {
      registerEndpoint('/api/social/likes/lodash', () => ({
        totalLikes: 42,
        userHasLiked: false,
        topLikedRank: 3,
      }))

      const component = await mountSuspended(Likes, {
        props: { packageName: 'lodash' },
      })

      // Likes fetches client-side (`server: false`), so wait for the fetched badge
      // state before running axe against the rendered variant.
      await vi.waitFor(() => {
        expect(component.text()).toContain('#3')
      })

      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LikesLeaderboardPage', () => {
    it('should have no accessibility violations when data is available', async () => {
      clearNuxtData()
      registerEndpoint('/api/leaderboard/likes', () => [
        createLikesLeaderboardEntry('vue', {
          rank: 1,
          totalLikes: 120,
          homepagePreviewUrl: 'https://images.example.com/vue-home.png',
          homepagePreviewWidth: 1200,
          homepagePreviewHeight: 630,
        }),
      ])

      const component = await mountSuspended(LikesLeaderboardPage, {
        route: '/leaderboard/likes',
      })

      await vi.waitFor(() => {
        expect(component.text()).toContain('Likes Leaderboard')
        expect(component.text()).toContain('vue')
      })

      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when unavailable', async () => {
      clearNuxtData()
      registerEndpoint('/api/leaderboard/likes', () => [])

      const component = await mountSuspended(LikesLeaderboardPage, {
        route: '/leaderboard/likes',
      })

      await vi.waitFor(() => {
        expect(component.text()).toContain('No likes leaderboard yet')
      })

      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('TagRadioButton', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(TagRadioButton, {
        props: { value: 'option1', modelValue: 'option2' },
        slots: { default: 'Tag content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when checked', async () => {
      const component = await mountSuspended(TagRadioButton, {
        props: { value: 'option1', modelValue: 'option1' },
        slots: { default: 'Tag content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when disabled', async () => {
      const component = await mountSuspended(TagRadioButton, {
        props: { value: 'option1', modelValue: 'option2', disabled: true },
        slots: { default: 'Tag content' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('TooltipApp', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(TooltipApp, {
        props: { text: 'Tooltip content' },
        slots: { default: '<button>Trigger</button>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('TooltipAnnounce', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(TooltipAnnounce, {
        props: { text: 'Tooltip content', isVisible: true },
        slots: { default: '<button>Trigger</button>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LoadingSpinner', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(LoadingSpinner)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom text', async () => {
      const component = await mountSuspended(LoadingSpinner, {
        props: { text: 'Fetching data...' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ProvenanceBadge', () => {
    it('should have no accessibility violations without link', async () => {
      const component = await mountSuspended(ProvenanceBadge)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with link', async () => {
      const component = await mountSuspended(ProvenanceBadge, {
        props: {
          packageName: 'vue',
          version: '3.0.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in compact mode', async () => {
      const component = await mountSuspended(ProvenanceBadge, {
        props: {
          packageName: 'vue',
          version: '3.0.0',
          compact: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('StagedPublishBadge', () => {
    it('should have no accessibility violations with link', async () => {
      const component = await mountSuspended(StagedPublishBadge)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations without link', async () => {
      const component = await mountSuspended(StagedPublishBadge, {
        props: { linked: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('TrustedPublishingBadge', () => {
    it('should have no accessibility violations with link', async () => {
      const component = await mountSuspended(TrustedPublishingBadge, {
        props: { provider: 'github' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
      expect(component.find('a').attributes('title')).toBe(
        'Published with trusted publishing via GitHub Actions',
      )
    })

    it('should have no accessibility violations without link', async () => {
      const component = await mountSuspended(TrustedPublishingBadge, {
        props: { provider: 'github', linked: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in compact mode', async () => {
      const component = await mountSuspended(TrustedPublishingBadge, {
        props: { compact: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSkeleton', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageSkeleton)
      const results = await runAxe(component)
      // PackageSkeleton uses empty h1/h2 elements as skeleton placeholders.
      // These are expected since the component represents a loading state.
      // The real content will have proper heading text when loaded.
      // Filter out 'empty-heading' violations as they're expected for skeleton components.
      const violations = results.violations.filter(v => v.id !== 'empty-heading')
      expect(violations).toEqual([])
    })
  })

  describe('PackageExternalLinks', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageExternalLinks, {
        props: {
          pkg: {
            '_id': 'react',
            'name': 'react',
            'dist-tags': { latest: '18.2.0' },
            'time': {
              'created': '2013-01-31T01:07:45.050Z',
              'modified': '2024-03-14T00:00:00.000Z',
              '18.2.0': '2024-03-14T00:00:00.000Z',
            },
            'requestedVersion': {
              version: '18.2.0',
              _npmVersion: '18.2.0',
              homepage: 'https://react.dev',
              repository: {
                type: 'git',
                url: 'https://github.com/react/react.git',
              },
              bugs: {
                url: 'https://github.com/react/react/issues',
              },
              funding: 'https://github.com/facebook',
              dist: {
                shasum: 'abc123def456',
                tarball: 'https://registry.npmjs.org/react/-/react-18.2.0.tgz',
                signatures: [],
              },
              deprecated: undefined,
              keywords: [],
              license: 'MIT',
              name: 'react',
              time: '2024-03-14T00:00:00.000Z',
              _id: 'react@18.2.0',
            },
            'versions': {
              '18.2.0': {
                version: '18.2.0',
                trustStatus: {
                  provenance: false,
                  trustedPublisher: false,
                  stagedPublish: false,
                },
                tags: [],
              },
            },
          },
          jsrInfo: {
            exists: true,
            url: 'https://jsr.io/@react/react',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageCard', () => {
    const mockResult = {
      package: {
        name: 'vue',
        version: '3.5.0',
        description: 'The progressive JavaScript framework',
        date: '2024-01-15T00:00:00.000Z',
        keywords: ['framework', 'frontend', 'reactive'],
        links: {},
        publisher: {
          username: 'yyx990803',
        },
      },
      searchScore: 100000,
    }

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageCard, {
        props: { result: mockResult },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with h2 heading', async () => {
      const component = await mountSuspended(PackageCard, {
        props: { result: mockResult, headingLevel: 'h2' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations showing publisher', async () => {
      const component = await mountSuspended(PackageCard, {
        props: { result: mockResult, showPublisher: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with a trusted publisher', async () => {
      const component = await mountSuspended(PackageCard, {
        props: {
          result: {
            ...mockResult,
            package: {
              ...mockResult.package,
              publisher: { ...mockResult.package.publisher, trustedPublisher: { id: 'github' } },
            },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
      expect(component.findComponent(TrustedPublishingBadge).exists()).toBe(true)
    })
  })

  describe('PackageLikeCard', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageLikeCard, {
        props: { packageUrl: 'https://npmx.dev/package/vue' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageHeader', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageHeader, {
        props: {
          pkg: {
            'name': 'vue',
            'dist-tags': {},
            'versions': {},
          },
          resolvedVersion: '3.5.0',
          displayVersion: {
            _id: '1234567890',
            _npmVersion: '3.5.0',
            name: 'vue',
            version: '3.5.0',
            dist: {
              shasum: '1234567890',
              signatures: [],
              tarball: 'https://npmx.dev/package/vue/tarball',
            },
          },
          latestVersion: { version: '3.5.0', tags: [] },
          provenanceData: null,
          provenanceStatus: 'idle',
          page: 'docs',
          versionUrlPattern: '/package/vue/v/{version}',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  // Note: PackageWeeklyDownloadStats tests are skipped because vue-data-ui VueUiSparkline
  // component has issues in the test environment (requires DOM measurements that aren't
  // available during SSR-like test mounting).

  describe('PackageTrendsChart', () => {
    const mockWeeklyDownloads = [
      {
        value: 1000,
        weekKey: '2024-W01',
        weekStart: '2024-01-01',
        weekEnd: '2024-01-07',
        timestampStart: 1704067200,
        timestampEnd: 1704585600,
      },
      {
        value: 1200,
        weekKey: '2024-W02',
        weekStart: '2024-01-08',
        weekEnd: '2024-01-14',
        timestampStart: 1704672000,
        timestampEnd: 1705190400,
      },
      {
        value: 1500,
        weekKey: '2024-W03',
        weekStart: '2024-01-15',
        weekEnd: '2024-01-21',
        timestampStart: 1705276800,
        timestampEnd: 1705795200,
      },
    ]

    it('should have no accessibility violations (non-modal)', async () => {
      const wrapper = await mountSuspended(PackageTrendsChart, {
        props: {
          weeklyDownloads: mockWeeklyDownloads,
          packageName: 'vue',
          createdIso: '2020-01-01T00:00:00.000Z',
        },
      })

      const results = await runAxe(wrapper)
      expect(results.violations).toEqual([])
    })

    describe('PackageTimelineChart', () => {
      it('should have no accessibility violations', async () => {
        const wrapper = await mountSuspended(PackageTimelineChart, {
          props: {
            sizeCache: new Map(),
            versionSubEvents: new Map(),
            timelineEntries: [],
            selectedVersion: null,
            loading: false,
          },
        })
        const results = await runAxe(wrapper)
        expect(results.violations).toEqual([])
      })
    })

    describe('FacetBarChart', () => {
      it('should have no accessibility violations', async () => {
        const wrapper = await mountSuspended(FacetBarChart, {
          props: {
            values: [
              { raw: 100, display: '100 MB' },
              { raw: 50, display: '50 MB' },
            ],
            packagesData: [
              {
                package: {
                  name: 'nuxt',
                  version: '4.3.1',
                },
                downloads: 1156058,
                packageSize: 1667656,
                directDeps: 66,
                analysis: {
                  package: 'nuxt',
                  version: '4.3.1',
                  devDependencySuggestion: {
                    recommended: false,
                  },
                  moduleFormat: 'dual',
                  types: {
                    kind: 'included',
                  },
                  createPackage: {
                    packageName: 'create-nuxt',
                  },
                },
                vulnerabilities: {
                  count: 0,
                  severity: {
                    critical: 0,
                    high: 0,
                    moderate: 0,
                    low: 0,
                  },
                },
                metadata: {
                  license: 'MIT',
                  lastUpdated: '2026-04-03T05:41:39.680Z',
                },
                isBinaryOnly: false,
                totalLikes: 156,
              },
              {
                package: {
                  name: 'vue',
                  version: '3.5.32',
                },
                downloads: 10979552,
                packageSize: 2480183,
                directDeps: 5,
                analysis: {
                  package: 'vue',
                  version: '3.5.32',
                  devDependencySuggestion: {
                    recommended: false,
                  },
                  moduleFormat: 'dual',
                  types: {
                    kind: 'included',
                  },
                  createPackage: {
                    packageName: 'create-vue',
                  },
                },
                vulnerabilities: {
                  count: 0,
                  severity: {
                    critical: 0,
                    high: 0,
                    moderate: 0,
                    low: 0,
                  },
                },
                metadata: {
                  license: 'MIT',
                  lastUpdated: '2026-04-03T05:41:39.680Z',
                },
                isBinaryOnly: false,
                totalLikes: 85,
              },
            ],
            packages: ['nuxt', 'vue'],
            label: 'Package Size',
            description: 'Size of the package itself (unpacked)',
          },
        })
        const results = await runAxe(wrapper)
        expect(results.violations).toEqual([])
      })
    })

    describe('FacetScatterChart', () => {
      it('should have no accessibility violations', async () => {
        const wrapper = await mountSuspended(FacetScatterChart, {
          props: {
            packagesData: [
              {
                package: {
                  name: 'vue',
                  version: '3.5.32',
                },
                downloads: 10979552,
                packageSize: 2480183,
                directDeps: 5,
                analysis: {
                  package: 'vue',
                  version: '3.5.32',
                  devDependencySuggestion: {
                    recommended: false,
                  },
                  moduleFormat: 'dual',
                  types: {
                    kind: 'included',
                  },
                  createPackage: {
                    packageName: 'create-vue',
                  },
                },
                vulnerabilities: {
                  count: 0,
                  severity: {
                    critical: 0,
                    high: 0,
                    moderate: 0,
                    low: 0,
                  },
                },
                metadata: {
                  license: 'MIT',
                  lastUpdated: '2026-04-03T05:41:39.680Z',
                },
                isBinaryOnly: false,
                totalLikes: 85,
              },
              {
                package: {
                  name: 'svelte',
                  version: '5.55.1',
                },
                downloads: 4378382,
                packageSize: 2823272,
                directDeps: 16,
                analysis: {
                  package: 'svelte',
                  version: '5.55.1',
                  devDependencySuggestion: {
                    recommended: false,
                  },
                  moduleFormat: 'dual',
                  types: {
                    kind: 'included',
                  },
                  engines: {
                    node: '>=18',
                  },
                  createPackage: {
                    packageName: 'create-svelte',
                    deprecated:
                      'create-svelte has been deprecated - please use https://www.npmjs.com/package/sv instead',
                  },
                },
                vulnerabilities: {
                  count: 0,
                  severity: {
                    critical: 0,
                    high: 0,
                    moderate: 0,
                    low: 0,
                  },
                },
                metadata: {
                  license: 'MIT',
                  lastUpdated: '2026-03-29T20:58:44.673Z',
                  engines: {
                    node: '>=18',
                  },
                },
                isBinaryOnly: false,
                totalLikes: 191,
              },
            ],
            packages: ['vue', 'svelte'],
          },
        })
        const results = await runAxe(wrapper)
        expect(results.violations).toEqual([])
      })

      it('should have no accessibility violations with empty data', async () => {
        const wrapper = await mountSuspended(FacetScatterChart, {
          props: {
            packagesData: [],
            packages: [],
          },
        })

        const results = await runAxe(wrapper)
        expect(results.violations).toEqual([])
      })
    })

    it('should have no accessibility violations with empty data', async () => {
      const wrapper = await mountSuspended(PackageTrendsChart, {
        props: {
          weeklyDownloads: [],
          packageName: 'vue',
          createdIso: null,
        },
      })

      const results = await runAxe(wrapper)
      expect(results.violations).toEqual([])
    })
  })

  describe('ChartSplitSparkline', () => {
    const dataset = [
      {
        color: 'oklch(0.7025 0.132 160.37)',
        name: 'vue',
        series: [100_000, 200_000, 150_000],
        type: 'line',
        dashIndices: [],
      },
      {
        color: 'oklch(0.6917 0.1865 35.04)',
        name: 'svelte',
        series: [100_000, 200_000, 150_000],
        type: 'line',
        dashIndices: [],
      },
    ] as Array<
      VueUiXyDatasetItem & {
        color?: string
        series: number[]
        dashIndices?: number[]
      }
    >
    const dates = [1743465600000, 1744070400000, 1744675200000]
    const datetimeFormatterOptions = {
      year: 'yyyy-MM-dd',
      month: 'yyyy-MM-dd',
      day: 'yyyy-MM-dd',
    }

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ChartSplitSparkline, {
        props: {
          dataset,
          dates,
          datetimeFormatterOptions,
          showLastDatapointEstimation: false,
          granularity: 'weekly',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when empty', async () => {
      const component = await mountSuspended(ChartSplitSparkline, {
        props: {
          dataset: [],
          dates: [],
          datetimeFormatterOptions,
          showLastDatapointEstimation: false,
          granularity: 'weekly',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ChartAnnotatorIcon', () => {
    const cases = CHART_ANNOTATOR_SLOTS.flatMap<{
      slotName: AnnotatorSlotName
      slotProps: Record<string, string | boolean>
    }>(slotName => {
      if (slotName === 'annotator-action-draw') {
        return ['arrow', 'text', 'line', 'draw'].map(mode => ({
          slotName,
          slotProps: { mode },
        }))
      }
      if (slotName === 'annotator-action-color') {
        return [{ slotName, slotProps: { color: '#ff0000' } }]
      }
      return [false, true].map(state => ({
        slotName,
        slotProps: { disabled: state, isSelecting: state, isAnnotator: state },
      }))
    })

    it.each(cases)('keeps $slotName decorative with $slotProps', async props => {
      const component = await mountSuspended(ChartAnnotatorIcon, { props })
      expect(component.get('span').attributes('aria-hidden')).toBe('true')
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ChartFullscreenIcon', () => {
    it.each([false, true])('stays decorative when fullscreen is %s', async isFullscreen => {
      const component = await mountSuspended(ChartFullscreenIcon, {
        props: { isFullscreen },
      })
      const icon = component.get('span')
      expect(icon.attributes('aria-hidden')).toBe('true')
      expect(icon.classes()).toContain(isFullscreen ? 'i-lucide:minimize' : 'i-lucide:maximize')
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ChartCopyPngButton', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ChartCopyPngButton, {
        props: { copied: false, copying: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in the copied state', async () => {
      const component = await mountSuspended(ChartCopyPngButton, {
        props: { copied: true, copying: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations while copying', async () => {
      const component = await mountSuspended(ChartCopyPngButton, {
        props: { copied: false, copying: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should expose an accessible name, since the button is icon-only', async () => {
      const component = await mountSuspended(ChartCopyPngButton, {
        props: { copied: false, copying: false },
      })
      const button = component.get('button')
      expect(button.attributes('aria-label')).toBeTruthy()
      expect(button.attributes('type')).toBe('button')
      // The icon carries no text, so it must not be announced
      expect(component.get('span').attributes('aria-hidden')).toBe('true')
    })

    it('should mark the button busy while the export runs', async () => {
      const component = await mountSuspended(ChartCopyPngButton, {
        props: { copied: false, copying: true },
      })
      const button = component.get('button')
      // The spinner is decorative, so aria-busy is what conveys the pending state
      expect(button.attributes('aria-busy')).toBe('true')
      expect(button.attributes('aria-label')).toBeTruthy()
    })
  })

  describe('DailyDownloadsHeatmap', () => {
    const useChartsMock = vi.mocked(useCharts)
    const originalUseCharts = useChartsMock.getMockImplementation()!

    afterEach(() => {
      useChartsMock.mockImplementation(originalUseCharts)
    })

    it('should have no accessibility violations when loaded', async () => {
      const now = new Date()

      const fetchMock = vi.fn().mockResolvedValue([
        {
          day: now.toISOString().slice(0, 10),
          timestamp: now.getTime(),
          value: 123,
        },
      ])

      useChartsMock.mockImplementation(() => ({
        ...originalUseCharts(),
        fetchPackageDownloadEvolution: fetchMock,
      }))

      const wrapper = await mountSuspended(DailyDownloadsHeatmap, {
        props: { packageName: 'vue' },
      })

      await flushPromises()

      await vi.waitFor(() => {
        expect(wrapper.find('[data-test-id="vue-ui-heatmap-stub"]').exists()).toBe(true)
      })

      expect(fetchMock).toHaveBeenCalledWith(
        'vue',
        null,
        expect.objectContaining({ granularity: 'day' }),
      )

      const results = await runAxe(wrapper)
      expect(results.violations).toEqual([])
    })
  })

  describe('TabRoot + TabList + TabItem + TabPanel', () => {
    // oxlint-disable-next-line unicorn/consistent-function-scoping
    function createTabsFixture(modelValue: string, idPrefix: string) {
      return defineComponent({
        setup() {
          return () =>
            h(TabRoot, { modelValue, idPrefix }, () => [
              h(TabList, { ariaLabel: 'Test tabs' }, () => [
                h(TabItem, { value: 'first' }, () => 'First'),
                h(TabItem, { value: 'second' }, () => 'Second'),
              ]),
              h(TabPanel, { value: 'first' }, () => 'First content'),
              h(TabPanel, { value: 'second' }, () => 'Second content'),
            ])
        },
      })
    }

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(createTabsFixture('first', 'a11y-test'))
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with second tab selected', async () => {
      const component = await mountSuspended(createTabsFixture('second', 'a11y-test2'))
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackagePlaygrounds', () => {
    it('should have no accessibility violations with single link', async () => {
      const links = [
        {
          provider: 'stackblitz',
          providerName: 'StackBlitz',
          label: 'Open in StackBlitz',
          url: 'https://stackblitz.com/example',
        },
      ]
      const component = await mountSuspended(PackagePlaygrounds, {
        props: { links },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with multiple links', async () => {
      const links = [
        {
          provider: 'stackblitz',
          providerName: 'StackBlitz',
          label: 'Open in StackBlitz',
          url: 'https://stackblitz.com/example',
        },
        {
          provider: 'codesandbox',
          providerName: 'CodeSandbox',
          label: 'Open in CodeSandbox',
          url: 'https://codesandbox.io/example',
        },
      ]
      const component = await mountSuspended(PackagePlaygrounds, {
        props: { links },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty links', async () => {
      const component = await mountSuspended(PackagePlaygrounds, {
        props: { links: [] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageDependencies', () => {
    it('should have no accessibility violations without dependencies', async () => {
      const component = await mountSuspended(PackageDependencies, {
        props: { packageName: 'test-package', version: '1.0.0' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with dependencies', async () => {
      const component = await mountSuspended(PackageDependencies, {
        props: {
          packageName: 'test-package',
          version: '1.0.0',
          dependencies: {
            vue: '^3.0.0',
            lodash: '^4.17.0',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with peer dependencies', async () => {
      const component = await mountSuspended(PackageDependencies, {
        props: {
          packageName: 'test-package',
          version: '1.0.0',
          peerDependencies: {
            vue: '^3.0.0',
          },
          peerDependenciesMeta: {
            vue: { optional: true },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageVersions', () => {
    it('should have no accessibility violations', async () => {
      // Minimal mock data satisfying SlimVersion type
      const mockVersion = {
        version: '3.5.0',
        deprecated: undefined,
        tags: undefined,
      }
      const component = await mountSuspended(PackageVersions, {
        props: {
          packageName: 'vue',
          versions: {
            '3.5.0': mockVersion,
            '3.4.0': { ...mockVersion, version: '3.4.0' },
          },
          distTags: {
            latest: '3.5.0',
            next: '3.4.0',
          },
          time: {
            '3.5.0': '2024-01-15T00:00:00.000Z',
            '3.4.0': '2024-01-01T00:00:00.000Z',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageListControls', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageListControls, {
        props: {
          filter: '',
          sort: 'downloads',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with filter active', async () => {
      const component = await mountSuspended(PackageListControls, {
        props: {
          filter: 'vue',
          sort: 'downloads',
          totalCount: 100,
          filteredCount: 10,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageMaintainers', () => {
    it('should have no accessibility violations without maintainers', async () => {
      const component = await mountSuspended(PackageMaintainers, {
        props: { packageName: 'vue' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with maintainers', async () => {
      const component = await mountSuspended(PackageMaintainers, {
        props: {
          packageName: 'vue',
          maintainers: [
            { name: 'yyx990803', email: 'evan@vuejs.org' },
            { name: 'posva', email: 'posva@example.com' },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  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('CodeHeader', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CodeHeader, {
        props: {
          filePath: 'misc/true.js',
          loading: false,
          isViewingFile: true,
          isBinaryFile: false,
          fileContent: {
            package: 'vite',
            version: '1.0.0',
            path: 'misc/true.js',
            language: 'javascript',
            contentType: 'application/javascript',
            content: 'const x = 1;',
            html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
            lines: 1,
          },
          markdownViewMode: 'preview',
          selectedLines: null,
          getCodeUrlWithPath: (path = '') => `/package-code/vite/v/1.0.0/${path}`,
          packageName: 'vite',
          version: '1.0.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CodeSkeletonLoader', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CodeSkeletonLoader)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CodeViewer', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CodeViewer, {
        props: {
          html: '<pre><code><span class="line">const x = 1;</span></code></pre>',
          lines: 1,
          selectedLines: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with selected lines', async () => {
      const component = await mountSuspended(CodeViewer, {
        props: {
          html: '<pre><code><span class="line">const x = 1;</span><span class="line">const y = 2;</span></code></pre>',
          lines: 2,
          selectedLines: { start: 1, end: 1 },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with import-link markup', async () => {
      const component = await mountSuspended(CodeViewer, {
        props: {
          html: '<pre><code><span class="line"><a href="/package-code/vite/v/1.0.0/index" class="import-link">vite</a></span></code></pre>',
          lines: 1,
          selectedLines: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CodeDirectoryListing', () => {
    const mockTree = [
      { name: 'src', type: 'directory' as const, path: 'src', children: [] },
      { name: 'index.js', type: 'file' as const, path: 'index.js', size: 1024 },
      {
        name: 'package.json',
        type: 'file' as const,
        path: 'package.json',
        size: 512,
      },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CodeDirectoryListing, {
        props: {
          tree: mockTree,
          currentPath: '',
          baseUrl: '/package-code/vue',
          baseRoute: {
            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with nested path', async () => {
      const component = await mountSuspended(CodeDirectoryListing, {
        props: {
          tree: mockTree,
          currentPath: 'src',
          baseUrl: '/package-code/vue',
          baseRoute: {
            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CodeFileTree', () => {
    const mockTree = [
      {
        name: 'src',
        type: 'directory' as const,
        path: 'src',
        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
      },
      { name: 'package.json', type: 'file' as const, path: 'package.json' },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CodeFileTree, {
        props: {
          tree: mockTree,
          currentPath: '',
          baseUrl: '/package-code/vue',
          baseRoute: {
            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with selected file', async () => {
      const component = await mountSuspended(CodeFileTree, {
        props: {
          tree: mockTree,
          currentPath: 'src/index.ts',
          baseUrl: '/package-code/vue',
          baseRoute: {
            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('HeaderConnectorModal', () => {
    it('should have no accessibility violations when closed', async () => {
      const component = await mountSuspended(HeaderConnectorModal, {
        props: { open: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when open (disconnected)', async () => {
      const component = await mountSuspended(HeaderConnectorModal, {
        props: { open: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('HeaderAccountMenu.server', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(HeaderAccountMenuServer)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('HeaderAccountMenu', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(HeaderAccountMenu)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageClaimPackageModal', () => {
    it('should have no accessibility violations when closed', async () => {
      const component = await mountSuspended(PackageClaimPackageModal, {
        props: {
          packageName: 'test-package',
          packageScope: undefined,
          canPublishToScope: true,
          open: false,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when open', async () => {
      const component = await mountSuspended(PackageClaimPackageModal, {
        props: {
          packageName: 'test-package',
          packageScope: undefined,
          canPublishToScope: true,
          open: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageProvenanceSection', () => {
    it('should have no accessibility violations with minimal details', async () => {
      const component = await mountSuspended(PackageProvenanceSection, {
        props: {
          details: {
            provider: 'github',
            providerLabel: 'GitHub Actions',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with full details', async () => {
      const component = await mountSuspended(PackageProvenanceSection, {
        props: {
          details: {
            provider: 'github',
            providerLabel: 'GitHub Actions',
            buildSummaryUrl: 'https://github.com/owner/repo/actions/runs/123',
            sourceCommitUrl: 'https://github.com/owner/repo/commit/abc123',
            sourceCommitSha: 'abc123def456',
            buildFileUrl: 'https://github.com/owner/repo/blob/main/.github/workflows/release.yml',
            buildFilePath: '.github/workflows/release.yml',
            publicLedgerUrl: 'https://search.sigstore.dev/example',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('OrgOperationsQueue', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(OrgOperationsQueue)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageList', () => {
    const mockResults = [
      {
        package: {
          name: 'vue',
          version: '3.5.0',
          description: 'The progressive JavaScript framework',
          date: '2024-01-15T00:00:00.000Z',
          keywords: ['framework'],
          links: {},
          publisher: { username: 'yyx990803' },
        },
        searchScore: 100000,
      },
      {
        package: {
          name: 'react',
          version: '18.2.0',
          description: 'React is a JavaScript library for building user interfaces.',
          date: '2024-01-10T00:00:00.000Z',
          keywords: ['react'],
          links: {},
          publisher: { username: 'fb' },
        },
        searchScore: 90000,
      },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageList, {
        props: { results: mockResults },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty results', async () => {
      const component = await mountSuspended(PackageList, {
        props: { results: [] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when loading', async () => {
      const component = await mountSuspended(PackageList, {
        props: {
          results: mockResults,
          isLoading: true,
          hasMore: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageMetricsBadges', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageMetricsBadges, {
        props: { packageName: 'vue' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with version', async () => {
      const component = await mountSuspended(PackageMetricsBadges, {
        props: {
          packageName: 'vue',
          version: '3.5.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageAccessControls', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageAccessControls, {
        props: { packageName: '@nuxt/kit' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for unscoped package', async () => {
      // Unscoped packages don't show the access controls section
      const component = await mountSuspended(PackageAccessControls, {
        props: { packageName: 'vue' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('OrgMembersPanel', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(OrgMembersPanel, {
        props: { orgName: 'nuxt' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('OrgTeamsPanel', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(OrgTeamsPanel, {
        props: { orgName: 'nuxt' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CodeMobileTreeDrawer', () => {
    const mockTree = [
      {
        name: 'src',
        type: 'directory' as const,
        path: 'src',
        children: [{ name: 'index.ts', type: 'file' as const, path: 'src/index.ts' }],
      },
      { name: 'package.json', type: 'file' as const, path: 'package.json' },
    ]

    it('should have no accessibility violations when closed', async () => {
      const component = await mountSuspended(CodeMobileTreeDrawer, {
        props: {
          tree: mockTree,
          currentPath: '',
          baseUrl: '/package-code/vue',
          baseRoute: {
            params: { packageName: 'vue', version: '3.0.0', filePath: '' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ColumnPicker', () => {
    const mockColumns: ColumnConfig[] = [
      { id: 'name', visible: true, sortable: true },
      { id: 'version', visible: true, sortable: false },
      { id: 'downloads', visible: false, sortable: true },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ColumnPicker, {
        props: { columns: mockColumns },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('FilterChips', () => {
    it('should have no accessibility violations with chips', async () => {
      const chips: FilterChip[] = [
        { id: 'text', type: 'text', label: 'Search', value: 'react' },
        { id: 'keyword', type: 'keywords', label: 'Keyword', value: 'hooks' },
      ]
      const component = await mountSuspended(FilterChips, {
        props: { chips },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty chips', async () => {
      const component = await mountSuspended(FilterChips, {
        props: { chips: [] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('FilterPanel', () => {
    const defaultFilters = {
      text: '',
      searchScope: 'name' as const,
      downloadRange: 'any' as const,
      updatedWithin: 'any' as const,
      security: 'all' as const,
      keywords: [],
      visibleColumns: DEFAULT_FILTERS.visibleColumns,
    }

    it('should have no accessibility violations (collapsed)', async () => {
      const component = await mountSuspended(FilterPanel, {
        props: { filters: defaultFilters },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with active filters', async () => {
      const component = await mountSuspended(FilterPanel, {
        props: {
          filters: {
            ...defaultFilters,
            text: 'react',
            keywords: ['hooks'],
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageListToolbar', () => {
    const defaultFilters = {
      text: '',
      searchScope: 'name' as const,
      downloadRange: 'any' as const,
      updatedWithin: 'any' as const,
      security: 'all' as const,
      keywords: [],
      visibleColumns: DEFAULT_FILTERS.visibleColumns,
    }

    const mockColumns: ColumnConfig[] = [
      { id: 'name', visible: true, sortable: true },
      { id: 'version', visible: true, sortable: false },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageListToolbar, {
        props: {
          filters: defaultFilters,
          sortOption: 'downloads-week-desc',
          viewMode: 'cards',
          columns: mockColumns,
          paginationMode: 'infinite',
          pageSize: 25,
          totalCount: 100,
          filteredCount: 100,
          activeFilters: [],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in search context', async () => {
      const component = await mountSuspended(PackageListToolbar, {
        props: {
          filters: defaultFilters,
          sortOption: 'relevance-desc',
          viewMode: 'cards',
          columns: mockColumns,
          paginationMode: 'infinite',
          pageSize: 25,
          totalCount: 100,
          filteredCount: 100,
          activeFilters: [],
          searchContext: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should total package count in paginated mode', async () => {
      const component = await mountSuspended(PackageListToolbar, {
        props: {
          filters: defaultFilters,
          sortOption: 'downloads-week-desc',
          viewMode: 'table',
          columns: mockColumns,
          paginationMode: 'paginated',
          pageSize: 25,
          totalCount: 9544,
          filteredCount: 9544,
          activeFilters: [],
        },
      })

      const html = component.html()
      expect(html).toContain('25 of 9,544')
    })
  })

  describe('PackageTable', () => {
    const mockResults = [
      {
        package: {
          name: 'vue',
          version: '3.5.0',
          description: 'The progressive JavaScript framework',
          date: '2024-01-15T00:00:00.000Z',
          keywords: ['framework'],
          links: {},
          publisher: { username: 'yyx990803' },
        },
        searchScore: 100000,
      },
    ]

    const mockColumns: ColumnConfig[] = [
      { id: 'name', visible: true, sortable: true },
      { id: 'version', visible: true, sortable: false },
      { id: 'description', visible: true, sortable: false },
      { id: 'downloads', visible: true, sortable: true },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageTable, {
        props: {
          results: mockResults,
          columns: mockColumns,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty results', async () => {
      const component = await mountSuspended(PackageTable, {
        props: {
          results: [],
          columns: mockColumns,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when loading', async () => {
      const component = await mountSuspended(PackageTable, {
        props: {
          results: [],
          columns: mockColumns,
          isLoading: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTableRow', () => {
    const mockResult = {
      package: {
        name: 'lodash',
        version: '4.17.21',
        description: 'A modern JavaScript utility library',
        date: '2024-01-01T00:00:00.000Z',
        keywords: ['utility', 'modules'],
        links: {},
        publisher: { username: 'jdalton' },
        maintainers: [{ username: 'jdalton', email: 'test@test.com' }],
      },
      downloads: { weekly: 50000000 },
      updated: '2024-01-01T00:00:00.000Z',
      searchScore: 99999,
    }

    const mockColumns: ColumnConfig[] = [
      { id: 'name', visible: true, sortable: true },
      { id: 'version', visible: true, sortable: false },
      { id: 'description', visible: true, sortable: false },
    ]

    it('should have no accessibility violations', async () => {
      // PackageTableRow needs to be wrapped in a table structure
      const component = await mountSuspended(PackageTableRow, {
        props: {
          result: mockResult,
          columns: mockColumns,
        },
        global: {
          stubs: {
            // Wrap in proper table structure for accessibility
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTimelineChartDepSizeTooltip', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageTimelineChartDepSizeTooltip, {
        props: {
          datapoint: [
            {
              absoluteIndex: 0,
              color: '#FF0000',
              id: 'ABC',
              name: 'Nuxt',
              proportion: 1,
              timeLabel: {
                text: 'time',
                absoluteIndex: 0,
              },
              value: 1,
            },
          ],
          timeLabel: 'time',
          datetime: '2027-01-01',
          datapoints: [
            { id: 'ABC', name: 'Nuxt', color: '#666666', size: 100, delta: 0, removed: false },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTimelineChartDepSizeSvgSlot', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageTimelineChartDepSizeSvgSlot, {
        props: {
          svg: {
            isPrintingImg: false,
            isPrintingSvg: false,
          } as VueUiStackbarSvgSlotProps['svg'],
          activeVersionPlot: {
            x: 10,
            y: 10,
            value: 100,
          },
          watermark: '<g><text x="0" y="0" stroke="#000000" font-size="12">npmx</text></g>',
          colors: { bg: '#FFFFFF', accent: '#FF0000' },
          pauseAnimations: false,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTimelineChartXyTooltip', () => {
    it('should have no accessibillity violations', async () => {
      const component = await mountSuspended(PackageTimelineChartXyTooltip, {
        props: {
          timeLabel: { absoluteIndex: 0, text: 'time' },
          version: '1.0.0',
          tags: [],
          datetime: '2027-01-01',
          totalSize: '1 MB',
          dependencyCount: '10',
          events: [],
          activeTab: 'totalSize',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTimelineChartXySvgSlot', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageTimelineChartXySvgSlot, {
        props: {
          svg: {
            isPrintingImg: false,
            isPrintingSvg: false,
          } as VueUiXySvgSlotProps['svg'],
          activeVersionPlot: {
            x: 10,
            y: 10,
            value: 100,
          },
          watermark: '<g><text x="0" y="0" stroke="#000000" font-size="12">npmx</text></g>',
          markersPositive: [],
          markersNegative: [],
          markersError: [],
          colors: { bg: '#FFFFFF', accent: '#FF0000' },
          pauseAnimations: false,
          gradientColors: [
            'oklch(73.76% 0.130 47.72)',
            'oklch(85.35% 0.132 88.65)',
            'oklch(81.56% 0.145 116.12)',
            'oklch(71.29% 0.132 136.26)',
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PaginationControls', () => {
    it('should have no accessibility violations in infinite mode', async () => {
      const component = await mountSuspended(PaginationControls, {
        props: {
          mode: 'infinite',
          pageSize: 25,
          currentPage: 1,
          totalItems: 100,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in paginated mode', async () => {
      const component = await mountSuspended(PaginationControls, {
        props: {
          mode: 'paginated',
          pageSize: 25,
          currentPage: 1,
          totalItems: 100,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with multiple pages', async () => {
      const component = await mountSuspended(PaginationControls, {
        props: {
          mode: 'paginated',
          pageSize: 10,
          currentPage: 5,
          totalItems: 200,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ViewModeToggle', () => {
    it('should have no accessibility violations in cards mode', async () => {
      const component = await mountSuspended(ViewModeToggle, {
        props: { modelValue: 'cards' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in table mode', async () => {
      const component = await mountSuspended(ViewModeToggle, {
        props: { modelValue: 'table' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageVulnerabilityTree', () => {
    it('should have no accessibility violations in idle state', async () => {
      const component = await mountSuspended(PackageVulnerabilityTree, {
        props: {
          packageName: 'vue',
          version: '3.5.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageDeprecatedTree', () => {
    it('should have no accessibility violations in idle state', async () => {
      const component = await mountSuspended(PackageDeprecatedTree, {
        props: {
          packageName: 'vue',
          version: '3.5.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DependencyPathPopup', () => {
    it('should have no accessibility violations with short path', async () => {
      const component = await mountSuspended(DependencyPathPopup, {
        props: {
          path: ['root@1.0.0', 'vuln-dep@2.0.0'],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with deep path', async () => {
      const component = await mountSuspended(DependencyPathPopup, {
        props: {
          path: ['root@1.0.0', 'dep-a@1.0.0', 'dep-b@2.0.0', 'dep-c@3.0.0', 'vulnerable-pkg@4.0.0'],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DepsStatsPackageJsonUpload', () => {
    it('should have no accessibility violations in empty state', async () => {
      const component = await mountSuspended(DepsStatsPackageJsonUpload)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with an error', async () => {
      const component = await mountSuspended(DepsStatsPackageJsonUpload, {
        props: { error: 'Invalid package.json' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with a selected file', async () => {
      const component = await mountSuspended(DepsStatsPackageJsonUpload, {
        props: { fileName: 'package.json' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DepsStatsDependencyList', () => {
    it('should have no accessibility violations when empty', async () => {
      const component = await mountSuspended(DepsStatsDependencyList, {
        props: {
          dependencies: [],
          selectedName: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with dependencies', async () => {
      const component = await mountSuspended(DepsStatsDependencyList, {
        props: {
          dependencies: [
            {
              name: 'vue',
              range: '^3.5.0',
              packageName: 'vue',
              category: 'dependencies',
              nonRegistry: false,
            },
            {
              name: 'vitest',
              range: '^3.0.0',
              packageName: 'vitest',
              category: 'devDependencies',
              nonRegistry: false,
            },
            {
              name: 'local-pkg',
              range: 'workspace:*',
              packageName: 'local-pkg',
              category: 'dependencies',
              nonRegistry: true,
            },
            {
              name: 'alias-pkg',
              range: '^1.0.0',
              packageName: 'real-pkg',
              category: 'dependencies',
              nonRegistry: false,
            },
          ],
          selectedName: 'vue',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DepsStatsDependencyStats', () => {
    it('should have no accessibility violations when empty', async () => {
      const component = await mountSuspended(DepsStatsDependencyStats, {
        props: { dependency: null },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for a non-registry dependency', async () => {
      const component = await mountSuspended(DepsStatsDependencyStats, {
        props: {
          dependency: {
            name: 'local-pkg',
            range: 'workspace:*',
            packageName: 'local-pkg',
            category: 'dependencies',
            nonRegistry: true,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DepsStatsDependencyStatsPanel', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(DepsStatsDependencyStatsPanel, {
        props: {
          packageName: 'vue',
          declaredRange: '^3.5.0',
        },
        global: {
          stubs: {
            PackageTrendsChart: {
              template: '<div data-test-id="package-trends-chart-stub"></div>',
            },
            PackageVersionDistribution: {
              template: '<div data-test-id="package-version-distribution-stub"></div>',
            },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  // Compare feature components
  describe('CompareFacetSelector', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CompareFacetSelector)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CompareLineChart', () => {
    it('should have no accessibility violations with no packages', async () => {
      const component = await mountSuspended(CompareLineChart, {
        props: { packages: [] },
        global: {
          stubs: {
            TrendsChart: {
              template: '<div data-test-id="trends-chart-stub"></div>',
            },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with packages selected', async () => {
      const component = await mountSuspended(CompareLineChart, {
        props: { packages: ['vue', 'react'] },
        global: {
          stubs: {
            TrendsChart: {
              template: '<div data-test-id="trends-chart-stub"></div>',
            },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ComparePackageSelector', () => {
    it('should have no accessibility violations with no packages', async () => {
      const component = await mountSuspended(ComparePackageSelector, {
        props: { modelValue: [] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with packages selected', async () => {
      const component = await mountSuspended(ComparePackageSelector, {
        props: { modelValue: ['vue', 'react'] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations at max packages', async () => {
      const component = await mountSuspended(ComparePackageSelector, {
        props: { modelValue: ['vue', 'react', 'angular', 'svelte'], max: 4 },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageTypeahead', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageTypeahead, {
        props: { inputId: 'typeahead-a11y', label: 'Search for packages' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CompareFacetRow', () => {
    it('should have no accessibility violations with basic values', async () => {
      const component = await mountSuspended(CompareFacetRow, {
        props: {
          label: 'Downloads',
          description: 'Weekly download count',
          values: [
            { raw: 1000, display: '1,000' },
            { raw: 2000, display: '2,000' },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when loading', async () => {
      const component = await mountSuspended(CompareFacetRow, {
        props: {
          label: 'Install Size',
          description: 'Total install size',
          values: [null, null],
          loading: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CompareComparisonGrid', () => {
    it('should have no accessibility violations with 2 columns', async () => {
      const component = await mountSuspended(CompareComparisonGrid, {
        props: {
          columns: [{ name: 'vue' }, { name: 'react' }],
        },
        slots: {
          default: '<div>Grid content</div>',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with 3 columns', async () => {
      const component = await mountSuspended(CompareComparisonGrid, {
        props: {
          columns: [{ name: 'vue' }, { name: 'react' }, { name: 'angular' }],
        },
        slots: {
          default: '<div>Grid content</div>',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with no-dependency column', async () => {
      const component = await mountSuspended(CompareComparisonGrid, {
        props: {
          columns: [{ name: 'vue' }, { name: 'react' }],
          showNoDependency: true,
        },
        slots: {
          default: '<div>Grid content</div>',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CompareReplacementSuggestion', () => {
    it('should have no accessibility violations for nodep variant with native replacement', async () => {
      const component = await mountSuspended(CompareReplacementSuggestion, {
        props: {
          packageName: 'array-includes',
          mapping: {
            type: 'module',
            moduleName: 'array-includes',
            replacements: ['Array.prototype.includes'],
          },
          replacement: {
            id: 'Array.prototype.includes',
            type: 'native',
            url: {
              type: 'mdn',
              id: 'Web/JavaScript/Reference/Global_Objects/Array/includes',
            },
            webFeatureId: {
              featureId: 'array-includes',
              compatKey: 'javascript.builtins.Array.includes',
            },
            engines: [
              { engine: 'chrome', minVersion: '47' },
              { engine: 'edge', minVersion: '14' },
              { engine: 'firefox', minVersion: '43' },
              { engine: 'safari', minVersion: '9' },
              { engine: 'nodejs', minVersion: '6.0.0' },
            ],
          },
          variant: 'nodep',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for nodep variant with simple replacement', async () => {
      const component = await mountSuspended(CompareReplacementSuggestion, {
        props: {
          packageName: 'is-even',
          mapping: {
            type: 'module',
            moduleName: 'is-even',
            replacements: ['snippet::is-even'],
          },
          replacement: {
            id: 'snippet::is-even',
            type: 'simple',
            description: 'You can use the modulo operator to check if a number is even.',
            example: '(n % 2) === 0',
          },
          variant: 'nodep',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for info variant with documented replacement', async () => {
      const component = await mountSuspended(CompareReplacementSuggestion, {
        props: {
          packageName: 'moment',
          mapping: {
            type: 'module',
            moduleName: 'moment',
            replacements: ['day.js', 'date-fns', 'luxon', 'Date'],
            url: { type: 'e18e', id: 'moment' },
          },
          replacement: {
            id: 'day.js',
            type: 'documented',
            url: { type: 'e18e', id: 'moment' },
            replacementModule: 'day.js',
          },
          variant: 'info',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageManagerSelect', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageManagerSelect)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CompareFacetCard', () => {
    it('should have no accessibility violations with numeric values', async () => {
      const component = await mountSuspended(CompareFacetCard, {
        props: {
          label: 'Downloads',
          description: 'Weekly download count',
          values: [
            { raw: 1000, display: '1,000' },
            { raw: 2000, display: '2,000' },
          ],
          headers: ['vue', 'react'],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when loading', async () => {
      const component = await mountSuspended(CompareFacetCard, {
        props: {
          label: 'Install Size',
          values: [null, null],
          headers: ['vue', 'react'],
          facetLoading: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SettingsAccentColorPicker', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SettingsAccentColorPicker)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SettingsBgThemePicker', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SettingsBgThemePicker)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SettingsFgThemePicker', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SettingsFgThemePicker)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('TooltipBase', () => {
    it('should have no accessibility violations when hidden', async () => {
      const component = await mountSuspended(TooltipBase, {
        props: { text: 'Tooltip text', isVisible: false },
        slots: { default: '<button>Trigger</button>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when visible', async () => {
      const component = await mountSuspended(TooltipBase, {
        props: { text: 'Tooltip text', isVisible: true },
        slots: { default: '<button>Trigger</button>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BuildEnvironment', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BuildEnvironment)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in footer mode', async () => {
      const component = await mountSuspended(BuildEnvironment, {
        props: { footer: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ButtonCopyMd', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ButtonCopyMd, {
        props: {
          fetchMarkdown: () => Promise.resolve(),
          markdown: '# hallo',
          status: 'success',
          text: 'copy test',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CallToAction', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CallToAction)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CopyToClipboardButton', () => {
    it('should have no accessibility violations in default state', async () => {
      const component = await mountSuspended(CopyToClipboardButton, {
        props: { copied: false },
        slots: { default: '<code>npm install vue</code>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in copied state', async () => {
      const component = await mountSuspended(CopyToClipboardButton, {
        props: { copied: true },
        slots: { default: '<code>npm install vue</code>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Changelog', () => {
    it('ChangelogCard should have no accessibility violations', async () => {
      const component = await mountSuspended(ChangelogCard, {
        props: {
          release: {
            html: '<p>test a11y</p>',
            id: 'a11y',
            title: '1.0.0',
            publishedAt: '2026-02-11 10:00:00.000Z',
            link: 'https://github.com/nuxt/nuxt/releases/tag/v4.4.5',
            tag: 'test',
          },
          baseUrl: '/api/changelog/releases/test/test',
          tocHeaderClass: 'toc',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('ChangelogSkeleton', async () => {
      const component = await mountSuspended(ChangelogSkeleton)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('ChangelogErrorMsg should have no accessibility violations for warning variant', async () => {
      const component = await mountSuspended(ChangelogErrorMsg, {
        props: {
          changelogLink: 'https://github.com/npmx-dev/npmx.dev/releases/',
          pkgName: 'npmx-dev',
          viewOnGit: 'View on Github',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('CollapsibleSection', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Section Title', id: 'test-section' },
        slots: { default: '<p>Section content</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom heading level', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: {
          title: 'Section Title',
          id: 'test-section',
          headingLevel: 'h3',
        },
        slots: { default: '<p>Section content</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when loading', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Section Title', id: 'test-section', isLoading: true },
        slots: { default: '<p>Loading content...</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with a subtitle', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: {
          title: 'Section Title',
          subtitle: 'Describes the section',
          id: 'test-section',
        },
        slots: { default: '<p>Section content</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('exposes the title as a button inside the heading', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Dependencies', id: 'test-section', headingLevel: 'h3' },
        slots: { default: '<p>Section content</p>' },
      })

      const toggle = component.get('h3 button')
      expect(toggle.text()).toContain('Dependencies')
    })

    it('toggles aria-expanded when the title button is activated', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Dependencies', id: 'test-section' },
        slots: { default: '<p>Section content</p>' },
      })

      const toggle = component.get('#test-section-collapsible-button')
      expect(toggle.attributes('aria-expanded')).toBe('true')

      await toggle.trigger('click')
      expect(toggle.attributes('aria-expanded')).toBe('false')

      await toggle.trigger('click')
      expect(toggle.attributes('aria-expanded')).toBe('true')
    })

    it('points aria-controls at the content it expands', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Dependencies', id: 'test-section' },
        slots: { default: '<p>Section content</p>' },
      })

      const controls = component.get('#test-section-collapsible-button').attributes('aria-controls')
      expect(controls).toBe('test-section-collapsible-content')
      expect(component.find(`#${controls}`).exists()).toBe(true)
    })

    it('gives the section link button an accessible name', async () => {
      const component = await mountSuspended(CollapsibleSection, {
        props: { title: 'Dependencies', id: 'test-section' },
        slots: { default: '<p>Section content</p>' },
      })

      const linkButton = component
        .findAll('button')
        .find(b => b.attributes('aria-label')?.includes('Dependencies'))
      expect(linkButton).toBeDefined()
    })

    it('copies the current url with the section hash', async () => {
      let copiedText: string | undefined

      const writeSpy = vi.spyOn(navigator.clipboard, 'write').mockImplementation(async items => {
        copiedText = await (await items[0]!.getType('text/plain')).text()
      })
      const execSpy = vi.spyOn(document, 'execCommand').mockImplementation(command => {
        if (command === 'copy') {
          copiedText = (document.activeElement as HTMLTextAreaElement | null)?.value
        }
        return true
      })

      try {
        const component = await mountSuspended(CollapsibleSection, {
          props: { title: 'Dependencies', id: 'test-section' },
          slots: { default: '<p>Section content</p>' },
        })

        const linkButton = component
          .findAll('button')
          .find(b => b.attributes('aria-label')?.includes('Dependencies'))
        expect(linkButton).toBeDefined()

        await linkButton!.trigger('click')
        await vi.waitFor(() => {
          expect(copiedText).toBeDefined()
        })

        const copied = new URL(copiedText!)
        expect(copied.hash).toBe('#test-section')
        expect(copied.origin).toBe(window.location.origin)
        expect(copied.pathname).toBe(window.location.pathname)
      } finally {
        writeSpy.mockRestore()
        execSpy.mockRestore()
      }
    })
  })

  describe('TerminalExecute', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(TerminalExecute, {
        props: { packageName: 'create-vite' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for create package', async () => {
      const component = await mountSuspended(TerminalExecute, {
        props: { packageName: 'create-vite', isCreatePackage: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('LicenseDisplay', () => {
    it('should have no accessibility violations with simple license', async () => {
      const component = await mountSuspended(LicenseDisplay, {
        props: { license: 'MIT' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with compound license', async () => {
      const component = await mountSuspended(LicenseDisplay, {
        props: { license: 'MIT OR Apache-2.0' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageInstallScripts', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageInstallScripts, {
        props: {
          packageName: 'esbuild',
          version: '0.25.0',
          installScripts: {
            scripts: ['postinstall'],
            content: { postinstall: 'node install.js' },
            npxDependencies: {},
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with npx dependencies', async () => {
      const component = await mountSuspended(PackageInstallScripts, {
        props: {
          packageName: 'husky',
          version: '9.1.0',
          installScripts: {
            scripts: ['postinstall'],
            content: { postinstall: 'husky install' },
            npxDependencies: { husky: '^9.0.0' },
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AuthorAvatar', () => {
    it('should have no accessibility violations with fallback text', async () => {
      const component = await mountSuspended(AuthorAvatar, {
        props: {
          author: {
            name: 'Daniel Roe',
            blueskyHandle: 'danielroe.dev',
            avatar: null,
            profileUrl: 'https://bsky.app/profile/danielroe.dev',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('AuthorList', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(AuthorList, {
        props: {
          authors: [
            {
              name: 'Daniel Roe',
              blueskyHandle: 'danielroe.dev',
              avatar: null,
              profileUrl: 'https://bsky.app/profile/danielroe.dev',
            },
            { name: 'Salma Alam-Naylor', avatar: null, profileUrl: null },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlogPostWrapper', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BlogPostWrapper, {
        props: {
          frontmatter: {
            authors: [{ name: 'Daniel Roe', blueskyHandle: 'danielroe.dev' }],
            title: 'Building Accessible Vue Components',
            date: '2024-06-15',
            description: 'A guide to building accessible components in Vue.js applications.',
            path: '/blog/building-accessible-vue-components',
            slug: 'building-accessible-vue-components',
          },
        },
        slots: { default: '<p>Blog post content here.</p>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('NoodleListCard', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(NoodleListCard, {
        props: {
          noodle: {
            key: 'press',
            slug: 'press',
            title: 'Press',
            date: '2026-05-01',
            dateTo: '2026-05-04',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlueskyComment', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BlueskyComment, {
        props: {
          comment: {
            uri: 'at://did:plc:2gkh62xvzokhlf6li4ol3b3d/app.bsky.feed.post/3mcg7k75fdc2k',
            cid: 'bafyreigincphooxt7zox3blbocf6hnczzv36fkuj2zi5iuzpjgq6gk6pju',
            author: {
              did: 'did:plc:2gkh62xvzokhlf6li4ol3b3d',
              handle: 'patak.cat',
              displayName: 'patak',
              avatar:
                'https://cdn.bsky.app/img/avatar/plain/did:plc:2gkh62xvzokhlf6li4ol3b3d/bafkreifgzl4e5jqlakd77ajvnilsb5tufsv24h2sxfwmitkzxrh3sk6mhq@jpeg',
            },
            text: 'our kids will need these new stories, thanks for writing this Daniel',
            createdAt: '2026-01-14T23:22:05.257Z',
            likeCount: 13,
            replyCount: 0,
            repostCount: 0,
            replies: [],
          },
          depth: 0,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlueskyComments', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BlueskyComments, {
        props: {
          postUri: 'at://did:plc:jbeaa5kdaladzwq3r7f5xgwe/app.bsky.feed.post/3mcg6svsgsm2k',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlogPostListCard', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BlogPostListCard, {
        props: {
          authors: [
            {
              name: 'Daniel Roe',
              blueskyHandle: 'danielroe.dev',
              avatar: null,
              profileUrl: 'https://bsky.app/profile/danielroe.dev',
            },
          ],
          title: 'Building Accessible Vue Components',
          topics: ['accessibility', 'vue'],
          excerpt: 'A guide to building accessible components in Vue.js applications.',
          published: '2024-06-15',
          path: 'alpha-release',
          index: 0,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlogPostFederatedArticles', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(BlogPostFederatedArticles, {
        props: {
          headline: 'Read more on Bluesky',
          articles: [
            {
              url: 'https://example.com/post-1',
              title: 'Federated Testing Patterns',
              description: 'How to keep accessibility checks simple and maintainable.',
              authorHandle: 'danielroe.dev',
            },
            {
              url: 'https://example.com/post-2',
              title: 'Composable Data in Vue',
              description: 'Practical patterns for data composition in Vue components.',
              authorHandle: 'salma.dev',
            },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageReplacement', () => {
    it('should have no accessibility violations for native replacement', async () => {
      const component = await mountSuspended(PackageReplacement, {
        props: {
          mapping: {
            type: 'module',
            moduleName: 'array-every',
            replacements: ['Array.prototype.every'],
          },
          replacement: {
            id: 'Array.prototype.every',
            type: 'native',
            url: {
              type: 'mdn',
              id: 'Web/JavaScript/Reference/Global_Objects/Array/every',
            },
            engines: [
              { engine: 'nodejs', minVersion: '0.10.0' },
              { engine: 'chrome', minVersion: '1' },
            ],
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for simple replacement', async () => {
      const component = await mountSuspended(PackageReplacement, {
        props: {
          mapping: {
            type: 'module',
            moduleName: 'is-even',
            replacements: ['snippet::is-even'],
          },
          replacement: {
            id: 'snippet::is-even',
            type: 'simple',
            description: 'You can use the modulo operator to check if a number is even.',
            example: '(n % 2) === 0',
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSidebar', () => {
    it('should have no accessibility violations with slot content', async () => {
      const component = await mountSuspended(PackageSidebar, {
        slots: {
          default: () => h('div', 'Sidebar content'),
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSkillsCard', () => {
    it('should have no accessibility violations with skills', async () => {
      const component = await mountSuspended(PackageSkillsCard, {
        props: {
          packageName: 'vue',
          skills: [
            {
              name: 'Vue Components',
              description: 'Create Vue components',
              dirName: 'vue-components',
            },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should render nothing when no skills', async () => {
      const component = await mountSuspended(PackageSkillsCard, {
        props: {
          packageName: 'vue',
          skills: [],
        },
      })
      // Empty skills array means the component renders nothing
      expect(component.html()).toBe('<!--v-if-->')
    })
  })

  describe('Readme', () => {
    it('should have no accessibility violations with slot content', async () => {
      const component = await mountSuspended(Readme, {
        props: {
          html: '<h3>README</h3><p>Some content</p>',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ReadmeTocDropdown', () => {
    const mockToc = [
      { text: 'Installation', id: 'installation', depth: 2 },
      { text: 'Usage', id: 'usage', depth: 2 },
      { text: 'Basic Usage', id: 'basic-usage', depth: 3 },
      { text: 'Advanced Usage', id: 'advanced-usage', depth: 3 },
      { text: 'API', id: 'api', depth: 2 },
    ]

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ReadmeTocDropdown, {
        props: { toc: mockToc },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with active item', async () => {
      const component = await mountSuspended(ReadmeTocDropdown, {
        props: {
          toc: mockToc,
          activeId: 'usage',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with nested active item', async () => {
      const component = await mountSuspended(ReadmeTocDropdown, {
        props: {
          toc: mockToc,
          activeId: 'basic-usage',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty toc', async () => {
      const component = await mountSuspended(ReadmeTocDropdown, {
        props: { toc: [] },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('HeaderSearchBox', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(HeaderSearchBox)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('InputBase', () => {
    it('should have no accessibility violations (with aria-label)', async () => {
      const component = await mountSuspended(InputBase, {
        attrs: { 'aria-label': 'Search input' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with placeholder', async () => {
      const component = await mountSuspended(InputBase, {
        attrs: { 'placeholder': 'Search...', 'aria-label': 'Search' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when disabled', async () => {
      const component = await mountSuspended(InputBase, {
        attrs: { 'disabled': '', 'aria-label': 'Disabled input' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with size small', async () => {
      const component = await mountSuspended(InputBase, {
        props: { size: 'sm' },
        attrs: { 'aria-label': 'Small input' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with size large', async () => {
      const component = await mountSuspended(InputBase, {
        props: { size: 'lg' },
        attrs: { 'aria-label': 'Large input' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with noCorrect false', async () => {
      const component = await mountSuspended(InputBase, {
        props: { noCorrect: false },
        attrs: { 'aria-label': 'Input with corrections' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SelectBase', () => {
    it('should have no accessibility violations with options and aria-label', async () => {
      const component = await mountSuspended(SelectBase, {
        attrs: { 'aria-label': 'Choose option' },
        slots: {
          default:
            '<option value="option1">option 1</option><option value="option2">option 2</option>',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when disabled', async () => {
      const component = await mountSuspended(SelectBase, {
        props: { disabled: true },
        attrs: { 'aria-label': 'Disabled select' },
        slots: { default: '<option value="option1">option 1</option>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with size small', async () => {
      const component = await mountSuspended(SelectBase, {
        props: { size: 'sm' },
        attrs: { 'aria-label': 'Small select' },
        slots: { default: '<option value="option1">option 1</option>' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SelectField', () => {
    it('should have no accessibility violations with label and items', async () => {
      const component = await mountSuspended(SelectField, {
        props: {
          id: 'a11y-select-1',
          label: 'Choose one',
          items: [
            { label: 'Option 1', value: 'option1' },
            { label: 'Option 2', value: 'option2' },
          ],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with hiddenLabel', async () => {
      const component = await mountSuspended(SelectField, {
        props: {
          id: 'a11y-select-2',
          label: 'Hidden',
          hiddenLabel: true,
          items: [{ label: 'Option 1', value: 'option1' }],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when disabled', async () => {
      const component = await mountSuspended(SelectField, {
        props: {
          id: 'a11y-select-3',
          selectAttrs: { 'aria-label': 'Disabled select' },
          items: [{ label: 'Option 1', value: 'option1' }],
          disabled: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with size small', async () => {
      const component = await mountSuspended(SelectField, {
        props: {
          id: 'a11y-select-4',
          selectAttrs: { 'aria-label': 'Disabled select' },
          items: [{ label: 'Option 1', value: 'option1' }],
          size: 'sm',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SearchSuggestionCard', () => {
    it('should have no accessibility violations for user suggestion', async () => {
      const component = await mountSuspended(SearchSuggestionCard, {
        props: { type: 'user', name: 'testuser' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for org suggestion', async () => {
      const component = await mountSuspended(SearchSuggestionCard, {
        props: { type: 'org', name: 'testorg' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for exact match', async () => {
      const component = await mountSuspended(SearchSuggestionCard, {
        props: { type: 'user', name: 'exactuser', isExactMatch: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('InstantSearch', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(InstantSearch)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SearchProviderToggle', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SearchProviderToggle)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SearchProviderToggle.server', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SearchProviderToggleServer)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Toggle.server', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ToggleServer, {
        props: { label: 'Enable feature' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with description', async () => {
      const component = await mountSuspended(ToggleServer, {
        props: {
          label: 'Enable feature',
          description: 'This enables the feature',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Toggle', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SettingsToggle, {
        props: { label: 'Enable feature', modelValue: false },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with description', async () => {
      const component = await mountSuspended(SettingsToggle, {
        props: {
          label: 'Enable feature',
          description: 'This enables the feature',
          modelValue: false,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when checked', async () => {
      const component = await mountSuspended(SettingsToggle, {
        props: { label: 'Enable feature', modelValue: true },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('VersionSelector', () => {
    const mockVersions = {
      '3.5.0': {},
      '3.4.0': {},
      '3.3.0': {},
    }
    const mockDistTags = {
      latest: '3.5.0',
      next: '3.4.0',
    }

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(VersionSelector, {
        props: {
          packageName: 'vue',
          currentVersion: '3.5.0',
          versions: mockVersions,
          distTags: mockDistTags,
          urlPattern: '/package/vue/v/{version}',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with non-latest version', async () => {
      const component = await mountSuspended(VersionSelector, {
        props: {
          packageName: 'vue',
          currentVersion: '3.4.0',
          versions: mockVersions,
          distTags: mockDistTags,
          urlPattern: '/package/vue/v/{version}',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('BlueskyPostEmbed', () => {
    it('should have no accessibility violations in pending state', async () => {
      const component = await mountSuspended(BlueskyPostEmbed, {
        props: {
          uri: 'at://did:plc:u5zp7npt5kpueado77kuihyz/app.bsky.feed.post/3mejzn5mrcc2g',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('UserAvatar', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(UserAvatar, {
        props: { username: 'testuser', size: 'lg' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with short username', async () => {
      const component = await mountSuspended(UserAvatar, {
        props: { username: 'a', size: 'lg' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with long username', async () => {
      const component = await mountSuspended(UserAvatar, {
        props: { username: 'verylongusernameexample', size: 'lg' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations in all sizes', async () => {
      const sizes = ['xs', 'lg'] as const
      for (const size of sizes) {
        const component = await mountSuspended(UserAvatar, {
          props: { username: 'testuser', size },
        })
        const results = await runAxe(component)
        expect(results.violations).toEqual([])
      }
    })
  })

  describe('PackageInstallDownloadTarball', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageInstallDownloadTarball, {
        props: {
          packageName: 'vue',
          version: {
            version: '3.5.0',
            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
          } as any,
          dependencies: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageInstallDropdown', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageInstallDropdown, {
        props: {
          packageName: 'vue',
          headingId: 'get-started-test',
          displayVersion: {
            version: '3.5.0',
            dist: { tarball: 'https://registry.npmjs.org/vue/-/vue-3.5.0.tgz' },
          } as any,
          typesPackageName: '@types/vue',
          devDependencySuggestion: { recommended: true },
          executableInfo: { hasExecutable: true, primaryCommand: 'vue' },
          createPackageInfo: { packageName: 'create-vue' },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageInstallAdditionalCommands', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageInstallAdditionalCommands, {
        props: {
          packageName: 'vue',
          selectedPm: 'npm',
          typesPackageName: '@types/vue',
          showTypes: true,
          devDependencySuggestion: { recommended: true },
          executableInfo: { hasExecutable: true, primaryCommand: 'vue' },
          createPackageInfo: { packageName: 'create-vue' },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSecurityDowngradeAlert', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageSecurityDowngradeAlert, {
        props: {
          packageName: 'vue',
          downgrade: {
            downgradedVersion: '2.0.0',
            downgradedTrustLevel: 'none',
            downgradedTrustedPublisher: true,
            trustedVersion: '1.9.0',
            trustedTrustLevel: 'provenance',
          },
          fallbackInstallText: 'Consider installing 1.9.0 instead.',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  // Diff components
  describe('DiffFileTree', () => {
    const mockFiles = [
      { path: 'src/index.ts', type: 'modified' as const },
      { path: 'src/utils/helper.ts', type: 'added' as const },
      { path: 'README.md', type: 'modified' as const },
      { path: 'old-file.js', type: 'removed' as const },
    ]

    it('should have no accessibility violations with files', async () => {
      const component = await mountSuspended(DiffFileTree, {
        props: {
          files: mockFiles,
          selectedPath: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with selected file', async () => {
      const component = await mountSuspended(DiffFileTree, {
        props: {
          files: mockFiles,
          selectedPath: 'src/index.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty files', async () => {
      const component = await mountSuspended(DiffFileTree, {
        props: {
          files: [],
          selectedPath: null,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffLine', () => {
    it('should have no accessibility violations for normal line', async () => {
      const component = await mountSuspended(DiffLine, {
        props: {
          line: {
            type: 'normal',
            oldLineNumber: 1,
            newLineNumber: 1,
            content: [{ value: 'const x = 1;', type: 'normal' }],
          },
        },
        global: {
          provide: {
            diffContext: {
              fileStatus: computed(() => 'modify'),
              language: computed(() => 'typescript'),
              enableShiki: computed(() => false),
              wordWrap: computed(() => false),
            },
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for insert line', async () => {
      const component = await mountSuspended(DiffLine, {
        props: {
          line: {
            type: 'insert',
            newLineNumber: 5,
            content: [{ value: 'const newVar = true;', type: 'insert' }],
          },
        },
        global: {
          provide: {
            diffContext: {
              fileStatus: computed(() => 'modify'),
              language: computed(() => 'typescript'),
              enableShiki: computed(() => false),
              wordWrap: computed(() => false),
            },
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for delete line', async () => {
      const component = await mountSuspended(DiffLine, {
        props: {
          line: {
            type: 'delete',
            oldLineNumber: 3,
            content: [{ value: 'const oldVar = false;', type: 'delete' }],
          },
        },
        global: {
          provide: {
            diffContext: {
              fileStatus: computed(() => 'modify'),
              language: computed(() => 'typescript'),
              enableShiki: computed(() => false),
              wordWrap: computed(() => false),
            },
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with word-level diff segments', async () => {
      const component = await mountSuspended(DiffLine, {
        props: {
          line: {
            type: 'insert',
            newLineNumber: 10,
            content: [
              { value: 'const ', type: 'normal' },
              { value: 'newName', type: 'insert' },
              { value: ' = 1;', type: 'normal' },
            ],
          },
        },
        global: {
          provide: {
            diffContext: {
              fileStatus: computed(() => 'modify'),
              language: computed(() => 'typescript'),
              enableShiki: computed(() => false),
              wordWrap: computed(() => false),
            },
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffHunk', () => {
    const mockHunk = {
      type: 'hunk' as const,
      content: '@@ -1,5 +1,6 @@',
      oldStart: 1,
      oldLines: 5,
      newStart: 1,
      newLines: 6,
      lines: [
        {
          type: 'normal' as const,
          oldLineNumber: 1,
          newLineNumber: 1,
          content: [{ value: 'const a = 1;', type: 'normal' as const }],
        },
        {
          type: 'delete' as const,
          oldLineNumber: 2,
          content: [{ value: 'const b = 2;', type: 'delete' as const }],
        },
        {
          type: 'insert' as const,
          newLineNumber: 2,
          content: [{ value: 'const b = 3;', type: 'insert' as const }],
        },
      ],
    }

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(DiffHunk, {
        props: { hunk: mockHunk },
        global: {
          provide: {
            diffContext: {
              fileStatus: computed(() => 'modify'),
              language: computed(() => 'typescript'),
              enableShiki: computed(() => false),
              wordWrap: computed(() => false),
            },
          },
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffSkipBlock', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(DiffSkipBlock, {
        props: {
          count: 25,
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with custom content', async () => {
      const component = await mountSuspended(DiffSkipBlock, {
        props: {
          count: 50,
          content: '50 unchanged lines',
        },
        attachTo: (() => {
          const table = document.createElement('table')
          const tbody = document.createElement('tbody')
          table.appendChild(tbody)
          document.body.appendChild(table)
          return tbody
        })(),
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffTable', () => {
    const mockHunks = [
      {
        type: 'hunk' as const,
        content: '@@ -1,3 +1,4 @@',
        oldStart: 1,
        oldLines: 3,
        newStart: 1,
        newLines: 4,
        lines: [
          {
            type: 'normal' as const,
            oldLineNumber: 1,
            newLineNumber: 1,
            content: [{ value: 'line 1', type: 'normal' as const }],
          },
          {
            type: 'insert' as const,
            newLineNumber: 2,
            content: [{ value: 'new line', type: 'insert' as const }],
          },
        ],
      },
    ]

    it('should have no accessibility violations for modify type', async () => {
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: mockHunks,
          type: 'modify',
          fileName: 'test.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for add type', async () => {
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: mockHunks,
          type: 'add',
          fileName: 'new-file.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for delete type', async () => {
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: mockHunks,
          type: 'delete',
          fileName: 'removed.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with skip blocks', async () => {
      const hunksWithSkip = [
        ...mockHunks,
        { type: 'skip' as const, count: 20, content: '20 lines hidden' },
        {
          type: 'hunk' as const,
          content: '@@ -25,3 +26,3 @@',
          oldStart: 25,
          oldLines: 3,
          newStart: 26,
          newLines: 3,
          lines: [
            {
              type: 'normal' as const,
              oldLineNumber: 25,
              newLineNumber: 26,
              content: [{ value: 'line 25', type: 'normal' as const }],
            },
          ],
        },
      ]
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: hunksWithSkip,
          type: 'modify',
          fileName: 'large-file.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with word wrap enabled', async () => {
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: mockHunks,
          type: 'modify',
          fileName: 'test.ts',
          wordWrap: true,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with empty hunks', async () => {
      const component = await mountSuspended(DiffTable, {
        props: {
          hunks: [],
          type: 'modify',
          fileName: 'empty.ts',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffSidebarPanel', () => {
    const mockCompare = {
      package: 'test-package',
      from: '1.0.0',
      to: '2.0.0',
      packageJson: { from: {}, to: {} },
      files: {
        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
        removed: [{ path: 'old.ts', type: 'removed' as const, oldSize: 50 }],
        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
      },
      dependencyChanges: [
        {
          name: 'lodash',
          section: 'dependencies' as const,
          from: '^4.0.0',
          to: '^4.1.0',
          type: 'updated' as const,
          semverDiff: 'minor' as const,
        },
      ],
      stats: {
        totalFilesFrom: 10,
        totalFilesTo: 11,
        filesAdded: 1,
        filesRemoved: 1,
        filesModified: 1,
      },
      meta: {},
    }

    const mockAllChanges = [
      { path: 'new.ts', type: 'added' as const, newSize: 100 },
      { path: 'old.ts', type: 'removed' as const, oldSize: 50 },
      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
    ]

    const mockGroupedDeps = new Map([
      [
        'dependencies',
        [
          {
            name: 'lodash',
            section: 'dependencies' as const,
            from: '^4.0.0',
            to: '^4.1.0',
            type: 'updated' as const,
            semverDiff: 'minor' as const,
          },
        ],
      ],
    ])

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(DiffSidebarPanel, {
        props: {
          compare: mockCompare,
          groupedDeps: mockGroupedDeps,
          allChanges: mockAllChanges,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with selected file', async () => {
      const component = await mountSuspended(DiffSidebarPanel, {
        props: {
          compare: mockCompare,
          groupedDeps: mockGroupedDeps,
          allChanges: mockAllChanges,
          selectedFile: mockAllChanges[0],
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with file filter', async () => {
      const component = await mountSuspended(DiffSidebarPanel, {
        props: {
          compare: mockCompare,
          groupedDeps: mockGroupedDeps,
          allChanges: mockAllChanges,
          fileFilter: 'added',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with warnings', async () => {
      const compareWithWarnings = {
        ...mockCompare,
        meta: { warnings: ['Some files were truncated'] },
      }
      const component = await mountSuspended(DiffSidebarPanel, {
        props: {
          compare: compareWithWarnings,
          groupedDeps: mockGroupedDeps,
          allChanges: mockAllChanges,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with no dependency changes', async () => {
      const compareNoDeps = {
        ...mockCompare,
        dependencyChanges: [],
      }
      const component = await mountSuspended(DiffSidebarPanel, {
        props: {
          compare: compareNoDeps,
          groupedDeps: new Map(),
          allChanges: mockAllChanges,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffMobileSidebarDrawer', () => {
    const mockCompare = {
      package: 'test-package',
      from: '1.0.0',
      to: '2.0.0',
      packageJson: { from: {}, to: {} },
      files: {
        added: [{ path: 'new.ts', type: 'added' as const, newSize: 100 }],
        removed: [],
        modified: [{ path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 }],
      },
      dependencyChanges: [],
      stats: {
        totalFilesFrom: 5,
        totalFilesTo: 6,
        filesAdded: 1,
        filesRemoved: 0,
        filesModified: 1,
      },
      meta: {},
    }

    const mockAllChanges = [
      { path: 'new.ts', type: 'added' as const, newSize: 100 },
      { path: 'changed.ts', type: 'modified' as const, oldSize: 200, newSize: 250 },
    ]

    it('should have no accessibility violations when closed', async () => {
      const component = await mountSuspended(DiffMobileSidebarDrawer, {
        props: {
          compare: mockCompare,
          groupedDeps: new Map(),
          allChanges: mockAllChanges,
          open: false,
          packageName: 'nuxt',
          toVersion: '3.0.0',
          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations when open', async () => {
      const component = await mountSuspended(DiffMobileSidebarDrawer, {
        props: {
          compare: mockCompare,
          groupedDeps: new Map(),
          allChanges: mockAllChanges,
          open: true,
          packageName: 'nuxt',
          toVersion: '3.0.0',
          toVersionUrlPattern: 'https://npmx.dev/package/nuxt/v/3.0.0',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('DiffViewerPanel', () => {
    const mockFile = {
      path: 'src/index.ts',
      type: 'modified' as const,
      oldSize: 500,
      newSize: 600,
    }

    // Note: DiffViewerPanel fetches content from CDN, so we test the initial/loading states
    // Full diff rendering tests would require mocking fetch

    it('should have no accessibility violations in loading state', async () => {
      const component = await mountSuspended(DiffViewerPanel, {
        props: {
          packageName: 'test-package',
          fromVersion: '1.0.0',
          toVersion: '2.0.0',
          file: mockFile,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for added file', async () => {
      const addedFile = {
        path: 'src/new-feature.ts',
        type: 'added' as const,
        newSize: 200,
      }
      const component = await mountSuspended(DiffViewerPanel, {
        props: {
          packageName: 'test-package',
          fromVersion: '1.0.0',
          toVersion: '2.0.0',
          file: addedFile,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for removed file', async () => {
      const removedFile = {
        path: 'src/deprecated.ts',
        type: 'removed' as const,
        oldSize: 300,
      }
      const component = await mountSuspended(DiffViewerPanel, {
        props: {
          packageName: 'test-package',
          fromVersion: '1.0.0',
          toVersion: '2.0.0',
          file: removedFile,
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SizeIncrease', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SizeIncrease, {
        props: {
          diff: {
            direction: 'increase',
            comparisonVersion: '1.0.0',
            sizeRatio: 1,
            sizeIncrease: 200,
            currentSize: 400,
            previousSize: 200,
            depDiff: 5,
            currentDeps: 10,
            previousDeps: 5,
            sizeThresholdExceeded: true,
            depThresholdExceeded: true,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with only size increase', async () => {
      const component = await mountSuspended(SizeIncrease, {
        props: {
          diff: {
            direction: 'increase',
            comparisonVersion: '1.0.0',
            sizeRatio: 1,
            sizeIncrease: 200,
            currentSize: 400,
            previousSize: 200,
            depDiff: 0,
            currentDeps: 5,
            previousDeps: 5,
            sizeThresholdExceeded: true,
            depThresholdExceeded: false,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with only dependency increase', async () => {
      const component = await mountSuspended(SizeIncrease, {
        props: {
          diff: {
            direction: 'increase',
            comparisonVersion: '1.0.0',
            sizeRatio: 0,
            sizeIncrease: 0,
            currentSize: 200,
            previousSize: 200,
            depDiff: 5,
            currentDeps: 10,
            previousDeps: 5,
            sizeThresholdExceeded: false,
            depThresholdExceeded: true,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('SizeDecrease', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(SizeDecrease, {
        props: {
          diff: {
            direction: 'decrease',
            comparisonVersion: '1.0.0',
            sizeRatio: -0.5,
            sizeIncrease: -200,
            currentSize: 200,
            previousSize: 400,
            depDiff: -5,
            currentDeps: 5,
            previousDeps: 10,
            sizeThresholdExceeded: true,
            depThresholdExceeded: true,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with only size decrease', async () => {
      const component = await mountSuspended(SizeDecrease, {
        props: {
          diff: {
            direction: 'decrease',
            comparisonVersion: '1.0.0',
            sizeRatio: -0.5,
            sizeIncrease: -200,
            currentSize: 200,
            previousSize: 400,
            depDiff: 0,
            currentDeps: 5,
            previousDeps: 5,
            sizeThresholdExceeded: true,
            depThresholdExceeded: false,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations with only dependency decrease', async () => {
      const component = await mountSuspended(SizeDecrease, {
        props: {
          diff: {
            direction: 'decrease',
            comparisonVersion: '1.0.0',
            sizeRatio: 0,
            sizeIncrease: 0,
            currentSize: 200,
            previousSize: 200,
            depDiff: -5,
            currentDeps: 5,
            previousDeps: 10,
            sizeThresholdExceeded: false,
            depThresholdExceeded: true,
          },
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageActionBar', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageActionBar)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSelectionView', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageSelectionView)
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations changing view mode', async () => {
      const component = await mountSuspended(PackageSelectionView, {
        props: {
          viewMode: 'table',
        },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('PackageSelectionCheckbox', () => {
    it('should have no accessibility violations when disabled', async () => {
      const component = await mountSuspended(PackageSelectionCheckbox, {
        props: {
          packageName: 'nuxt',
          checked: false,
          disabled: true,
        },
      })

      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(PackageSelectionCheckbox, {
        props: {
          packageName: 'nuxt',
          checked: false,
        },
      })

      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('Alert', () => {
    it('should have no accessibility violations for warning variant', async () => {
      const component = await mountSuspended(Alert, {
        props: { variant: 'warning', title: 'Warning title' },
        slots: { default: 'This is a warning message.' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations for error variant', async () => {
      const component = await mountSuspended(Alert, {
        props: { variant: 'error', title: 'Error title' },
        slots: { default: 'This is an error message.' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })

    it('should have no accessibility violations without title', async () => {
      const component = await mountSuspended(Alert, {
        props: { variant: 'warning' },
        slots: { default: 'This is a warning message.' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })

  describe('ProgressBar', () => {
    it('should have no accessibility violations', async () => {
      const component = await mountSuspended(ProgressBar, {
        props: { val: 99, label: 'Progress status for en' },
      })
      const results = await runAxe(component)
      expect(results.violations).toEqual([])
    })
  })
})

function applyTheme(colorMode: string, bgTheme: string | null) {
  document.documentElement.dataset.theme = colorMode
  document.documentElement.classList.add(colorMode)
  if (bgTheme) document.documentElement.dataset.bgTheme = bgTheme
}

describe('background theme accessibility', () => {
  const pairs = [
    ['light', 'neutral'],
    ['dark', 'neutral'],
    ['light', 'stone'],
    ['dark', 'stone'],
    ['light', 'zinc'],
    ['dark', 'zinc'],
    ['light', 'slate'],
    ['dark', 'slate'],
    ['light', 'black'],
    ['dark', 'black'],
  ] as const

  afterEach(() => {
    document.documentElement.removeAttribute('data-theme')
    document.documentElement.removeAttribute('data-bg-theme')
    document.documentElement.classList.remove('light', 'dark')
  })

  const packageResult = {
    package: {
      name: 'vue',
      version: '3.5.0',
      description: 'Framework',
      date: '2024-01-15T00:00:00.000Z',
      keywords: [],
      links: {},
      publisher: { username: 'evan' },
    },
    searchScore: 100000,
  }

  const components = [
    {
      name: 'AlertWarning',
      mount: () =>
        mountSuspended(Alert, {
          props: { variant: 'warning', title: 'Warning title' },
          slots: { default: '<p>Warning body</p>' },
        }),
    },
    {
      name: 'AlertError',
      mount: () =>
        mountSuspended(Alert, {
          props: { variant: 'error', title: 'Error title' },
          slots: { default: '<p>Error body</p>' },
        }),
    },
    { name: 'AppHeader', mount: () => mountSuspended(AppHeader) },
    { name: 'AppFooter', mount: () => mountSuspended(AppFooter) },
    { name: 'HeaderSearchBox', mount: () => mountSuspended(HeaderSearchBox) },
    {
      name: 'LoadingSpinner',
      mount: () => mountSuspended(LoadingSpinner, { props: { text: 'Loading...' } }),
    },
    {
      name: 'SettingsToggle',
      mount: () =>
        mountSuspended(SettingsToggle, {
          props: { label: 'Feature', description: 'Desc', modelValue: false },
        }),
    },
    {
      name: 'SettingsBgThemePicker',
      mount: () => mountSuspended(SettingsBgThemePicker),
    },
    {
      name: 'SettingsFgThemePicker',
      mount: () => mountSuspended(SettingsFgThemePicker),
    },
    {
      name: 'ProvenanceBadge',
      mount: () =>
        mountSuspended(ProvenanceBadge, {
          props: { packageName: 'vue', version: '3.0.0' },
        }),
    },
    {
      name: 'TrustedPublishingBadge',
      mount: () => mountSuspended(TrustedPublishingBadge, { props: { provider: 'github' } }),
    },
    {
      name: 'LicenseDisplay',
      mount: () => mountSuspended(LicenseDisplay, { props: { license: 'MIT' } }),
    },
    {
      name: 'DateTime',
      mount: () =>
        mountSuspended(DateTime, {
          props: { datetime: '2024-01-15T12:00:00.000Z' },
        }),
    },
    {
      name: 'ViewModeToggle',
      mount: () => mountSuspended(ViewModeToggle, { props: { modelValue: 'cards' } }),
    },
    {
      name: 'TooltipApp',
      mount: () =>
        mountSuspended(TooltipApp, {
          props: { text: 'Tooltip' },
          slots: { default: '<button>Trigger</button>' },
        }),
    },
    {
      name: 'CollapsibleSection',
      mount: () =>
        mountSuspended(CollapsibleSection, {
          props: { title: 'Title', id: 'section' },
          slots: { default: '<p>Content</p>' },
        }),
    },
    {
      name: 'FilterChips',
      mount: () =>
        mountSuspended(FilterChips, {
          props: {
            chips: [{ id: 'text', type: 'text', label: 'Search', value: 'react' }] as FilterChip[],
          },
        }),
    },
    {
      name: 'PackageCard',
      mount: () => mountSuspended(PackageCard, { props: { result: packageResult } }),
    },
    {
      name: 'PackageList',
      mount: () => mountSuspended(PackageList, { props: { results: [packageResult] } }),
    },
  ]

  /**
   * For performance, we pool axe runs for each theme combination, optimistically assuming no
   * violations will occur. If violations are found in the pooled run, we re-run axe on individual
   * components for precise results.
   */
  const pooledResults = new Map<string, Promise<AxeResults>>()

  function getPooledResults(colorMode: string, bgTheme: string) {
    const key = `${colorMode}:${bgTheme}`
    const cached = pooledResults.get(key)
    if (cached) return cached

    const promise = (async () => {
      const wrappers = await Promise.all(components.map(({ mount }) => mount()))
      const poolContainer = document.createElement('div')
      poolContainer.id = `a11y-theme-pool-${colorMode}-${bgTheme}`
      document.body.appendChild(poolContainer)
      mountedContainers.push(poolContainer)

      try {
        for (const wrapper of wrappers) {
          const el = wrapper.element.cloneNode(true) as HTMLElement
          poolContainer.appendChild(el)
        }

        await nextTick()
        return await axe.run(poolContainer, axeRunOptions)
      } finally {
        for (const wrapper of wrappers) {
          wrapper.unmount()
        }
      }
    })()

    pooledResults.set(key, promise)
    return promise
  }

  for (const { name, mount } of components) {
    describe(`${name} colors`, () => {
      for (const [colorMode, bgTheme] of pairs) {
        it(`${colorMode}/${bgTheme}`, async () => {
          applyTheme(colorMode, bgTheme)

          const pooled = await getPooledResults(colorMode, bgTheme)
          if (pooled.violations.length === 0) return

          const wrapper = await mount()
          try {
            const results = await runAxe(wrapper)
            expect(results.violations).toEqual([])
          } finally {
            wrapper.unmount()
          }
        })
      }
    })
  }
})