diff --git a/src/components/dropdown/dropdown-group.js b/src/components/dropdown/dropdown-group.js index 256dd6c172b..a30c93c6dba 100644 --- a/src/components/dropdown/dropdown-group.js +++ b/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] diff --git a/src/components/dropdown/dropdown-header.js b/src/components/dropdown/dropdown-header.js index 555a3323274..f1721d937ea 100644 --- a/src/components/dropdown/dropdown-header.js +++ b/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' },