test: move axe test to mandated test suite

Author: serhalp

test/nuxt/a11y.spec.ts

@@ -140,6 +140,7 @@ import {
   CodeFileTree,
   CodeMobileTreeDrawer,
   CodeViewer,
+  CommandPalette,
   CopyToClipboardButton,
   CollapsibleSection,
   ColumnPicker,
@@ -455,6 +456,43 @@ describe('component accessibility audits', () => {
     })
   })
 
+  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(CommandPalette)])
+      },
+    })
+
+    afterEach(() => {
+      commandPalette?.close()
+      commandPalette?.clearPackageContext()
+      commandPalette = null
+    })
+
+    it('should have no accessibility violations when open', async () => {
+      const component = await mountSuspended(CommandPaletteHarness)
+      await nextTick()
+      await nextTick()
+
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('TagStatic', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(TagStatic, {

test/nuxt/components/CommandPalette.spec.ts

@@ -1,25 +1,7 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import 'axe-core'
-import type { AxeResults, RunOptions } from 'axe-core'
 import { afterEach, describe, expect, it } from 'vitest'
 import { CommandPalette } from '#components'
 
-declare const axe: {
-  run: (context: Element, options?: RunOptions) => Promise<AxeResults>
-}
-
-const axeRunOptions: RunOptions = {
-  resultTypes: ['violations'],
-  rules: {
-    'landmark-one-main': { enabled: false },
-    'region': { enabled: false },
-    'page-has-heading-one': { enabled: false },
-    'landmark-no-duplicate-banner': { enabled: false },
-    'landmark-no-duplicate-contentinfo': { enabled: false },
-    'landmark-no-duplicate-main': { enabled: false },
-  },
-}
-
 let commandPalette: ReturnType<typeof useCommandPalette> | null = null
 
 const CommandPaletteHarness = defineComponent({
@@ -47,18 +29,6 @@ afterEach(() => {
 })
 
 describe('CommandPalette', () => {
-  it('has no accessibility violations when open', async () => {
-    await mountSuspended(CommandPaletteHarness)
-    await nextTick()
-    await nextTick()
-
-    const dialog = document.getElementById('command-palette-modal')
-    expect(dialog).not.toBeNull()
-
-    const results = await axe.run(dialog!, axeRunOptions)
-    expect(results.violations).toEqual([])
-  })
-
   it('connects the input to an existing description, live status, and results region', async () => {
     await mountSuspended(CommandPaletteHarness)
     await nextTick()