<b-table> Certain ARIA roles must contain particular children

[b-89]

Describe the bug

When using <b-table> with data and fields props set to an empty array, the table isn't passing the accessibility requirement that Certain ARIA roles must contain particular children. Reason both data and fields arrays are empty is because those are determined dynamically from the server response.

Steps to reproduce the bug

Setup a <b-table :data="[]" :fields="[]" />
Run axe devtools to analyze.

Expected behavior

If data is empty and fields is empty or isn't set, then there should be some kind of default behavior for the table to pass accessibility if the server fails to load the data.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.15
• Bootstrap: 4.3.1.
• Vue: 2.6.10

Environment:

• Device: hp
• OS: Windows 10
• Browser: Chrome
• Version: Latest

[tmorehouse]

Is this when using the empty slot, or jsut with the two empty arrays (items/fields)?

[tmorehouse]

Also, which elements/roles are generating the issue?

[b-89]

So the actual version we're using is using the empty slot as well, but I notice the <thead> and <tbody> being generated without it too. From what I noticed, it's a <tr> being empty inside the <thead> and <tbody>.

[tmorehouse]

We may need to just add a conditional render for b-table, and render a placeholder comment if both fields and items are empty, and no empty slot present (there needs to be at least once header rendered for empty slot to work currently)

[b-89]

Even when empty slot is used, the accessibility requirement is invalid for the <thead>.

[b-89]

Could you not render the <thead> unless there is data or fields set?

[tmorehouse]

Version 2.0.0-rc.25 has been released.

[b-89]

Thanks man!