fix(VSelect, VAutocomplete, VCombobox): duplicated a11y attributes

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -182,7 +182,7 @@ export const VAutocomplete = genericComponent<new <
       },
     })
 
-    const { menuId, ariaExpanded, ariaControls, ariaLabel } = useMenuActivator(props, menu)
+    const { ariaLabel } = useMenuActivator(props, menu)
 
     const listRef = ref<VList>()
     const listEvents = useScrolling(listRef, vTextFieldRef)
@@ -445,15 +445,12 @@ export const VAutocomplete = genericComponent<new <
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
-          aria-expanded={ ariaExpanded.value }
-          aria-controls={ ariaControls.value }
         >
           {{
             ...slots,
             default: () => (
               <>
                 <VMenu
-                  id={ menuId.value }
                   ref={ vMenuRef }
                   v-model={ menu.value }
                   activator="parent"

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -212,7 +212,7 @@ export const VCombobox = genericComponent<new <
       },
     })
 
-    const { menuId, ariaExpanded, ariaControls, ariaLabel } = useMenuActivator(props, menu)
+    const { ariaLabel } = useMenuActivator(props, menu)
 
     watch(_search, value => {
       if (cleared) {
@@ -496,15 +496,12 @@ export const VCombobox = genericComponent<new <
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }
           onKeydown={ onKeydown }
-          aria-expanded={ ariaExpanded.value }
-          aria-controls={ ariaControls.value }
         >
           {{
             ...slots,
             default: () => (
               <>
                 <VMenu
-                  id={ menuId.value }
                   ref={ vMenuRef }
                   v-model={ menu.value }
                   activator="parent"

packages/vuetify/src/components/VOverlay/useActivator.tsx

@@ -310,8 +310,10 @@ function _useActivator (
   function getActivator (selector = props.activator): HTMLElement | undefined {
     const activator = getTarget(selector, vm)
 
-    // The activator should only be a valid element (Ignore comments and text nodes)
-    activatorEl.value = activator?.nodeType === Node.ELEMENT_NODE ? activator : undefined
+    activatorEl.value = activator?.querySelector('input[role="combobox"]') ??
+      (activator?.nodeType === Node.ELEMENT_NODE
+        ? activator
+        : undefined)
 
     return activatorEl.value
   }

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -188,7 +188,7 @@ export const VSelect = genericComponent<new <
       },
     })
 
-    const { menuId, ariaExpanded, ariaControls, ariaLabel } = useMenuActivator(props, menu)
+    const { ariaLabel } = useMenuActivator(props, menu)
 
     const computedMenuProps = computed(() => {
       return {
@@ -411,8 +411,6 @@ export const VSelect = genericComponent<new <
           onMousedown:control={ onMousedownControl }
           onBlur={ onBlur }
           onKeydown={ onKeydown }
-          aria-expanded={ ariaExpanded.value }
-          aria-controls={ ariaControls.value }
           aria-label={ ariaLabel.value }
           title={ ariaLabel.value }
         >
@@ -421,7 +419,6 @@ export const VSelect = genericComponent<new <
             default: () => (
               <>
                 <VMenu
-                  id={ menuId.value }
                   ref={ vMenuRef }
                   v-model={ menu.value }
                   activator="parent"

packages/vuetify/src/components/VTextField/VTextField.tsx

@@ -198,7 +198,6 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                 onClick:clear={ (e: MouseEvent) => onClear(e, reset) }
                 onClick:prependInner={ props['onClick:prependInner'] }
                 onClick:appendInner={ props['onClick:appendInner'] }
-                role={ props.role }
                 { ...omit(fieldProps, ['onClick:clear']) }
                 id={ id.value }
                 active={ isActive.value || isDirty.value }

packages/vuetify/src/composables/menuActivator.ts

@@ -1,5 +1,5 @@
 // Utilities
-import { computed, toRef, toValue, useId } from 'vue'
+import { toRef, toValue } from 'vue'
 import { propsFactory } from '@/util'
 
 // Types
@@ -27,17 +27,7 @@ export const makeMenuActivatorProps = propsFactory({
 export function useMenuActivator (props: MenuActivatorProps, isOpen: MaybeRefOrGetter<boolean>) {
   const { t } = useLocale()
 
-  const uid = useId()
-  const menuId = computed(() => `menu-${uid}`)
-
-  const ariaExpanded = toRef(() => toValue(isOpen))
-  const ariaControls = toRef(() => menuId.value)
   const ariaLabel = toRef(() => t(toValue(isOpen) ? props.closeText : props.openText))
 
-  return {
-    menuId,
-    ariaExpanded,
-    ariaControls,
-    ariaLabel,
-  }
+  return { ariaLabel }
 }