From d11b5ed9cf0c609cf916e8dec1afe2fb2e0f7812 Mon Sep 17 00:00:00 2001
From: cristijora <joracristi@gmail.com>
Date: Tue, 28 Nov 2017 17:11:10 +0200
Subject: [PATCH] #114 Provide unique ids for steps and tabs without spaces

---
 src/components/FormWizard.vue | 2 +-
 src/components/TabContent.vue | 7 ++++---
 src/components/WizardStep.vue | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/FormWizard.vue b/src/components/FormWizard.vue
index dc2426d..98fecee 100644
--- a/src/components/FormWizard.vue
+++ b/src/components/FormWizard.vue
@@ -232,7 +232,7 @@
       },
       addTab (item) {
         const index = this.$slots.default.indexOf(item.$vnode)
-        item.tabId = `t-${item.title.replace(/ /g, '')}${index}`
+        item.tabId = `${item.title.replace(/ /g, '')}${index}`
         this.tabs.splice(index, 0, item)
         // if a step is added before the current one, go to it
         if (index < this.activeTabIndex + 1) {
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index 051001a..02f0b42 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-show="active" class="wizard-tab-container"
        role="tabpanel"
-       :id="title"
+       :id="tabId"
        :aria-hidden="!active"
-       :aria-labelledby="title">
+       :aria-labelledby="`step-${tabId}`">
     <slot :active="active">
     </slot>
   </div>
@@ -43,7 +43,8 @@
       return {
         active: false,
         validationError: null,
-        checked: false
+        checked: false,
+        tabId: ''
       }
     },
     computed: {
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
index a2a5fb8..d6a11d6 100644
--- a/src/components/WizardStep.vue
+++ b/src/components/WizardStep.vue
@@ -4,8 +4,8 @@
       <div class="wizard-icon-circle md"
            role="tab"
            :tabindex="tab.checked ? 0 : ''"
-           :id="tab.tabId"
-           :aria-controls="tab.title"
+           :id="`step-${tab.tabId}`"
+           :aria-controls="tab.tabId"
            :aria-disabled="tab.active"
            :aria-selected="tab.active"
            :class="{checked: tab.checked,square_shape:isStepSquare, tab_shape:isTabShape}"