Skip to content

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Sep 23, 2025

  • follow-up after moving role="combobox" from .v-field to the inner <input>

fixes #22098

Markup:

<template>
  <v-app>
    <v-container>
      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        label="Country"
      />
      <pre>
      [role="combobox"]: {{ n1 }}
      [aria-controls]: {{ n2 }}
      [aria-expanded]: {{ n3 }}
      </pre>
    </v-container>
  </v-app>
</template>

<script setup>
  import { nextTick, onMounted, ref } from 'vue'
  const n1 = ref(0)
  const n2 = ref(0)
  const n3 = ref(0)
  onMounted(async () => {
    await nextTick()
    n1.value = document.querySelectorAll('[role="combobox"]').length
    n2.value = document.querySelectorAll('[aria-controls]').length
    n3.value = document.querySelectorAll('[aria-expanded]').length
  })
</script>

@J-Sek J-Sek self-assigned this Sep 23, 2025
@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected a11y Accessibility issue C: VSelect C: VCombobox C: VAutocomplete labels Sep 23, 2025
@J-Sek J-Sek requested a review from KaelWD September 23, 2025 13:15
@KaelWD
Copy link
Member

KaelWD commented Sep 24, 2025

This breaks the menu position and it can no longer be navigated to with the keyboard.

@KaelWD KaelWD marked this pull request as draft September 24, 2025 08:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility issue C: VAutocomplete C: VCombobox C: VSelect T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.9.5] v-combobox has duplicate "combobox" roles within the component
2 participants