fix: address a few small a11y issues

Author: danielroe

app/components/AppFooter.vue

@@ -17,7 +17,7 @@
           </a>
         </div>
       </div>
-      <p class="text-xs text-fg-subtle/60 text-center sm:text-left m-0">
+      <p class="text-xs text-fg-muted text-center sm:text-left m-0">
         npm is a registered trademark of npm, Inc. This site is not affiliated with npm, Inc.
       </p>
     </div>

app/pages/[...package].vue

@@ -415,7 +415,7 @@ defineOgImageComponent('Package', {
                 :href="`https://npm.chart.dev/${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
                 title="View download trends"
               >
                 <span class="i-carbon-chart-line w-3.5 h-3.5 inline-block" aria-hidden="true" />
@@ -433,7 +433,7 @@ defineOgImageComponent('Package', {
                 :href="`https://npmgraph.js.org/?q=${pkg.name}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
                 title="View dependency graph"
               >
                 <span class="i-carbon-network-3 w-3.5 h-3.5 inline-block" aria-hidden="true" />
@@ -445,7 +445,7 @@ defineOgImageComponent('Package', {
                 :href="`https://node-modules.dev/grid/depth#install=${pkg.name}${displayVersion?.version ? `@${displayVersion.version}` : ''}`"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-fg-subtle hover:text-fg transition-colors duration-200"
+                class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1"
                 title="Inspect dependency tree on node-modules.dev"
               >
                 <span

server/api/registry/readme/[...pkg].get.ts

@@ -96,7 +96,7 @@ export default defineCachedEventHandler(
     swr: true,
     getKey: event => {
       const pkg = getRouterParam(event, 'pkg') ?? ''
-      return `readme:v3:${pkg.replace(/\/+$/, '').trim()}`
+      return `readme:v4:${pkg.replace(/\/+$/, '').trim()}`
     },
   },
 )

server/utils/readme.ts

@@ -239,12 +239,27 @@ export async function renderReadmeHtml(
   const collectedLinks: PlaygroundLink[] = []
   const seenUrls = new Set<string>()
 
-  // Shift heading levels down by 2 for semantic correctness
+  // Track heading hierarchy to ensure sequential order for accessibility
   // Page h1 = package name, h2 = "Readme" section heading
-  // So README h1 → h3, h2 → h4, etc. (capped at h6)
-  // But keep visual styling via data-level attribute
+  // So README starts at h3, and we ensure no levels are skipped
+  // Visual styling preserved via data-level attribute (original depth)
+  let lastSemanticLevel = 2 // Start after h2 (the "Readme" section heading)
   renderer.heading = function ({ tokens, depth }: Tokens.Heading) {
-    const semanticLevel = Math.min(depth + 2, 6)
+    // Calculate the target semantic level based on document structure
+    // Start at h3 (since page h1 + section h2 already exist)
+    // But ensure we never skip levels - can only go down by 1 or stay same/go up
+    let semanticLevel: number
+    if (depth === 1) {
+      // README h1 always becomes h3
+      semanticLevel = 3
+    } else {
+      // For deeper levels, ensure sequential order
+      // Don't allow jumping more than 1 level deeper than previous
+      const maxAllowed = Math.min(lastSemanticLevel + 1, 6)
+      semanticLevel = Math.min(depth + 2, maxAllowed)
+    }
+
+    lastSemanticLevel = semanticLevel
     const text = this.parser.parseInline(tokens)
     return `<h${semanticLevel} data-level="${depth}">${text}</h${semanticLevel}>\n`
   }