Merge branch 'main' into Gianthard-cyh/main

Author: danielroe

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/app.vue

@@ -49,7 +49,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
 
   if (isEditableElement(e.target)) return
 
-  if (e.key === '/') {
+  if (isKeyWithoutModifiers(e, '/')) {
     e.preventDefault()
 
     // Try to find and focus search input on current page
@@ -65,7 +65,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     router.push('/search')
   }
 
-  if (e.key === '?') {
+  if (isKeyWithoutModifiers(e, '?')) {
     e.preventDefault()
     showKbdHints.value = true
   }
@@ -75,9 +75,20 @@ function handleGlobalKeyup() {
   showKbdHints.value = false
 }
 
+/* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */
+// https://codepen.io/paramagicdev/pen/gbYompq
+// see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022
+function handleModalLightDismiss(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (target.tagName === 'DIALOG' && target.hasAttribute('open')) {
+    ;(target as HTMLDialogElement).close()
+  }
+}
+
 if (import.meta.client) {
   useEventListener(document, 'keydown', handleGlobalKeydown)
   useEventListener(document, 'keyup', handleGlobalKeyup)
+  useEventListener(document, 'click', handleModalLightDismiss)
 }
 </script>
 

app/assets/main.css

@@ -233,3 +233,9 @@ input[type='search']::-webkit-search-results-decoration {
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
 }
+
+/* Locking the scroll whenever any of the modals are open */
+html:has(dialog:modal) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}

app/components/AppHeader.vue

@@ -62,23 +62,21 @@ function handleSearchFocus() {
 }
 
 onKeyStroke(
-  ',',
+  e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
   e => {
-    if (isEditableElement(e.target)) return
-
     e.preventDefault()
     navigateTo('/settings')
   },
   { dedupe: true },
 )
 
 onKeyStroke(
-  'c',
-  e => {
+  e =>
+    isKeyWithoutModifiers(e, 'c') &&
+    !isEditableElement(e.target) &&
     // Allow more specific handlers to take precedence
-    if (e.defaultPrevented) return
-    if (isEditableElement(e.target)) return
-
+    !e.defaultPrevented,
+  e => {
     e.preventDefault()
     navigateTo('/compare')
   },
@@ -140,7 +138,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 }"
@@ -219,6 +217,6 @@ onKeyStroke(
     </nav>
 
     <!-- Mobile menu -->
-    <MobileMenu v-model:open="showMobileMenu" />
+    <HeaderMobileMenu v-model:open="showMobileMenu" />
   </header>
 </template>