fix(b-table): only set aria-describedby when caption really exists (#…

…6251)
bootstrap-vue · Dec 23, 2020 · b980017 · b980017
1 parent f2ffbeb
commit b980017
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 9 deletions.
diff --git 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
@@ -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 =