test: add basic axe component tests (#87)

Author: danielroe

CONTRIBUTING.md

@@ -227,7 +227,32 @@ describe('featureName', () => {
 > [!TIP]
 > If you need access to the Nuxt context in your unit or component test, place your test in the `test/nuxt/` directory and run with `pnpm test:nuxt`
 
-### E2e tests
+### Component accessibility tests
+
+All new components should have a basic accessibility test in `test/nuxt/components.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations.
+
+```typescript
+import MyComponent from '~/components/MyComponent.vue'
+
+describe('MyComponent', () => {
+  it('should have no accessibility violations', async () => {
+    const component = await mountSuspended(MyComponent, {
+      props: {
+        /* required props */
+      },
+    })
+    const results = await runAxe(component)
+    expect(results.violations).toEqual([])
+  })
+})
+```
+
+The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
+
+> [!IMPORTANT]
+> Just because axe-core doesn't find any obvious issues, it does not mean a component is accessible. Please do additional checks and use best practices.
+
+### End to end tests
 
 Write end-to-end tests using Playwright:
 

app/app.vue

@@ -285,7 +285,7 @@ button {
   border-left: 2px solid #262626;
   padding-left: 1rem;
   margin: 1.5rem 0;
-  color: #666666;
+  color: #8a8a8a;
   font-style: italic;
 }
 

app/components/CodeViewer.vue

@@ -66,6 +66,7 @@ watch(
         :id="`L${lineNum}`"
         :key="lineNum"
         :href="`#L${lineNum}`"
+        tabindex="-1"
         class="line-number block px-3 py-0 font-mono text-sm leading-6 cursor-pointer transition-colors no-underline"
         :class="[
           isLineSelected(lineNum)

app/components/OgImage/Default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]">
     <h1 class="text-6xl font-medium tracking-tight" style="font-family: 'Geist Mono'">
-      <span class="text-[#666666]" style="letter-spacing: -0.1em">./</span> npmx
+      <span class="text-fg-subtle" style="letter-spacing: -0.1em">./</span> npmx
     </h1>
     <h1 class="text-3xl font-medium tracking-tight">a better browser for the npm registry</h1>
 

app/components/OgImage/Package.vue

@@ -22,7 +22,7 @@ withDefaults(
       {{ name }}
     </h1>
 
-    <div class="flex items-center gap-6 mt-6 text-xl text-[#666666]">
+    <div class="flex items-center gap-6 mt-6 text-xl text-fg-subtle">
       <span>v{{ version }}</span>
       <span v-if="downloads">{{ downloads }}/wk</span>
       <span v-if="license">{{ license }}</span>

app/components/PackageDownloadStats.vue

@@ -59,7 +59,7 @@ const config = computed(() => ({
     title: {
       text: lastDatapoint.value,
       fontSize: 12,
-      color: '#666666',
+      color: '#8A8A8A',
       bold: false,
     },
     verticalIndicator: {

package.json

@@ -66,6 +66,7 @@
     "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "@vue/test-utils": "2.4.6",
+    "axe-core": "^4.11.1",
     "happy-dom": "20.3.5",
     "lint-staged": "16.2.7",
     "marked": "17.0.1",