Skip to content

fix(PageCard): pass fallthrough attributes to root element#6265

Open
faizkhairi wants to merge 1 commit intonuxt:v4from
faizkhairi:fix/page-card-aria-attrs
Open

fix(PageCard): pass fallthrough attributes to root element#6265
faizkhairi wants to merge 1 commit intonuxt:v4from
faizkhairi:fix/page-card-aria-attrs

Conversation

@faizkhairi
Copy link
Copy Markdown

Description

Fixes #6247

PageCard uses defineOptions({ inheritAttrs: false }) but only spreads $attrs onto the inner ULink component. This causes non-prop attributes like aria-selected, aria-label, and other ARIA attributes to be silently dropped from the root DOM element.

Changes

Added v-bind="$attrs" to the root <Primitive> element in PageCard.vue. This follows the established pattern used by PricingPlan, Header, PageLogos, DashboardNavbar, and other components that use inheritAttrs: false with manual $attrs binding on the root Primitive.

Tests

Added two test cases to PageCard.spec.ts:

  • Verifies aria-selected and aria-label are passed through to the root element
  • Verifies aria attributes reach the root element even when to prop is present

All 5359 existing tests continue to pass.

Note

BlogPost.vue and PageFeature.vue use the same pattern (inheritAttrs: false with $attrs only on ULink) and have the same issue. These can be addressed in follow-up PRs.

Add v-bind="$attrs" to the root Primitive element so that
non-prop attributes (e.g. aria-selected, aria-label) are passed
through to the root DOM element instead of being silently dropped.

This matches the established pattern used by PricingPlan, Header,
PageLogos, and other components that use inheritAttrs: false with
manual $attrs binding on the root Primitive.

Resolves nuxt#6247
@github-actions github-actions bot added the v4 #4488 label Mar 30, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 30, 2026

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: 529ae4a5-5f6b-47dd-aea4-de6c5cec763a

📥 Commits

Reviewing files that changed from the base of the PR and between 2f1ad02 and a9491f0.

📒 Files selected for processing (2)
  • src/runtime/components/PageCard.vue
  • test/components/PageCard.spec.ts

📝 Walkthrough

Walkthrough

This pull request adds attribute forwarding support to the PageCard component. The Vue component now binds all non-prop attributes to the root Primitive element using v-bind="$attrs", enabling HTML attributes like ARIA properties (e.g., aria-selected, aria-label) to be passed through to the root node. Two test cases were added to verify this functionality works both with and without the to prop.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'fix(PageCard): pass fallthrough attributes to root element' directly and clearly describes the main change - adding fallthrough attribute support to the PageCard root element.
Description check ✅ Passed The description is well-detailed and clearly related to the changeset, explaining the problem, the solution, and test coverage. It also references the linked issue and notes follow-up work.
Linked Issues check ✅ Passed The PR fully addresses issue #6247 by adding v-bind='$attrs' to the root Primitive element, allowing ARIA attributes and other fallthrough attributes to reach the root DOM node as requested.
Out of Scope Changes check ✅ Passed All changes are in-scope: PageCard.vue receives the required fix, and test cases verify the new functionality. No unrelated modifications were introduced.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Review ran into problems

🔥 Problems

Timed out fetching pipeline failures after 30000ms


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

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

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 30, 2026

npm i https://pkg.pr.new/@nuxt/ui@6265

commit: a9491f0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PageCard does not support passing attributes to the root node (ARIA-LABEL etc.)

1 participant