Merge branch 'main' into accessible-accent

Author: jellydeck

CONTRIBUTING.md

@@ -409,10 +409,10 @@ describe('featureName', () => {
 
 ### 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.
+All Vue components should have accessibility tests in `test/nuxt/a11y.spec.ts`. These tests use [axe-core](https://github.com/dequelabs/axe-core) to catch common accessibility violations and run in a real browser environment via Playwright.
 
 ```typescript
-import MyComponent from '~/components/MyComponent.vue'
+import { MyComponent } from '#components'
 
 describe('MyComponent', () => {
   it('should have no accessibility violations', async () => {
@@ -429,6 +429,8 @@ describe('MyComponent', () => {
 
 The `runAxe` helper handles DOM isolation and disables page-level rules that don't apply to isolated component testing.
 
+A coverage test in `test/unit/a11y-component-coverage.spec.ts` ensures all components are either tested or explicitly skipped with justification. When you add a new component, this test will fail until you add accessibility tests for it.
+
 > [!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.
 

app/components/AppHeader.vue

@@ -124,7 +124,7 @@ onKeyStroke(
         :class="{ 'hidden sm:flex': !isSearchExpanded }"
       >
         <!-- Search bar (hidden on mobile unless expanded) -->
-        <SearchBox
+        <HeaderSearchBox
           ref="searchBoxRef"
           :inputClass="isSearchExpanded ? 'w-full' : ''"
           :class="{ 'max-w-md': !isSearchExpanded }"
@@ -203,6 +203,6 @@ onKeyStroke(
     </nav>
 
     <!-- Mobile menu -->
-    <MobileMenu v-model:open="showMobileMenu" />
+    <HeaderMobileMenu v-model:open="showMobileMenu" />
   </header>
 </template>

app/components/AuthButton.client.vue

@@ -117,7 +117,7 @@ function handleReset() {
               <span class="text-sm text-fg-muted font-mono flex-1">
                 {{ getColumnLabel(column.id) }}
               </span>
-              <AppTooltip
+              <TooltipApp
                 v-if="column.disabled"
                 :id="`${column.id}-disabled-reason`"
                 class="text-fg-subtle"
@@ -127,7 +127,7 @@ function handleReset() {
                 <span class="size-4 flex justify-center items-center text-xs border rounded-full"
                   >i</span
                 >
-              </AppTooltip>
+              </TooltipApp>
             </label>
           </div>