fix(VTextField): prevent tabbing to clear button

fixes #11202
vuetifyjs · Aug 10, 2022 · f8ee680 · f8ee680
1 parent 170c7d1
commit f8ee680
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap b/packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap
@@ -61,6 +61,7 @@ exports[`VFileInput.ts should display file size 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -107,6 +108,7 @@ exports[`VFileInput.ts should display file size 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -153,6 +155,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -202,6 +205,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -294,6 +298,7 @@ exports[`VFileInput.ts should render chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -340,6 +345,7 @@ exports[`VFileInput.ts should render counter 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear
@@ -433,6 +439,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
                   aria-label="clear icon"
+                  tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
             $clear

diff --git a/packages/vuetify/src/components/VInput/VInput.ts b/packages/vuetify/src/components/VInput/VInput.ts
@@ -184,6 +184,7 @@ export default baseMixins.extend<options>().extend({
           dark: this.dark,
           disabled: this.isDisabled,
           light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
         },
         on: !hasListener
           ? undefined

diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
@@ -25,6 +25,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear
@@ -85,6 +86,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
                     aria-label="clear icon"
+                    tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
               $clear