fix(b-dropdown): only apply heading role to header when not a header tag (#6274)

Author: jacobmllr95

src/components/dropdown/dropdown-group.js

@@ -2,6 +2,7 @@ import { Vue, mergeData } from '../../vue'
 import { NAME_DROPDOWN_GROUP } from '../../constants/components'
 import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER } from '../../constants/slots'
+import { isTag } from '../../utils/dom'
 import { identity } from '../../utils/identity'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 import { omit } from '../../utils/object'
@@ -29,24 +30,25 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
   functional: true,
   props,
   render(h, { props, data, slots, scopedSlots }) {
+    const { id, variant, header, headerTag } = props
     const $slots = slots()
     const $scopedSlots = scopedSlots || {}
     const slotScope = {}
-    const headerId = props.id ? `_bv_${props.id}_group_dd_header` : null
+    const headerId = id ? `_bv_${id}_group_dd_header` : null
 
     let $header = h()
-    if (hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots) || props.header) {
+    if (hasNormalizedSlot(SLOT_NAME_HEADER, $scopedSlots, $slots) || header) {
       $header = h(
-        props.headerTag,
+        headerTag,
         {
           staticClass: 'dropdown-header',
-          class: [props.headerClasses, { [`text-${props.variant}`]: props.variant }],
+          class: [props.headerClasses, { [`text-${variant}`]: variant }],
           attrs: {
             id: headerId,
-            role: 'heading'
+            role: isTag(headerTag, 'header') ? null : 'heading'
           }
         },
-        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots) || props.header
+        normalizeSlot(SLOT_NAME_HEADER, slotScope, $scopedSlots, $slots) || header
       )
     }
 
@@ -58,7 +60,7 @@ export const BDropdownGroup = /*#__PURE__*/ Vue.extend({
           staticClass: 'list-unstyled',
           attrs: {
             ...(data.attrs || {}),
-            id: props.id || null,
+            id,
             role: 'group',
             'aria-describedby':
               [headerId, props.ariaDescribedBy]

src/components/dropdown/dropdown-header.js

@@ -1,6 +1,7 @@
 import { Vue, mergeData } from '../../vue'
 import { NAME_DROPDOWN_HEADER } from '../../constants/components'
 import { PROP_TYPE_STRING } from '../../constants/props'
+import { isTag } from '../../utils/dom'
 import { omit } from '../../utils/object'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
 
@@ -23,18 +24,18 @@ export const BDropdownHeader = /*#__PURE__*/ Vue.extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
-    const { variant } = props
+    const { tag, variant } = props
 
     return h('li', mergeData(omit(data, ['attrs']), { attrs: { role: 'presentation' } }), [
       h(
-        props.tag,
+        tag,
         {
           staticClass: 'dropdown-header',
           class: { [`text-${variant}`]: variant },
           attrs: {
             ...(data.attrs || {}),
             id: props.id || null,
-            role: 'heading'
+            role: isTag(tag, 'header') ? null : 'heading'
           },
           ref: 'header'
         },