Skip to content

fix(VSelect): fix screenreader navigation to select options#22602

Merged
J-Sek merged 2 commits intomasterfrom
fix/screenreader-select-option-navigation
Feb 26, 2026
Merged

fix(VSelect): fix screenreader navigation to select options#22602
J-Sek merged 2 commits intomasterfrom
fix/screenreader-select-option-navigation

Conversation

@ikushum
Copy link
Copy Markdown
Member

@ikushum ikushum commented Feb 7, 2026 •
edited
Loading

fixes #22226

Description

When VSelect menu is opened, the selected item or first item in the list is focused so that screen-readers can navigate through the options.

  • tested on IOS screenreader
  • tested on Android Talkback

Markup:

<template>
  <v-app>
    <v-container>

      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        label="Select"
      />
      <div>hello there</div>
      <v-btn>click me</v-btn>
    </v-container>
  </v-app>
</template>

@ikushum ikushum self-assigned this Feb 7, 2026
@ikushum ikushum added platform specific The issue only occurs on a specific platform a11y Accessibility issue C: VSelect T: bug Functionality that does not work as intended/expected labels Feb 7, 2026
@ikushum ikushum marked this pull request as ready for review February 9, 2026 04:20
@ikushum ikushum requested a review from a team February 9, 2026 04:20
J-Sek
J-Sek requested changes Feb 9, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@J-Sek J-Sek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With at least one item disabled, the initial focus jumps from last selected forward (1 item skipped for every disabled option).

<v-select
  :items="['Alabama', { disabled: true, title: 'California' }, 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
  label="Select"
  item-props
  multiple
/>

@ikushum ikushum requested a review from J-Sek February 26, 2026 07:57
@J-Sek J-Sek merged commit 6c962b7 into master Feb 26, 2026
16 checks passed
@J-Sek J-Sek deleted the fix/screenreader-select-option-navigation branch February 26, 2026 11:20
J-Sek pushed a commit that referenced this pull request Feb 26, 2026
@ikushum @J-Sek
fix(VSelect): fix screenreader navigation to select options (#22602)
f906336 
fixes #22226
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Feb 26, 2026

cherry-picked to v3-stable

@KaelWD KaelWD added this to the v3.12.x milestone Mar 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@J-Sek J-Sek J-Sek approved these changes

Assignees

@ikushum ikushum

Labels

a11y Accessibility issue C: VSelect platform specific The issue only occurs on a specific platform T: bug Functionality that does not work as intended/expected

Projects

None yet

Milestone

v3.12.x

Development

Successfully merging this pull request may close these issues.

[Bug Report][3.10.5] v-select accessibility issue: can't navigate to select options on mobile (iPhone/VoiceOver and Android/Talkback)

3 participants

@ikushum @J-Sek @KaelWD