From 698a8d5f9312587f8b690bc51662a10e7c5dfcfb Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Thu, 5 Feb 2026 23:04:22 -0600
Subject: [PATCH 1/2] fix(a11y): move readme above sidebar in package view

This is to solve a level A WCAG failure (SC 2.4.3).
---
 app/pages/package/[...package].vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
index f6d2fbadb9..f37f649f2d 100644
--- a/app/pages/package/[...package].vue
+++ b/app/pages/package/[...package].vue
@@ -1276,15 +1276,15 @@ onKeyStroke(
   display: grid;
   gap: 2rem;
 
-  /* Mobile: single column, sidebar above readme */
+  /* Mobile: single column */
   grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
     'header'
     'details'
     'install'
     'vulns'
-    'sidebar'
-    'readme';
+    'readme'
+    'sidebar';
 }
 
 /* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */

From 8fff92c07bf88bbaa6fbf4783a45da887e3c63b9 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Wed, 18 Mar 2026 10:22:15 -0500
Subject: [PATCH 2/2] refactor: move README after sidebar in DOM order

Also, moves the sidebar placement up within its column for tablet.
---
 app/components/Package/Skeleton.vue  |  62 +++++------
 app/pages/package/[[org]]/[name].vue | 148 +++++++++++++--------------
 2 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index bfb3d18401..2feaf41eb5 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -173,33 +173,6 @@
     <!-- Vulns area (empty placeholder to hold grid space) -->
     <div class="area-vulns" />
 
-    <!-- README — matches area-readme in [...name].vue -->
-    <section class="area-readme min-w-0 scroll-mt-20">
-      <div class="flex flex-wrap items-center justify-between mb-3 px-1">
-        <h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
-          {{ $t('package.readme.title') }}
-        </h2>
-      </div>
-      <!-- Simulated README content -->
-      <div class="space-y-4">
-        <!-- Heading -->
-        <SkeletonBlock class="h-7 w-2/3" />
-        <!-- Paragraphs -->
-        <SkeletonBlock class="h-4 w-full" />
-        <SkeletonBlock class="h-4 w-full" />
-        <SkeletonBlock class="h-4 w-4/5" />
-        <!-- Gap for section break -->
-        <SkeletonBlock class="h-6 w-1/2 mt-6" />
-        <SkeletonBlock class="h-4 w-full" />
-        <SkeletonBlock class="h-4 w-full" />
-        <SkeletonBlock class="h-4 w-3/4" />
-        <!-- Code block placeholder -->
-        <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
-        <SkeletonBlock class="h-4 w-full" />
-        <SkeletonBlock class="h-4 w-5/6" />
-      </div>
-    </section>
-
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
@@ -376,6 +349,33 @@
         </div>
       </div>
     </div>
+
+    <!-- README — matches area-readme in [...name].vue -->
+    <section class="area-readme min-w-0 scroll-mt-20">
+      <div class="flex flex-wrap items-center justify-between mb-3 px-1">
+        <h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
+          {{ $t('package.readme.title') }}
+        </h2>
+      </div>
+      <!-- Simulated README content -->
+      <div class="space-y-4">
+        <!-- Heading -->
+        <SkeletonBlock class="h-7 w-2/3" />
+        <!-- Paragraphs -->
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-4/5" />
+        <!-- Gap for section break -->
+        <SkeletonBlock class="h-6 w-1/2 mt-6" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-3/4" />
+        <!-- Code block placeholder -->
+        <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-5/6" />
+      </div>
+    </section>
   </article>
 </template>
 
@@ -390,8 +390,8 @@
     'details'
     'install'
     'vulns'
-    'readme'
-    'sidebar';
+    'sidebar'
+    'readme';
 }
 
 /* Tablet/medium: install/vulns full width, readme+sidebar side by side */
@@ -400,8 +400,8 @@
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
       'details details'
-      'install install'
-      'vulns   vulns'
+      'install sidebar'
+      'vulns   sidebar'
       'readme  sidebar';
     grid-template-rows: auto auto auto auto 1fr;
   }
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 6c466c6f4c..a83a101243 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -895,6 +895,78 @@ const showSkeleton = shallowRef(false)
           </ClientOnly>
         </div>
 
+        <PackageSidebar :class="$style.areaSidebar">
+          <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
+            <!-- Team access controls (for scoped packages when connected) -->
+            <ClientOnly>
+              <PackageAccessControls :package-name="pkg.name" />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
+
+            <!-- Agent Skills -->
+            <ClientOnly>
+              <PackageSkillsCard
+                v-if="skillsData?.skills?.length"
+                :skills="skillsData.skills"
+                :package-name="pkg.name"
+                :version="resolvedVersion || undefined"
+              />
+              <template #fallback>
+                <!-- Show skeleton loaders when SSR or access controls are loading -->
+              </template>
+            </ClientOnly>
+
+            <!-- Download stats -->
+            <PackageWeeklyDownloadStats
+              :packageName
+              :createdIso="pkg?.time?.created ?? null"
+              :repoRef="repoRef"
+            />
+
+            <!-- Playground links -->
+            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
+
+            <PackageCompatibility :engines="displayVersion?.engines" />
+
+            <!-- Versions (grouped by release channel) -->
+            <PackageVersions
+              v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
+              :package-name="pkg.name"
+              :versions="pkg.versions"
+              :dist-tags="pkg['dist-tags'] ?? {}"
+              :time="pkg.time"
+              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
+            />
+
+            <!-- Install Scripts Warning -->
+            <PackageInstallScripts
+              v-if="displayVersion?.installScripts"
+              :package-name="pkg.name"
+              :version="displayVersion.version"
+              :install-scripts="displayVersion.installScripts"
+            />
+
+            <!-- Dependencies -->
+            <PackageDependencies
+              v-if="hasDependencies && resolvedVersion && displayVersion"
+              :package-name="pkg.name"
+              :version="resolvedVersion"
+              :dependencies="displayVersion.dependencies"
+              :peer-dependencies="displayVersion.peerDependencies"
+              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
+              :optional-dependencies="displayVersion.optionalDependencies"
+            />
+
+            <!-- Keywords -->
+            <PackageKeywords :keywords="displayVersion?.keywords" />
+
+            <!-- Maintainers (with admin actions when connected) -->
+            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
+          </div>
+        </PackageSidebar>
+
         <!-- README -->
         <section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
           <div
@@ -978,78 +1050,6 @@ const showSkeleton = shallowRef(false)
             </div>
           </section>
         </section>
-
-        <PackageSidebar :class="$style.areaSidebar">
-          <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
-            <!-- Team access controls (for scoped packages when connected) -->
-            <ClientOnly>
-              <PackageAccessControls :package-name="pkg.name" />
-              <template #fallback>
-                <!-- Show skeleton loaders when SSR or access controls are loading -->
-              </template>
-            </ClientOnly>
-
-            <!-- Agent Skills -->
-            <ClientOnly>
-              <PackageSkillsCard
-                v-if="skillsData?.skills?.length"
-                :skills="skillsData.skills"
-                :package-name="pkg.name"
-                :version="resolvedVersion || undefined"
-              />
-              <template #fallback>
-                <!-- Show skeleton loaders when SSR or access controls are loading -->
-              </template>
-            </ClientOnly>
-
-            <!-- Download stats -->
-            <PackageWeeklyDownloadStats
-              :packageName
-              :createdIso="pkg?.time?.created ?? null"
-              :repoRef="repoRef"
-            />
-
-            <!-- Playground links -->
-            <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
-
-            <PackageCompatibility :engines="displayVersion?.engines" />
-
-            <!-- Versions (grouped by release channel) -->
-            <PackageVersions
-              v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
-              :package-name="pkg.name"
-              :versions="pkg.versions"
-              :dist-tags="pkg['dist-tags'] ?? {}"
-              :time="pkg.time"
-              :selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
-            />
-
-            <!-- Install Scripts Warning -->
-            <PackageInstallScripts
-              v-if="displayVersion?.installScripts"
-              :package-name="pkg.name"
-              :version="displayVersion.version"
-              :install-scripts="displayVersion.installScripts"
-            />
-
-            <!-- Dependencies -->
-            <PackageDependencies
-              v-if="hasDependencies && resolvedVersion && displayVersion"
-              :package-name="pkg.name"
-              :version="resolvedVersion"
-              :dependencies="displayVersion.dependencies"
-              :peer-dependencies="displayVersion.peerDependencies"
-              :peer-dependencies-meta="displayVersion.peerDependenciesMeta"
-              :optional-dependencies="displayVersion.optionalDependencies"
-            />
-
-            <!-- Keywords -->
-            <PackageKeywords :keywords="displayVersion?.keywords" />
-
-            <!-- Maintainers (with admin actions when connected) -->
-            <PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
-          </div>
-        </PackageSidebar>
       </article>
     </template>
 
@@ -1095,8 +1095,8 @@ const showSkeleton = shallowRef(false)
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
       'details details'
-      'install install'
-      'vulns   vulns'
+      'install sidebar'
+      'vulns   sidebar'
       'readme  sidebar';
     grid-template-rows: auto auto auto auto 1fr;
   }