fix(a11y): move readme above sidebar in package view for mobile layout

[knowler]

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

See the linked issue. This PR goes with the easiest solution to the problem which is just making the DOM order match the visual order as that’s how the tablet/desktop view works (for screen readers). I am open to the other solutions I mentioned in the issue (someone else just might need to implement them).

As I mentioned in the issue, I think we could improve on the mobile experience by making the README section collapsible, at least on mobile. I did see the <CollapsibleSection> component, however, the code for it made me think it might have been designed for the sidebar and might not work well for the README section.

We can always hold this PR until we figure out a solution for that. This is such a small change that it shouldn’t be hard to update.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 6, 2026 5:15am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 6, 2026 5:15am
npmx-lunaria	Ignored		Feb 6, 2026 5:15am

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adjusts the mobile layout grid structure in the package view component. The grid-template-areas order has been modified to reorder how sections are displayed on mobile devices. Specifically, the layout now positions the readme section and sidebar differently to ensure the visual grid order aligns with the document object model (DOM) order, addressing a focus order accessibility issue identified in the linked WCAG 2.2 compliance check.

Possibly related PRs

• fix: regression of readme heading #1037: Modifies the package page's readme presentation within the same component file, involving layout or spacing adjustments

Suggested reviewers

• danielroe
• trueberryless

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR implements solution 1 from issue #1069 by adjusting the mobile grid layout to match DOM order with visual order, resolving the WCAG 2.4.3 focus-order failure.
Out of Scope Changes check	✅ Passed	The changes are limited to adjusting mobile grid-template-areas in the package view file, directly addressing the focus-order issue without introducing unrelated modifications.
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining that it resolves a WCAG focus order issue by reordering the mobile layout's grid-template-areas to match visual order.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 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)