From 9262a7ff0212d64bbecd0012884584e6056c2b45 Mon Sep 17 00:00:00 2001
From: Sai Sridhar <tarrasridhar1154@gmail.com>
Date: Sat, 1 Aug 2026 22:47:38 +0530
Subject: [PATCH] fix(Select, Combobox): correct the documented Item example to
 avoid double role=option

---
 ...fix-select-combobox-item-double-role-738.md | 18 ++++++++++++++++++
 packages/0/src/components/Combobox/index.ts    |  3 ++-
 packages/0/src/components/Select/index.ts      |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-select-combobox-item-double-role-738.md

diff --git a/.changeset/fix-select-combobox-item-double-role-738.md b/.changeset/fix-select-combobox-item-double-role-738.md
new file mode 100644
index 0000000000..9b27ef548a
--- /dev/null
+++ b/.changeset/fix-select-combobox-item-double-role-738.md
@@ -0,0 +1,18 @@
+---
+"@vuetify/v0": patch
+---
+
+fix(Select, Combobox): correct the documented Item example to avoid double `role="option"` (#738)
+
+`Select.Item` and `Combobox.Item` already bind their full `attrs` bundle (including
+`role="option"`) onto their own non-renderless `Atom`. Both components' `@example`
+JSDoc then spread that same `attrs` object onto a child `<div>` inside the default
+slot — which `.claude/rules/components.md` documents as unsupported outside
+`renderless` mode: it renders `role="option"` 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.
+
+Added `renderless` to the documented `Select.Item` / `Combobox.Item` usage in both
+components' `@example` blocks, so the consumer's own element is the only one
+rendered — matching how `packages/0/src/components/fixtures/Select.vue` and
+`Combobox.vue` (and every real docs example) already use these components.
diff --git a/packages/0/src/components/Combobox/index.ts b/packages/0/src/components/Combobox/index.ts
index 0e63e4a11c..1f797cede0 100644
--- a/packages/0/src/components/Combobox/index.ts
+++ b/packages/0/src/components/Combobox/index.ts
@@ -61,6 +61,7 @@ import Root from './ComboboxRoot.vue'
  *         :key="item.id"
  *         :id="item.id"
  *         :value="item.label"
+ *         renderless
  *         v-slot="{ isSelected, attrs }"
  *       >
  *         <div v-bind="attrs">{{ item.label }}</div>
@@ -171,7 +172,7 @@ export const Combobox = {
    *
    * @example
    * ```vue
-   * <Combobox.Item id="apple" value="Apple" v-slot="{ isSelected, isHighlighted, attrs }">
+   * <Combobox.Item id="apple" value="Apple" renderless v-slot="{ isSelected, isHighlighted, attrs }">
    *   <div v-bind="attrs" :class="{ highlighted: isHighlighted }">
    *     Apple {{ isSelected ? '✓' : '' }}
    *   </div>
diff --git a/packages/0/src/components/Select/index.ts b/packages/0/src/components/Select/index.ts
index ad543d1d61..7c6c903f80 100644
--- a/packages/0/src/components/Select/index.ts
+++ b/packages/0/src/components/Select/index.ts
@@ -57,6 +57,7 @@ import Value from './SelectValue.vue'
  *         :key="item.id"
  *         :id="item.id"
  *         :value="item.label"
+ *         renderless
  *         v-slot="{ isSelected, attrs }"
  *       >
  *         <div v-bind="attrs">{{ item.label }}</div>
@@ -183,7 +184,7 @@ export const Select = {
    * </script>
    *
    * <template>
-   *   <Select.Item id="apple" value="Apple" v-slot="{ isSelected, attrs }">
+   *   <Select.Item id="apple" value="Apple" renderless v-slot="{ isSelected, attrs }">
    *     <div v-bind="attrs">Apple {{ isSelected ? '✓' : '' }}</div>
    *   </Select.Item>
    * </template>