Skip to content

fix(Select, Combobox): correct the documented Item example to avoid double role=option - #765

Closed
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/select-combobox-item-double-role-738
Closed

fix(Select, Combobox): correct the documented Item example to avoid double role=option#765
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:fix/select-combobox-item-double-role-738

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Closes #738.

Select.Item (and, identically, Combobox.Item) binds its whole attrs bundle — including role="option" — onto its own Atom, which is not renderless by default. Both components' @example JSDoc then spread that same attrs object onto a child <div> inside the default slot:

<Select.Item id="apple" value="Apple" v-slot="{ isSelected, attrs }">
  <div v-bind="attrs">Apple {{ isSelected ? '✓' : '' }}</div>
</Select.Item>

.claude/rules/components.md documents this as unsupported outside renderless mode — spreading attrs onto a child in non-renderless mode renders the ARIA role twice (listbox > div[role="option"] > div[role="option"], failing axe's aria-required-parent) and double-fires every handler in attrs once on the child and again via bubbling to the Atom. The documented shape is exactly this bug.

Fix

Added renderless to the documented Select.Item / Combobox.Item usage in both components' @example blocks (the top-level module example and each component's own JSDoc), so the consumer's own element is the only one rendered. This matches how packages/0/src/components/fixtures/Select.vue / Combobox.vue and every real docs example (apps/docs/src/examples/components/select/*, combobox/*) already use these components — none of them spread attrs on a child, so none were actually affected by the bug; only the documented @example shape was.

Per the issue, Combobox.Item is structurally identical to Select.Item (same as='div' default, same non-renderless attrs spread) and didn't appear in the #736 sweep only because the harness never got Combobox's listbox open to audit — checked it by hand here and it has the identical example bug, now fixed alongside Select.

Documentation-only change; the fixture used by the a11y sweep was already correct, so all 53 existing a11y.browser.test.ts tests pass unchanged.

@johnleider

Copy link
Copy Markdown
Member

Thanks — right diagnosis on #738. The merged fix (#775) took the other repair (dropping the inner element rather than adding renderless, so the documented shape has one option element and one click binding) and swept the same defect family through Radio, Treeview, and the Combobox examples. Since master's examples no longer have the inner spread at all, closing as superseded — and again, you were first; the duplicate was our miss.

@johnleider johnleider closed this Aug 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Select.Item renders role="option" twice — nested options have no required listbox parent

2 participants