fix(VStepperStep): editable step tab navigation (#14036)

fixes #14022 * fix(VStepperStep): editable step tab navigation * fix(VStepperStep): added keyCodes helper
vuetifyjs · Dec 7, 2021 · 256fa93 · 256fa93
1 parent 1c7fd05
commit 256fa93
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VStepper/VStepperStep.ts b/packages/vuetify/src/components/VStepper/VStepperStep.ts
@@ -10,6 +10,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { keyCodes } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -90,7 +91,7 @@ export default baseMixins.extend<options>().extend({
   },
 
   methods: {
-    click (e: MouseEvent) {
+    click (e: MouseEvent | KeyboardEvent) {
       e.stopPropagation()
 
       this.$emit('click', e)
@@ -131,6 +132,11 @@ export default baseMixins.extend<options>().extend({
 
       return children
     },
+    keyboardClick (e: KeyboardEvent) {
+      if (e.keyCode === keyCodes.space) {
+        this.click(e)
+      }
+    },
     toggle (step: number | string) {
       this.isActive = step.toString() === this.step.toString()
       this.isInactive = Number(step) < Number(this.step)
@@ -139,13 +145,19 @@ export default baseMixins.extend<options>().extend({
 
   render (h): VNode {
     return h('div', {
+      attrs: {
+        tabindex: this.editable ? 0 : -1,
+      },
       staticClass: 'v-stepper__step',
       class: this.classes,
       directives: [{
         name: 'ripple',
         value: this.editable,
       }],
-      on: { click: this.click },
+      on: {
+        click: this.click,
+        keydown: this.keyboardClick,
+      },
     }, [
       this.genStep(),
       this.genLabel(),

diff --git a/packages/vuetify/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap b/packages/vuetify/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VStepperStep.ts should accept a custom color 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step pink">
     <i aria-hidden="true"
        class="v-icon notranslate mdi mdi-check theme--light"
@@ -14,7 +16,9 @@ exports[`VStepperStep.ts should accept a custom color 1`] = `
 `;
 
 exports[`VStepperStep.ts should accept a custom css color 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step"
         style="background-color: rgb(170, 187, 204); border-color: #aabbcc;"
   >
@@ -29,7 +33,9 @@ exports[`VStepperStep.ts should accept a custom css color 1`] = `
 `;
 
 exports[`VStepperStep.ts should render 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive"
+>
   <span class="v-stepper__step__step">
     1
   </span>
@@ -39,7 +45,9 @@ exports[`VStepperStep.ts should render 1`] = `
 `;
 
 exports[`VStepperStep.ts should render complete step 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step primary">
     <i aria-hidden="true"
        class="v-icon notranslate mdi mdi-check theme--light"
@@ -52,7 +60,9 @@ exports[`VStepperStep.ts should render complete step 1`] = `
 `;
 
 exports[`VStepperStep.ts should render editable step 1`] = `
-<div class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="0"
+     class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step primary">
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
@@ -66,7 +76,9 @@ exports[`VStepperStep.ts should render editable step 1`] = `
 `;
 
 exports[`VStepperStep.ts should render step with error 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text"
+>
   <span class="v-stepper__step__step">
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"