Merge branch 'main' into vt/nullvoxpopuli

Author: vinnymac

.lighthouserc.cjs

@@ -35,14 +35,18 @@ module.exports = {
       chromePath: findChrome(),
       puppeteerScript: './lighthouse-setup.cjs',
       settings: {
-        onlyCategories: ['accessibility'],
+        onlyCategories: process.env.LH_PERF ? ['performance'] : ['accessibility'],
         skipAudits: ['valid-source-maps'],
       },
     },
     assert: {
-      assertions: {
-        'categories:accessibility': ['error', { minScore: 1 }],
-      },
+      assertions: process.env.LH_PERF
+        ? {
+            'cumulative-layout-shift': ['error', { maxNumericValue: 0 }],
+          }
+        : {
+            'categories:accessibility': ['error', { minScore: 1 }],
+          },
     },
     upload: {
       target: 'temporary-public-storage',

CONTRIBUTING.md

@@ -54,6 +54,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Unit tests](#unit-tests)
   - [Component accessibility tests](#component-accessibility-tests)
   - [Lighthouse accessibility tests](#lighthouse-accessibility-tests)
+  - [Lighthouse performance tests](#lighthouse-performance-tests)
   - [End to end tests](#end-to-end-tests)
   - [Test fixtures (mocking external APIs)](#test-fixtures-mocking-external-apis)
 - [Submitting changes](#submitting-changes)
@@ -114,6 +115,7 @@ pnpm test:unit        # Unit tests only
 pnpm test:nuxt        # Nuxt component tests
 pnpm test:browser     # Playwright E2E tests
 pnpm test:a11y        # Lighthouse accessibility audits
+pnpm test:perf        # Lighthouse performance audits (CLS)
 ```
 
 ### Project structure
@@ -641,18 +643,38 @@ pnpm test:a11y:prebuilt
 
 # Or run a single color mode manually
 pnpm build:test
-LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse-a11y.sh
+LIGHTHOUSE_COLOR_MODE=dark ./scripts/lighthouse.sh
 ```
 
 This requires Chrome or Chromium to be installed. The script will auto-detect common installation paths. Results are printed to the terminal and saved in `.lighthouseci/`.
 
 #### Configuration
 
-| File                         | Purpose                                                   |
-| ---------------------------- | --------------------------------------------------------- |
-| `.lighthouserc.cjs`          | Lighthouse CI config (URLs, assertions, Chrome path)      |
-| `lighthouse-setup.cjs`       | Puppeteer script for color mode + client-side API mocking |
-| `scripts/lighthouse-a11y.sh` | Shell wrapper that runs the audit for a given color mode  |
+| File                    | Purpose                                                   |
+| ----------------------- | --------------------------------------------------------- |
+| `.lighthouserc.cjs`     | Lighthouse CI config (URLs, assertions, Chrome path)      |
+| `lighthouse-setup.cjs`  | Puppeteer script for color mode + client-side API mocking |
+| `scripts/lighthouse.sh` | Shell wrapper that runs the audit for a given color mode  |
+
+### Lighthouse performance tests
+
+The project also runs Lighthouse performance audits to enforce zero Cumulative Layout Shift (CLS). These run separately from the accessibility audits and test the same set of URLs.
+
+#### How it works
+
+The same `.lighthouserc.cjs` config is shared between accessibility and performance audits. When the `LH_PERF` environment variable is set, the config switches from the `accessibility` category to the `performance` category and asserts that CLS is exactly 0.
+
+#### Running locally
+
+```bash
+# Build + run performance audit
+pnpm test:perf
+
+# Or against an existing test build
+pnpm test:perf:prebuilt
+```
+
+Unlike the accessibility audits, performance audits do not run in separate light/dark modes.
 
 ### End to end tests
 
@@ -767,8 +789,10 @@ Format: `type(scope): description`
 - `fix(i18n): update French translations`
 - `chore(deps): update vite to v6`
 
+Where front end changes are made, please include before and after screenshots in your pull request description.
+
 > [!NOTE]
-> The subject must start with a lowercase letter. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
+> Use lowercase letters in your pull request title. Individual commit messages within your PR don't need to follow this format since they'll be squashed.
 
 ### PR descriptions
 

app/components/AppFooter.vue

@@ -23,6 +23,9 @@ const showModal = () => modalRef.value?.showModal?.()
           <LinkBase :to="{ name: 'privacy' }">
             {{ $t('privacy_policy.title') }}
           </LinkBase>
+          <LinkBase :to="{ name: 'accessibility' }">
+            {{ $t('a11y.footer_title') }}
+          </LinkBase>
           <button
             type="button"
             class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"

app/components/AppHeader.vue

@@ -64,6 +64,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-carbon:security',
       },
+      {
+        name: 'Accessibility',
+        label: $t('a11y.title'),
+        to: { name: 'accessibility' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-carbon:accessibility-alt',
+      },
     ],
   },
   {

app/components/AppLogo.vue

@@ -24,6 +24,7 @@ defineProps<{
       font-size="420"
       font-weight="500"
       text-anchor="middle"
+      style="user-select: none"
     >
       <tspan>/</tspan>
     </text>

app/components/Code/Viewer.vue

@@ -57,6 +57,32 @@ watch(
   },
   { immediate: true },
 )
+
+// Use Nuxt's `navigateTo` for the rendered import links
+function handleImportLinkNavigate() {
+  if (!codeRef.value) return
+
+  const anchors = codeRef.value.querySelectorAll<HTMLAnchorElement>('a.import-link')
+  anchors.forEach(anchor => {
+    // NOTE: We do not need to remove previous listeners because we re-create the entire HTML content on each html update
+    anchor.addEventListener('click', event => {
+      if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return
+      const href = anchor.getAttribute('href')
+      if (href) {
+        event.preventDefault()
+        navigateTo(href)
+      }
+    })
+  })
+}
+
+watch(
+  () => props.html,
+  () => {
+    nextTick(handleImportLinkNavigate)
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

app/components/Compare/LineChart.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DownloadAnalytics from '../Package/DownloadAnalytics.vue'
+import TrendsChart from '../Package/TrendsChart.vue'
 
 const { packages } = defineProps<{
   packages: string[]
@@ -8,6 +8,6 @@ const { packages } = defineProps<{
 
 <template>
   <div class="font-mono">
-    <DownloadAnalytics :package-names="packages" :in-modal="false" />
+    <TrendsChart :package-names="packages" :in-modal="false" show-facet-selector />
   </div>
 </template>

app/components/Compare/PackageSelector.vue

@@ -89,6 +89,8 @@ function handleKeydown(e: KeyboardEvent) {
     } else if (hasMatchInPackages) {
       addPackage(inputValueTrim)
     }
+  } else if (e.key === 'Escape') {
+    inputValue.value = ''
   }
 }
 
@@ -185,7 +187,7 @@ function handleFocus() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <span class="text-sm text-accent italic flex items-center gap-2 block">
+            <span class="text-sm text-accent italic flex items-center gap-2">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
             </span>
@@ -204,7 +206,10 @@ function handleFocus() {
             @click="addPackage(result.name)"
           >
             <span class="font-mono text-sm text-fg block">{{ result.name }}</span>
-            <span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
+            <span
+              v-if="result.description"
+              class="text-xs text-fg-muted truncate mt-0.5 w-full block"
+            >
               {{ result.description }}
             </span>
           </ButtonBase>

app/components/Compare/ReplacementSuggestion.vue

@@ -25,7 +25,7 @@ const docUrl = computed(() => {
     class="flex items-start gap-2 px-3 py-2 rounded-lg text-sm"
     :class="
       variant === 'nodep'
-        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-700 dark:text-amber-400'
+        ? 'bg-amber-500/10 border border-amber-600/30 text-amber-800 dark:text-amber-400'
         : 'bg-blue-500/10 border border-blue-600/30 text-blue-700 dark:text-blue-400'
     "
   >

app/components/DependencyPathPopup.vue

@@ -68,7 +68,7 @@ function parsePackageString(pkg: string): { name: string; version: string } {
     <!-- Path badge button -->
     <button
       type="button"
-      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-700 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
+      class="path-badge font-mono text-3xs px-1.5 py-0.5 rounded bg-amber-500/10 border border-amber-500/30 text-amber-800 dark:text-amber-400 transition-all duration-200 ease-out whitespace-nowrap flex items-center gap-1 hover:bg-amber-500/20 hover:border-amber-500/50"
       :aria-expanded="isOpen"
       @click.stop="togglePopup"
     >