#114 Provide unique ids for steps and tabs without spaces

BinarCode · Nov 28, 2017 · d11b5ed · d11b5ed
1 parent 407ee97
commit d11b5ed
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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}"