fix(a11y): move readme after sidebar in DOM order

[knowler]

Resolves #1069 which reports a WCAG 2.2 SC 2.4.3 Focus Order (Level A) failure.

This PR moves the README after the sidebar in the DOM order, so that it matches on mobile. On tablet and desktop, this changes the tab order, so the focus will jump to the sidebar which we determined was okay, since going from one column to the next and then back is not uncalled for (e.g. it’s often the case with table of contents). The grid layout was slightly tweaked for the tablet view which just moves the sidebar up a bit so that the focus jump makes more sense.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 18, 2026 3:26pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 3:26pm
npmx-lunaria	Ignored		Mar 18, 2026 3:26pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 28706e0d-e6d9-4592-a256-6bb6b30f829c

📥 Commits

Reviewing files that changed from the base of the PR and between 698a8d5 and 8fff92c.

📒 Files selected for processing (2)

• app/components/Package/Skeleton.vue
• app/pages/package/[[org]]/[name].vue

---

📝 Walkthrough

Walkthrough

The changes reposition the sidebar and README section in the package page layout. In the Skeleton component, the README area is moved from between Vulns and Sidebar to after the Sidebar. The responsive grid layout is adjusted at tablet sizes so README is positioned below the vulns and sidebar blocks. In the page component, the PackageSidebar block is moved from after the vulnerabilities section to before the README section, with corresponding CSS grid updates at the 1024px breakpoint to maintain alignment with the new sidebar placement.

Possibly related PRs

• fix: improve package page skeleton loading state #1115: Modifies package page skeleton layout with adjustments to sidebar and README grid areas alignment.
• chore(ui): reorganize sidebar on Package page #1010: Reorders sidebar placement and adjusts where sidebar-related content is rendered in package page components.
• fix(ui): avoid README actions to be cropped with visible focus #1144: Changes CSS overflow styling for the README area which is affected by the grid reflow in this PR.

Suggested labels

front

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the PR resolves WCAG focus order failure by moving README after sidebar in DOM order, aligning with changeset modifications to both component files.
Linked Issues check	✅ Passed	The PR successfully implements the primary objective from #1069 by moving the README element after sidebar in DOM order, matching visual order on mobile and adjusting tablet grid layout as discussed.
Out of Scope Changes check	✅ Passed	All changes in Skeleton.vue and [name].vue are scoped to reordering the README/sidebar DOM positioning and adjusting grid layout for tablet, directly addressing the WCAG 2.2 SC 2.4.3 focus order issue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can suggest fixes for GitHub Check annotations.

Configure the reviews.tools.github-checks setting to adjust the time to wait for GitHub Checks to complete.

[codecov]

Codecov Report

❌ Patch coverage is 29.41176% with 12 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	7.69%	11 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[43081j]

i think this is good for now and, if you do rework it, lets just open a follow up PR

EDIT: just seen alex's response below so ill hold off for now until discord/discussion resolves

[alexdln]

I agree that the order needs to be changed (discord), but I disagree about the reason. If the problem is only with A11Y, we need to change the order of the elements in the DOM (make <Sidebar> higher than <Readme>).

As for the visual reordering, I think it's better to decide what experience we want to achieve (maybe for example collapsing sidebar sections on mobile devices is better)

[knowler]

In #1072 (comment), @alexdln said:

If the problem is only with A11Y, we need to change the order of the elements in the DOM (make higher than ).

If we did that it would cause the same WCAG failure for the “tablet” and desktop layouts because they would no longer match their grid order. Moving DOM specifically when the mobile breakpoint matches (i.e. using MediaQueryList.addListener() or whatever Vue abstraction exists) could solve that, however, that will inherently be less performant than using CSS itself and it would leave the no-JS experience inaccessible (because it wouldn’t be able to change the order).

It’s that complexity and “whack-a-mole” problem that I’m trying to address with this PR. To make matters simple: DOM order must match the visual order for every breakpoint (without the help of JavaScript). I’m doing so at the cost of design, but it was a design that should never have been tenable because it did not consider accessibility.

With all of that said, if we want to revisit the visual order that’s totally fine. The purpose of this PR less so to make a design change and more so to remediate the accessibility issue in a way that is most performant and universal (i.e. it works with whatever no-JS experience there is).

[alexdln]

If we did that it would cause the same WCAG failure for the “tablet” and desktop

It shouldn't. Navigation, toc, and priority elements to the right and left of main content are fairly standard practice.

The current complaint was that focus jumping abruptly to the bottom of the page, and that shouldn't happen. With the option I'm talking about, focus should move correctly, since our right panel is sticky

[knowler]

In #1072 (comment), @alexdln said:

It shouldn't. Navigation, toc, and priority elements to the right and left of main content are fairly standard practice.

That’s a really fair point.

The current complaint was that focus jumping abruptly to the bottom of the page, and that shouldn't happen. With the option I'm talking about, focus should move correctly, since our right panel is sticky

With your option applied, I think the desktop view is fine. The focus jump remains in view.

In the “tablet” view (I use a 14" laptop so I get this view if I open the vertical-tab-sidebar in my browser, which is pretty much always), it is a bit strange when the focus initially moves to the right column instead of the left column when traversing through the page.

At this breakpoint, the “Getting started” + “vulnerabilities” sections are both comically wide when they don’t need to be. If we make both of them only take up one column and bump the sidebar up, that improves the experience to be more like desktop (and makes it look nicer IMO).

Proposed grid layout change for tablet view

 @media (min-width: 1024px) {
   .package-page {
     grid-template-columns: 2fr 1fr;
     grid-template-areas:
       'header  header'
       'details details'
-      'install install'
+      'install sidebar'
-      'vulns   vulns'
+      'vulns   sidebar'
       'readme  sidebar';
     grid-template-rows: auto auto auto auto 1fr;
   }
 }

What do you think?

As for the visual reordering, I think it's better to decide what experience we want to achieve (maybe for example collapsing sidebar sections on mobile devices is better)

I agree and, yes, I think collapsing the sidebar sections on mobile would be a good fix.

[alexdln]

lgtm about tablet (source)

[ghostdevv]

(marking as draft while you work on it)