fix(blog): add missing back navigation and reuse BackButton across pages

[epifaniofrancisco]

🔗 Linked issue

resolves #2022

🧭 Context

The Blog page didn’t include the same “back” navigation that exists on other informational pages (Privacy, Accessibility, Settings, etc.), causing inconsistent UX when navigating to /blog.

This PR fixes the Blog page and standardizes the back button implementation across the app.

📚 Description

• Added a reusable <BackButton /> component:
• Updated the Blog page header (app/pages/blog/index.vue) to include <BackButton />
• Replaced inline back button markup in the following pages with <BackButton />:
  • app/pages/accessibility.vue
  • app/pages/compare.vue
  • app/pages/pds.vue
  • app/pages/privacy.vue
  • app/pages/recharging.vue
  • app/pages/settings.vue

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 12, 2026 4:35pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 12, 2026 4:35pm
npmx-lunaria	Ignored		Mar 12, 2026 4:35pm

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/BackButton.vue	66.66%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new Vue 3 single-file component BackButton that uses useRouter() and useCanGoBack(), renders only when canGoBack is true, and calls router.back() on click. Replaces inline back-button markup and removes local useRouter/useCanGoBack calls across eight pages (about, accessibility, blog, compare, pds, privacy, recharging, settings). Adds accessibility test coverage for BackButton and normalises component path handling in a11y tests.

Possibly related PRs

• chore(ui): consistent back navigation #1164: Introduced the useCanGoBack composable that BackButton consumes to gate rendering.
• chore: consistent back button across pages #936: Added inline router.back() back buttons on pages now refactored to use BackButton.
• fix: add back button and centre icon on compare page #941: Modified back-navigation in compare.vue, which is replaced here by the BackButton component.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly describes the changes: adding a BackButton component and updating multiple pages to use it for consistent back navigation.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2022 by introducing a reusable BackButton component and standardising back navigation across all informational pages including the Blog page.
Out of Scope Changes check	✅ Passed	All changes are directly related to the issue objective: BackButton component creation, page updates to use it, and supporting test coverage updates. No unrelated changes detected.

_{✏️ 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

📝 Coding Plan for PR comments

• Generate coding plan

---

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.}

[coderabbitai]

🧹 Nitpick comments (1)

app/components/BackButton.vue (1)

16-23: Remove inline focus-visible utility; rely on global CSS.

The project applies focus-visible styling for buttons globally via main.css. The inline focus-visible:outline-accent/70 class duplicates and potentially conflicts with the global rule.

♻️ Suggested fix

   <button
     v-if="canGoBack"
     type="button"
     :class="[
-      'inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0',
+      'inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0',
       $props.class,
     ]"
     `@click`="router.back()"
   >

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... individual buttons or selects in Vue components should not rely on inline focus-visible utility classes."

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 91e60ec1-f868-4cd9-9d32-ba1262534a48

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and 63eb4e9.

📒 Files selected for processing (9)

• app/components/BackButton.vue
• app/pages/about.vue
• app/pages/accessibility.vue
• app/pages/blog/index.vue
• app/pages/compare.vue
• app/pages/pds.vue
• app/pages/privacy.vue
• app/pages/recharging.vue
• app/pages/settings.vue

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fe22398a-fc3d-44f3-b834-4cce13851bd3

📥 Commits

Reviewing files that changed from the base of the PR and between 63eb4e9 and 4c602f1.

📒 Files selected for processing (2)

• test/nuxt/a11y.spec.ts
• test/unit/a11y-component-coverage.spec.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Make this audit exercise the rendered button, not the empty v-if branch.

BackButton only renders when useCanGoBack() becomes truthy, and that composable starts as false until it sees a non-null router back state. Mounted as-is, this can pass against an empty container and still mark the component as covered. Seed a back entry or mock useCanGoBack() to true, then assert the <button> exists before running axe.