diff --git a/src/components/table/helpers/mixin-caption.js b/src/components/table/helpers/mixin-caption.js index bbb7ab726eb..377a65deb5b 100644 --- a/src/components/table/helpers/mixin-caption.js +++ b/src/components/table/helpers/mixin-caption.js @@ -20,8 +20,6 @@ export const captionMixin = Vue.extend({ props, computed: { captionId() { - // Even though `this.safeId` looks like a method, it is a computed prop - // that returns a new function if the underlying ID changes return this.isStacked ? this.safeId('_caption_') : null } }, @@ -38,7 +36,8 @@ export const captionMixin = Vue.extend({ { attrs: { id: this.captionId }, domProps: hasCaptionSlot ? {} : htmlOrText(captionHtml, caption), - key: 'caption' + key: 'caption', + ref: 'caption' }, this.normalizeSlot(SLOT_NAME_TABLE_CAPTION) ) diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js index d0d2c49ca9d..7a56ad2df25 100644 --- a/src/components/table/helpers/mixin-table-renderer.js +++ b/src/components/table/helpers/mixin-table-renderer.js @@ -113,17 +113,14 @@ export const tableRendererMixin = Vue.extend({ selectableTableAttrs } = this - // Preserve user supplied aria-describedby, if provided in `$attrs` - const adb = - [(this.bvAttrs || {})['aria-describedby'], this.captionId].filter(identity).join(' ') || - null - const ariaAttrs = this.isTableSimple ? {} : { 'aria-busy': this.computedBusy ? 'true' : 'false', 'aria-colcount': toString(fields.length), - 'aria-describedby': adb + // Preserve user supplied `aria-describedby`, if provided + 'aria-describedby': + this.bvAttrs['aria-describedby'] || this.$refs.caption ? this.captionId : null } const rowCount =