bootstrap-vue · jacobmllr95 · Jan 28, 2021 · Jan 28, 2021 · Jan 28, 2021
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -114,6 +114,7 @@ export const props = makePropsConfigurable(
     // 'ltr', 'rtl', or `null` (for auto detect)
     direction: makeProp(PROP_TYPE_STRING),
     disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    headerTag: makeProp(PROP_TYPE_STRING, 'header'),
     // When `true`, renders a comment node, but keeps the component instance active
     // Mainly for <b-form-date>, so that we can get the component's value and locale
     // But we might just use separate date formatters, using the resolved locale
@@ -806,7 +807,7 @@ export const BCalendar = Vue.extend({
         : this.labelNoDateSelected || '\u00a0' // '&nbsp;'
     )
     $header = h(
-      'header',
+      this.headerTag,
       {
         staticClass: 'b-calendar-header',
         class: { 'sr-only': this.hideHeader },
@@ -936,7 +937,7 @@ export const BCalendar = Vue.extend({
 
     // Caption for calendar grid
     const $gridCaption = h(
-      'header',
+      'div',
       {
         staticClass: 'b-calendar-grid-caption text-center font-weight-bold',
         class: { 'text-muted': disabled },
@@ -1065,7 +1066,7 @@ export const BCalendar = Vue.extend({
     )
 
     const $gridHelp = h(
-      'footer',
+      'div',
       {
         staticClass: 'b-calendar-grid-help border-top small text-muted text-center bg-light',
         attrs: {

diff --git a/src/components/calendar/calendar.spec.js b/src/components/calendar/calendar.spec.js
@@ -244,6 +244,26 @@ describe('calendar', () => {
     wrapper.destroy()
   })
 
+  it('has correct header tag when "header-tag" prop is set', async () => {
+    const wrapper = mount(BCalendar, {
+      attachTo: createContainer(),
+      propsData: {
+        value: '2020-02-15', // Leap year,
+        headerTag: 'div'
+      }
+    })
+
+    expect(wrapper.vm).toBeDefined()
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    const $header = wrapper.find('.b-calendar-header')
+    expect($header.exists()).toBe(true)
+    expect($header.element.tagName).toBe('DIV')
+
+    wrapper.destroy()
+  })
+
   it('keyboard navigation works', async () => {
     const wrapper = mount(BCalendar, {
       attachTo: createContainer(),

diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json
@@ -36,6 +36,11 @@
             "prop": "disabled",
             "description": "Places the calendar in a non-interactive disabled state"
           },
+          {
+            "prop": "headerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "hidden",
             "description": "When `true`, renders a comment node instead of the calendar widget while keeping the Vue instance active. Mainly used when implementing a custom date picker"

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -128,13 +128,15 @@ export const props = makePropsConfigurable(
     footerBgVariant: makeProp(PROP_TYPE_STRING),
     footerBorderVariant: makeProp(PROP_TYPE_STRING),
     footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
     footerTextVariant: makeProp(PROP_TYPE_STRING),
     headerBgVariant: makeProp(PROP_TYPE_STRING),
     headerBorderVariant: makeProp(PROP_TYPE_STRING),
     headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     headerCloseContent: makeProp(PROP_TYPE_STRING, '&times;'),
     headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
     headerCloseVariant: makeProp(PROP_TYPE_STRING),
+    headerTag: makeProp(PROP_TYPE_STRING, 'header'),
     headerTextVariant: makeProp(PROP_TYPE_STRING),
     // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
     hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -813,7 +815,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         }
 
         $header = h(
-          'header',
+          this.headerTag,
           {
             staticClass: 'modal-header',
             class: this.headerClasses,
@@ -887,7 +889,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         }
 
         $footer = h(
-          'footer',
+          this.footerTag,
           {
             staticClass: 'modal-footer',
             class: this.footerClasses,

diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -262,6 +262,48 @@ describe('modal', () => {
 
       wrapper.destroy()
     })
+
+    it('has correct header tag when "header-tag" prop is set', async () => {
+      const wrapper = mount(BModal, {
+        attachTo: createContainer(),
+        propsData: {
+          static: true,
+          id: 'test',
+          headerTag: 'div'
+        }
+      })
+
+      expect(wrapper.vm).toBeDefined()
+      await waitNT(wrapper.vm)
+      await waitRAF()
+
+      const $header = wrapper.find('.modal-header')
+      expect($header.exists()).toBe(true)
+      expect($header.element.tagName).toBe('DIV')
+
+      wrapper.destroy()
+    })
+
+    it('has correct footer tag when "footer-tag" prop is set', async () => {
+      const wrapper = mount(BModal, {
+        attachTo: createContainer(),
+        propsData: {
+          static: true,
+          id: 'test',
+          footerTag: 'div'
+        }
+      })
+
+      expect(wrapper.vm).toBeDefined()
+      await waitNT(wrapper.vm)
+      await waitRAF()
+
+      const $footer = wrapper.find('.modal-footer')
+      expect($footer.exists()).toBe(true)
+      expect($footer.element.tagName).toBe('DIV')
+
+      wrapper.destroy()
+    })
   })
 
   describe('default button content, classes and attributes', () => {

diff --git a/src/components/modal/package.json b/src/components/modal/package.json
@@ -104,6 +104,11 @@
             "prop": "footerTextVariant",
             "description": "Applies one of the Bootstrap theme color variants to the footer text"
           },
+          {
+            "prop": "footerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "headerBgVariant",
             "description": "Applies one of the Bootstrap theme color variants to the header background"
@@ -133,6 +138,11 @@
             "prop": "headerTextVariant",
             "description": "Applies one of the Bootstrap theme color variants to the header text"
           },
+          {
+            "prop": "headerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "hideBackdrop",
             "description": "Disables rendering of the modal backdrop"

diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
@@ -39,10 +39,20 @@
             "prop": "footerClass",
             "description": "Class, or classes, to apply to the optional `footer` slot"
           },
+          {
+            "prop": "footerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "headerClass",
             "description": "Class, or classes, to apply to the built in header. Has no effect if prop `no-header` is set"
           },
+          {
+            "prop": "headerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "lazy",
             "description": "When set to `true`, the content of the sidebar will only be rendered while the sidebar is open"

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
@@ -67,7 +67,9 @@ export const props = makePropsConfigurable(
     // `aria-label` for close button
     closeLabel: makeProp(PROP_TYPE_STRING),
     footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
     headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    headerTag: makeProp(PROP_TYPE_STRING, 'header'),
     lazy: makeProp(PROP_TYPE_BOOLEAN, false),
     noCloseOnBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
     noCloseOnEsc: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -131,7 +133,7 @@ const renderHeader = (h, ctx) => {
   }
 
   return h(
-    'header',
+    ctx.headerTag,
     {
       staticClass: `${CLASS_NAME}-header`,
       class: ctx.headerClass,
@@ -160,7 +162,7 @@ const renderFooter = (h, ctx) => {
   }
 
   return h(
-    'footer',
+    ctx.footerTag,
     {
       staticClass: `${CLASS_NAME}-footer`,
       class: ctx.footerClass,

diff --git a/src/components/sidebar/sidebar.spec.js b/src/components/sidebar/sidebar.spec.js
@@ -331,7 +331,8 @@ describe('sidebar', () => {
       propsData: {
         id: 'sidebar-header-slot',
         visible: true,
-        title: 'TITLE'
+        title: 'TITLE',
+        headerTag: 'div'
       },
       slots: {
         header: 'Custom header'
@@ -343,6 +344,7 @@ describe('sidebar', () => {
 
     const $header = wrapper.find('.b-sidebar-header')
     expect($header.exists()).toBe(true)
+    expect($header.element.tagName).toBe('DIV')
     expect($header.find('strong').exists()).toBe(false)
     expect($header.find('button').exists()).toBe(false)
     expect($header.text()).toContain('Custom header')
@@ -358,7 +360,8 @@ describe('sidebar', () => {
       attachTo: createContainer(),
       propsData: {
         id: 'test-5',
-        visible: true
+        visible: true,
+        footerTag: 'div'
       },
       slots: {
         footer: '<span>FOOTER</span>'
@@ -367,10 +370,14 @@ describe('sidebar', () => {
 
     expect(wrapper.vm).toBeDefined()
     expect(wrapper.element.tagName).toBe('DIV')
+
     expect(wrapper.find('.b-sidebar-header').exists()).toBe(true)
     expect(wrapper.find('.b-sidebar-body').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').exists()).toBe(true)
-    expect(wrapper.find('.b-sidebar-footer').text()).toEqual('FOOTER')
+
+    const $footer = wrapper.find('.b-sidebar-footer')
+    expect($footer.exists()).toBe(true)
+    expect($footer.element.tagName).toBe('DIV')
+    expect($footer.text()).toEqual('FOOTER')
 
     wrapper.destroy()
   })

diff --git a/src/components/time/package.json b/src/components/time/package.json
@@ -10,6 +10,16 @@
         "component": "BTime",
         "version": "2.6.0",
         "props": [
+          {
+            "prop": "footerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
+          {
+            "prop": "headerTag",
+            "version": "2.22.0",
+            "description": "Specify the HTML tag to render instead of the default tag for the footer"
+          },
           {
             "prop": "hideHeader",
             "description": "When set, visually hides the selected time header"