如何从顺序键盘导航中删除Vuetify附加图标 [英] How to remove the Vuetify append-icon from the sequential keyboard navigation

问题描述

在带有Vuetify的Vue.js应用程序中，我有一组密码字段，这些密码字段定义为 v-text-field ，并且依次具有 append-icon 切换文本可见性，如下所示:

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).

在此设置中，如果用户使用 Tab 键在不同的字段之间导航(顺序键盘导航)，则 append-icon 顺序键盘导航.

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.

我想从顺序键盘导航中排除这些图标(并能够从一个密码字段跳到另一个密码字段，而无需导航到 append-icon ).

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).

执行此操作的标准方法是分配一个负值(通常为 tabindex =-1" )"，该负值表示该元素无法通过顺序键盘导航到达"，如<请在href ="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex" rel ="nofollow noreferrer">此处.

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.

但是我找不到如何仅将 tab-index 值分配给 append-icon 而不分配给 v-text-field 本身.

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.

推荐答案

您可以使用 v-slot:append 并将图标放在此处.

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>

但是，这并不是因为您可以做到这一点.如果将此按钮放在tabindex触及不到的地方，则具有屏幕阅读器的人可能无法切换该按钮.
考虑到可访问性，此按钮是一个交互式元素，因此应具有 tabindex ="0"

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"

这篇关于如何从顺序键盘导航中删除Vuetify附加图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！