How to remove the Vuetify append-icon from the sequential keyboard navigation

4
votes

In a Vue.js app with Vuetify, I have a set of password fields defined with a v-text-field and which have an append-icon in order to switch the text visibility, as follows:

      <v-text-field
        v-model="password"
        :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
        :type="show1 ? 'text' : 'password'"
        @click:append="show1 = !show1"
      ></v-text-field>

It is exactly similar to the documentation example for password input (See also the corresponding codepen).

With this set-up, if a user uses the Tab key to navigate across the different fields (sequential keyboard navigation), the append-icons are included in the sequential keyboard navigation.

I would like to exclude these icons from this sequential keyboard navigation (and be able to jump from one password field to the other without navigating to the append-icon).

Standard way to do that is to assign a "negative value (usually tabindex="-1")" which "means that the element is not reachable via sequential keyboard navigation", as explained here.

But I don't find how to assign a tab-index value only to the append-icon and not to the v-text-field itself.

2
javascripthtmlvue.jsvuetify.js

2 Answers

4
votes

You could use v-slot:append and place the icon there.

<v-text-field v-model="password" :type="show1 ? 'text' : 'password'">
  <template v-slot:append>
    <v-button @click="show1 = !show1" tabindex="-1">
      <v-icon v-if="show1" >mdi-eye</v-icon>
      <v-icon v-if="show1" >mdi-eye-off</v-icon>
    </v-button>
  </template>
</v-text-field>

However, it's not because you can do this that you should. If you place this button outside of reach of tabindex, someone with a screenreader might not be able to toggle the button.
From an accesibility concern, this button is an interactive element and thus should have tabindex="0"

1
votes

What also worked for me is to just assign the tabindex for all elements. The append-icon will be ignored then.

<v-text-field 
  tabindex="1" 
  v-model="password" 
  :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" 
  :type="show1 ? 'text' : 'password'" 
  @click:append="show1 = !show1">
</v-text-field>
<v-btn tabindex="2" @click="submitForm">Submit</v-btn>