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

在带有 Vuetify 的 Vue.js 应用程序中，我有一组用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>

它完全类似于密码输入的文档示例 https://vuetifyjs.com/en/components/text-fields/#password-input（另请参阅相应的).

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

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

标准方法是分配一个“负值（通常tabindex="-1")”，这“意味着该元素无法通过顺序键盘导航到达”，如所解释的here https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex.

但我不知道如何分配tab-index值仅对append-icon而不是到v-text-field itself.

你可以使用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"