Skip to content

Commit 68d95cd

Browse files
knowleralexdln
knowler
and
alexdln
authored
fix(a11y): move readme after sidebar in DOM order (#1072)
Co-authored-by: Vordgi <sasha2822222@gmail.com>
1 parent da2cf3e commit 68d95cd

File tree

2 files changed

+103
-103
lines changed

2 files changed

+103
-103
lines changed

‎app/components/Package/Skeleton.vue‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -173,33 +173,6 @@
173173
<!-- Vulns area (empty placeholder to hold grid space) -->
174174
<div class="area-vulns" />
175175

176-
<!-- README — matches area-readme in [...name].vue -->
177-
<section class="area-readme min-w-0 scroll-mt-20">
178-
<div class="flex flex-wrap items-center justify-between mb-3 px-1">
179-
<h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
180-
{{ $t('package.readme.title') }}
181-
</h2>
182-
</div>
183-
<!-- Simulated README content -->
184-
<div class="space-y-4">
185-
<!-- Heading -->
186-
<SkeletonBlock class="h-7 w-2/3" />
187-
<!-- Paragraphs -->
188-
<SkeletonBlock class="h-4 w-full" />
189-
<SkeletonBlock class="h-4 w-full" />
190-
<SkeletonBlock class="h-4 w-4/5" />
191-
<!-- Gap for section break -->
192-
<SkeletonBlock class="h-6 w-1/2 mt-6" />
193-
<SkeletonBlock class="h-4 w-full" />
194-
<SkeletonBlock class="h-4 w-full" />
195-
<SkeletonBlock class="h-4 w-3/4" />
196-
<!-- Code block placeholder -->
197-
<SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
198-
<SkeletonBlock class="h-4 w-full" />
199-
<SkeletonBlock class="h-4 w-5/6" />
200-
</div>
201-
</section>
202-
203176
<!-- Sidebar — matches area-sidebar in [...name].vue -->
204177
<div class="area-sidebar">
205178
<div
@@ -376,6 +349,33 @@
376349
</div>
377350
</div>
378351
</div>
352+
353+
<!-- README — matches area-readme in [...name].vue -->
354+
<section class="area-readme min-w-0 scroll-mt-20">
355+
<div class="flex flex-wrap items-center justify-between mb-3 px-1">
356+
<h2 class="text-xs font-mono text-fg-subtle uppercase tracking-wider">
357+
{{ $t('package.readme.title') }}
358+
</h2>
359+
</div>
360+
<!-- Simulated README content -->
361+
<div class="space-y-4">
362+
<!-- Heading -->
363+
<SkeletonBlock class="h-7 w-2/3" />
364+
<!-- Paragraphs -->
365+
<SkeletonBlock class="h-4 w-full" />
366+
<SkeletonBlock class="h-4 w-full" />
367+
<SkeletonBlock class="h-4 w-4/5" />
368+
<!-- Gap for section break -->
369+
<SkeletonBlock class="h-6 w-1/2 mt-6" />
370+
<SkeletonBlock class="h-4 w-full" />
371+
<SkeletonBlock class="h-4 w-full" />
372+
<SkeletonBlock class="h-4 w-3/4" />
373+
<!-- Code block placeholder -->
374+
<SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
375+
<SkeletonBlock class="h-4 w-full" />
376+
<SkeletonBlock class="h-4 w-5/6" />
377+
</div>
378+
</section>
379379
</article>
380380
</template>
381381

@@ -400,8 +400,8 @@
400400
grid-template-columns: 2fr 1fr;
401401
grid-template-areas:
402402
'details details'
403-
'install install'
404-
'vulns vulns'
403+
'install sidebar'
404+
'vulns sidebar'
405405
'readme sidebar';
406406
grid-template-rows: auto auto auto auto 1fr;
407407
}

‎app/pages/package/[[org]]/[name].vue‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -895,6 +895,78 @@ const showSkeleton = shallowRef(false)
895895
</ClientOnly>
896896
</div>
897897

898+
<PackageSidebar :class="$style.areaSidebar">
899+
<div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
900+
<!-- Team access controls (for scoped packages when connected) -->
901+
<ClientOnly>
902+
<PackageAccessControls :package-name="pkg.name" />
903+
<template #fallback>
904+
<!-- Show skeleton loaders when SSR or access controls are loading -->
905+
</template>
906+
</ClientOnly>
907+
908+
<!-- Agent Skills -->
909+
<ClientOnly>
910+
<PackageSkillsCard
911+
v-if="skillsData?.skills?.length"
912+
:skills="skillsData.skills"
913+
:package-name="pkg.name"
914+
:version="resolvedVersion || undefined"
915+
/>
916+
<template #fallback>
917+
<!-- Show skeleton loaders when SSR or access controls are loading -->
918+
</template>
919+
</ClientOnly>
920+
921+
<!-- Download stats -->
922+
<PackageWeeklyDownloadStats
923+
:packageName
924+
:createdIso="pkg?.time?.created ?? null"
925+
:repoRef="repoRef"
926+
/>
927+
928+
<!-- Playground links -->
929+
<PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
930+
931+
<PackageCompatibility :engines="displayVersion?.engines" />
932+
933+
<!-- Versions (grouped by release channel) -->
934+
<PackageVersions
935+
v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
936+
:package-name="pkg.name"
937+
:versions="pkg.versions"
938+
:dist-tags="pkg['dist-tags'] ?? {}"
939+
:time="pkg.time"
940+
:selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
941+
/>
942+
943+
<!-- Install Scripts Warning -->
944+
<PackageInstallScripts
945+
v-if="displayVersion?.installScripts"
946+
:package-name="pkg.name"
947+
:version="displayVersion.version"
948+
:install-scripts="displayVersion.installScripts"
949+
/>
950+
951+
<!-- Dependencies -->
952+
<PackageDependencies
953+
v-if="hasDependencies && resolvedVersion && displayVersion"
954+
:package-name="pkg.name"
955+
:version="resolvedVersion"
956+
:dependencies="displayVersion.dependencies"
957+
:peer-dependencies="displayVersion.peerDependencies"
958+
:peer-dependencies-meta="displayVersion.peerDependenciesMeta"
959+
:optional-dependencies="displayVersion.optionalDependencies"
960+
/>
961+
962+
<!-- Keywords -->
963+
<PackageKeywords :keywords="displayVersion?.keywords" />
964+
965+
<!-- Maintainers (with admin actions when connected) -->
966+
<PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
967+
</div>
968+
</PackageSidebar>
969+
898970
<!-- README -->
899971
<section id="readme" class="min-w-0 scroll-mt-20" :class="$style.areaReadme">
900972
<div
@@ -978,78 +1050,6 @@ const showSkeleton = shallowRef(false)
9781050
</div>
9791051
</section>
9801052
</section>
981-
982-
<PackageSidebar :class="$style.areaSidebar">
983-
<div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
984-
<!-- Team access controls (for scoped packages when connected) -->
985-
<ClientOnly>
986-
<PackageAccessControls :package-name="pkg.name" />
987-
<template #fallback>
988-
<!-- Show skeleton loaders when SSR or access controls are loading -->
989-
</template>
990-
</ClientOnly>
991-
992-
<!-- Agent Skills -->
993-
<ClientOnly>
994-
<PackageSkillsCard
995-
v-if="skillsData?.skills?.length"
996-
:skills="skillsData.skills"
997-
:package-name="pkg.name"
998-
:version="resolvedVersion || undefined"
999-
/>
1000-
<template #fallback>
1001-
<!-- Show skeleton loaders when SSR or access controls are loading -->
1002-
</template>
1003-
</ClientOnly>
1004-
1005-
<!-- Download stats -->
1006-
<PackageWeeklyDownloadStats
1007-
:packageName
1008-
:createdIso="pkg?.time?.created ?? null"
1009-
:repoRef="repoRef"
1010-
/>
1011-
1012-
<!-- Playground links -->
1013-
<PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
1014-
1015-
<PackageCompatibility :engines="displayVersion?.engines" />
1016-
1017-
<!-- Versions (grouped by release channel) -->
1018-
<PackageVersions
1019-
v-if="pkg.versions && Object.keys(pkg.versions).length > 0"
1020-
:package-name="pkg.name"
1021-
:versions="pkg.versions"
1022-
:dist-tags="pkg['dist-tags'] ?? {}"
1023-
:time="pkg.time"
1024-
:selected-version="resolvedVersion ?? pkg['dist-tags']?.['latest']"
1025-
/>
1026-
1027-
<!-- Install Scripts Warning -->
1028-
<PackageInstallScripts
1029-
v-if="displayVersion?.installScripts"
1030-
:package-name="pkg.name"
1031-
:version="displayVersion.version"
1032-
:install-scripts="displayVersion.installScripts"
1033-
/>
1034-
1035-
<!-- Dependencies -->
1036-
<PackageDependencies
1037-
v-if="hasDependencies && resolvedVersion && displayVersion"
1038-
:package-name="pkg.name"
1039-
:version="resolvedVersion"
1040-
:dependencies="displayVersion.dependencies"
1041-
:peer-dependencies="displayVersion.peerDependencies"
1042-
:peer-dependencies-meta="displayVersion.peerDependenciesMeta"
1043-
:optional-dependencies="displayVersion.optionalDependencies"
1044-
/>
1045-
1046-
<!-- Keywords -->
1047-
<PackageKeywords :keywords="displayVersion?.keywords" />
1048-
1049-
<!-- Maintainers (with admin actions when connected) -->
1050-
<PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
1051-
</div>
1052-
</PackageSidebar>
10531053
</article>
10541054
</template>
10551055

@@ -1095,8 +1095,8 @@ const showSkeleton = shallowRef(false)
10951095
grid-template-columns: 2fr 1fr;
10961096
grid-template-areas:
10971097
'details details'
1098-
'install install'
1099-
'vulns vulns'
1098+
'install sidebar'
1099+
'vulns sidebar'
11001100
'readme sidebar';
11011101
grid-template-rows: auto auto auto auto 1fr;
11021102
}

0 commit comments

Comments
 (0)