Merge branch 'main' into button-butter

Author: jellydeck

CONTRIBUTING.md

@@ -789,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="group cursor-pointer gap-x-1 items-center rounded-sm font-mono text-fg hover:decoration-accent active:scale-[0.98] underline underline-offset-[0.2rem] decoration-1 decoration-fg/30 outline-2 outline-transparent focus-visible:(outline-offset-2 outline-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

@@ -62,10 +62,11 @@ watch(
 function handleImportLinkNavigate() {
   if (!codeRef.value) return
 
-  const anchors = codeRef.value.querySelectorAll('a.import-link')
+  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()

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 = ''
   }
 }
 

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"
     >

app/components/Package/ChartModal.vue

@@ -1,8 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineProps<{
+  modalTitle?: string
+}>()
+</script>
 
 <template>
   <Modal
-    :modalTitle="$t('package.downloads.modal_title')"
+    :modalTitle="modalTitle ?? $t('package.trends.title')"
     id="chart-modal"
     class="h-full sm:h-min sm:border sm:border-border sm:rounded-lg shadow-xl sm:max-h-[90vh] sm:max-w-3xl"
   >