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

jacobmllr95 · web-flow · commit b98001713961 · 2020-12-23T23:53:14.000+01:00
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 =

Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,6 @@ export const captionMixin = Vue.extend({`
`20`	`20`	`props,`
`21`	`21`	`computed: {`
`22`	`22`	`captionId() {`
`23`		- // Even though `this.safeId` looks like a method, it is a computed prop
`24`		`- // that returns a new function if the underlying ID changes`
`25`	`23`	`return this.isStacked ? this.safeId('_caption_') : null`
`26`	`24`	`}`
`27`	`25`	`},`
`@@ -38,7 +36,8 @@ export const captionMixin = Vue.extend({`
`38`	`36`	`{`
`39`	`37`	`attrs: { id: this.captionId },`
`40`	`38`	`domProps: hasCaptionSlot ? {} : htmlOrText(captionHtml, caption),`
`41`		`- key: 'caption'`
	`39`	`+ key: 'caption',`
	`40`	`+ ref: 'caption'`
`42`	`41`	`},`
`43`	`42`	`this.normalizeSlot(SLOT_NAME_TABLE_CAPTION)`
`44`	`43`	`)`