fix(a11y): make span metrics badges focusable to render tooltip content

[julien-deramond]

On https://npmx.dev/package/bootstrap, three metric badges are displayed:

• Types (link)
• ESM (span)
• CJS (span)

All three badges show informative tooltips on hover. However, only "Types" is keyboard-focusable, preventing keyboard users from accessing the ESM and CJS tooltip information. This creates an accessibility barrier for keyboard navigation:

Screen.Recording.2026-02-03.at.21.25.58.mov

Adding tabindex="0" to the span elements makes all badges keyboard-focusable so that tooltip content is accessible to all users:

Screen.Recording.2026-02-03.at.21.27.12.mov

Please note that "Types" is not always a link, and can be a span too when the package has no type. You can check the rendering with https://npmx.dev/package/@ng-bootstrap/ng-bootstrap.

The focus ring rendering is different, but I know there are other issues reported to tackle this specific issue globally.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Error		Feb 3, 2026 10:26pm
npmx.dev	Ready	Preview, Comment	Feb 3, 2026 10:26pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 3, 2026 10:26pm

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
app/components/Package/MetricsBadges.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request modifies the MetricsBadges.vue component to enhance keyboard accessibility. Tabindex attributes are added to three badge elements: the TypeScript types badge receives a conditional tabindex value (0 when typesHref is falsy, otherwise undefined), whilst the ESM and CJS badge spans each receive tabindex="0". The changes do not affect component logic, data flow, display conditions, or styling. Three lines are added with no removals.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the accessibility issue with metric badges lacking keyboard focus and describes the solution of adding tabindex attributes.

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

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

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

[julien-deramond]

This line is highlighted by the Codecov report as an issue.

I've kept it for now as it's similar to :is="typesHref ? NuxtLink : 'span'" already in the file.

I could possibly fix it with something like the following, but I preferred some guidance from the maintainers before changing anything to my initial fix :)

<script>
const typesTabIndex = computed(() => {
  return !typesHref.value ? 0 : undefined
})
</script>

<component
  :tabindex="typesTabIndex"
>
</component>

Note: feel free to modify directly my branch if it's quicker while you're reviewing.