如何从顺序键盘导航中删除 Vuetify 附加图标

Question

在带有 Vuetify 的 Vue.js 应用程序中，我有一组用 a 定义的密码字段，v-text-field其中有一个 ，append-icon以便切换文本可见性，如下所示：

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

它与密码输入的文档示例完全相同（另请参阅相应的codepen）。

通过此设置，如果用户使用Tab键在不同字段之间导航（顺序键盘导航），则append-icons 将包含在顺序键盘导航中。

我想从这个连续的键盘导航中排除这些图标（并且能够从一个密码字段跳转到另一个密码字段，而无需导航到append-icon）。

标准方法是分配一个“负值（通常tabindex="-1"）”，这“意味着该元素无法通过顺序键盘导航访问”，如此处所述。

但我不知道如何tab-index只为 赋值append-icon而不为其v-text-field本身赋值。

Answer 1

您可以使用v-slot:append该图标并将其放置在那里。

<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"