fix(VToolbar): give proper default tag and allow for a custom one

vuetifyjs · Jun 29, 2019 · 47d56b2 · 47d56b2
1 parent 186eec1
commit 47d56b2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBar.spec.ts.snap b/packages/vuetify/src/components/VAppBar/__tests__/__snapshots__/VAppBar.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`AppBar.ts should render with background 1`] = `
 
-<nav class="v-sheet v-sheet--tile theme--light v-toolbar v-app-bar"
-     style="margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"
+<header class="v-sheet v-sheet--tile theme--light v-toolbar v-app-bar"
+        style="margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px;"
 >
   <div class="v-toolbar__image">
     <div class="v-responsive v-image"
@@ -23,6 +23,6 @@ exports[`AppBar.ts should render with background 1`] = `
        style="height: 64px;"
   >
   </div>
-</nav>
+</header>
 
 `;
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.ts b/packages/vuetify/src/components/VToolbar/VToolbar.ts
@@ -41,6 +41,10 @@ export default VSheet.extend({
       type: Boolean,
       default: true,
     },
+    tag: {
+      type: String,
+      default: 'header',
+    },
   },
 
   data: () => ({
@@ -159,6 +163,6 @@ export default VSheet.extend({
     if (this.isExtended) children.push(this.genExtension())
     if (this.src || this.$scopedSlots.img) children.unshift(this.genBackground())
 
-    return h('nav', data, children)
+    return h(this.tag, data, children)
   },
 })
diff --git a/packages/vuetify/src/components/VToolbar/__tests__/__snapshots__/VToolbar.spec.ts.snap b/packages/vuetify/src/components/VToolbar/__tests__/__snapshots__/VToolbar.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`VToolbar.ts should render an extended toolbar 1`] = `
 
-<nav class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--extended">
+<header class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--extended">
   <div class="v-toolbar__content"
        style="height: 64px;"
   >
@@ -11,13 +11,13 @@ exports[`VToolbar.ts should render an extended toolbar 1`] = `
        style="height: 48px;"
   >
   </div>
-</nav>
+</header>
 
 `;
 
 exports[`VToolbar.ts should render an extended toolbar with specific height 1`] = `
 
-<nav class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--extended">
+<header class="v-sheet v-sheet--tile theme--light v-toolbar v-toolbar--extended">
   <div class="v-toolbar__content"
        style="height: 64px;"
   >
@@ -26,6 +26,6 @@ exports[`VToolbar.ts should render an extended toolbar with specific height 1`]
        style="height: 42px;"
   >
   </div>
-</nav>
+</header>
 
 `;