Fix bug which causes tab <section>s to have a leading # before id att…

…ribute.
blaxxi · Mar 6, 2018 · c5047aa · c5047aa
1 parent 88b969c
commit c5047aa
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 All notable changes to `vue-tabs-component` will be documented in this file
 
+## 1.4.1 - 2018-03-06
+- Fixed a bug which caused sections within tabs to have a '#' included in their id attribute.
+
 ## 1.4.0 - 2017-11-06
 - Added `isDisabled` prop to `Tab`
 

diff --git a/__tests__/__snapshots__/tabs.test.js.snap b/__tests__/__snapshots__/tabs.test.js.snap
@@ -2,19 +2,19 @@
 
 exports[`vue-tabs-component can accept a prefix and a suffix for the name 1`] = `
 "
-            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#first-tab\\" aria-selected=\\"true\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">prefixFirst tabsuffix</a></li></ul> <div class=\\"tabs-component-panels\\"><section id=\\"#first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
+            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#first-tab\\" aria-selected=\\"true\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">prefixFirst tabsuffix</a></li></ul> <div class=\\"tabs-component-panels\\"><section id=\\"first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
                         First tab content
                     </section></div></div></div>
         "
 `;
 
 exports[`vue-tabs-component can mount tabs 1`] = `
 "
-            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#first-tab\\" aria-selected=\\"true\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">First tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#second-tab\\" href=\\"#second-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Second tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#third-tab\\" href=\\"#third-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Third tab</a></li></ul> <div class=\\"tabs-component-panels\\"><section id=\\"#first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
+            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#first-tab\\" aria-selected=\\"true\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">First tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#second-tab\\" href=\\"#second-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Second tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#third-tab\\" href=\\"#third-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Third tab</a></li></ul> <div class=\\"tabs-component-panels\\"><section id=\\"first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
                         First tab content
-                    </section> <section aria-hidden=\\"true\\" id=\\"#second-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
+                    </section> <section aria-hidden=\\"true\\" id=\\"second-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
                         Second tab content
-                    </section> <section aria-hidden=\\"true\\" id=\\"#third-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
+                    </section> <section aria-hidden=\\"true\\" id=\\"third-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
                         Third tab content
                     </section></div></div></div>
         "
@@ -28,11 +28,11 @@ Object {
 
 exports[`vue-tabs-component uses the fragment of the url to determine which tab to open 1`] = `
 "
-            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#first-tab\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">First tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#second-tab\\" aria-selected=\\"true\\" href=\\"#second-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Second tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#third-tab\\" href=\\"#third-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Third tab</a></li></ul> <div class=\\"tabs-component-panels\\"><section aria-hidden=\\"true\\" id=\\"#first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
+            <div id=\\"app\\"><div class=\\"tabs-component\\"><ul role=\\"tablist\\" class=\\"tabs-component-tabs\\"><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#first-tab\\" href=\\"#first-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">First tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab is-active\\"><a aria-controls=\\"#second-tab\\" aria-selected=\\"true\\" href=\\"#second-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Second tab</a></li><li role=\\"presentation\\" class=\\"tabs-component-tab\\"><a aria-controls=\\"#third-tab\\" href=\\"#third-tab\\" role=\\"tab\\" class=\\"tabs-component-tab-a\\">Third tab</a></li></ul> <div class=\\"tabs-component-panels\\"><section aria-hidden=\\"true\\" id=\\"first-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
                         First tab content
-                    </section> <section id=\\"#second-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
+                    </section> <section id=\\"second-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"\\">
                         Second tab content
-                    </section> <section aria-hidden=\\"true\\" id=\\"#third-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
+                    </section> <section aria-hidden=\\"true\\" id=\\"third-tab\\" role=\\"tabpanel\\" class=\\"tabs-component-panel\\" style=\\"display: none;\\">
                         Third tab content
                     </section></div></div></div>
         "

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-tabs-component",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A Vue component to easily render tabs",
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",

diff --git a/src/components/Tab.vue b/src/components/Tab.vue
@@ -2,7 +2,7 @@
     <section v-show="isActive"
              :aria-hidden="! isActive"
              class="tabs-component-panel"
-             :id="hash"
+             :id="computedId"
              role="tabpanel"
     >
         <slot />
@@ -29,14 +29,16 @@
                 return this.prefix + this.name + this.suffix;
             },
 
+            computedId() {
+                return this.id ? this.id : this.name.toLowerCase().replace(/ /g, '-');
+            },
+
             hash() {
                 if (this.isDisabled) {
                     return '#';
                 }
 
-                return this.id ?
-                    '#' + this.id :
-                    '#' + this.name.toLowerCase().replace(/ /g, '-');
+                return '#' + this.computedId;
             },
         },
     };