Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VAutocomplete): fix screenreader navigation #19199

Merged
merged 2 commits into from
Feb 22, 2024

Conversation

Martin-Idel
Copy link
Contributor

Screen readers need the options role in order to successfully redirect arrow navigation to the options. Without this change, keyboard navigation is broken when having a screen reader on.

fixes #18858

Description

This is the same fix as #18629 but now for VAutocomplete instead of VSelect.
You need to have a screen reader running to test these changes, as the screen reader changes keyboard navigation!

Tested with Orca and JAWS.

Markup:

<template>
  <v-app>
    <v-container>
      <v-autocomplete :items="items" label="Select an Item" />
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
    data: () => ({
      items: ['Apple', 'Orange', 'Pineapple']
    })
  }
</script>

@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VAutocomplete VAutocomplete labels Feb 9, 2024
@KaelWD KaelWD force-pushed the master branch 3 times, most recently from cd170f8 to 98e57dc Compare February 14, 2024 06:14
@johnleider
Copy link
Member

Would this apply to VSelect or VCombobox?

Screen readers need the options role in order to
successfully redirect arrow navigation to the options.
Without this change, keyboard navigation is broken
when having a screen reader on.

fixes vuetifyjs#18858
Screen readers need the options role in order to
successfully redirect arrow navigation to the options.
Without this change, keyboard navigation is broken
when having a screen reader on.

fixes vuetifyjs#18858
@Martin-Idel
Copy link
Contributor Author

#18629 did the exact same for VSelect, so it applies but is already done.

I missed VCombobox. I checked and yes this should also have it. I updated the PR with a second commit for this.

@johnleider johnleider added this to the v3.5.x milestone Feb 22, 2024
@johnleider johnleider merged commit 1ef07bd into vuetifyjs:master Feb 22, 2024
9 of 10 checks passed
VIXI0 pushed a commit to VIXI0/vuetify that referenced this pull request Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VAutocomplete VAutocomplete 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.4.2] NVDA prevents selecting options in autocomplete
3 participants