Describe the bug

I'm not sure if you'd classify this as a bug or feature request. Please update if needed.

The problem is I need to apply the aria-labelledby attribute to the actual checkbox. When I set the attribute on a <b-form-checkbox> it gets applied to the wrapping div, not the inner <input type='checkbox'>. I'm not sure this is sufficient for screen readers to identify the relationship between the checkboxes, because the aria-labelledby isn't directly attached to the actual input.

Steps to reproduce the bug

1. Set aria-labelledby on a <b-form-checkbox>
2. Observe that the attribute is applied to the wrapper div (with .custom-checkbox), not the inner element.

Expected behavior

I think aria-labelledby should be passed through to the <input> or possibly set on both the input and the wrapper div.

Versions

Libraries:

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

Environment:

• Any

Additional context

I'm running accessibility audits on my code using the Axe plugin.

I've got a <b-table> with rows, and each row has a checkbox to select the row. Each of these checkboxes has the same 'name' attribute. I can put a label (with .sr-only class) on each checkbox, but Axe says that these should also have an aria-labelledby pointing to the same label. I.e., because the checkboxes are related they each need both an individual label and a group label to show that they are related.

I can't apply a group label through the normal means of using <b-form-group>, <legend>, etc because each checkbox is in a separate <tr>. When aria-labelledby is attached to the checkbox's wrapper div, Axe doesn't seem to think this is sufficient.

I also tried using @hook:mounted on each <b-form-checkbox> to try to insert the aria-labelledby attribute, but using this technique I can't seem to get a handle on the specific <b-form-checkbox> component.