Closed
Description
Describe the bug
Hi, b-form-group doesn't add ids to its slots except for label. I managed to get one on an slotted invalid-feedback but i can't figure it out how.
Therefore <fieldset>'s aria-describedby isn't updated either and screen readers can't read it.
Steps to reproduce the bug
- Go to https://codesandbox.io/s/03tt4
- Check ids on the different DOM elements
or just try yourself on Online Playground
<div>
<b-form-group id="field" :state="false">
<b-input />
<template v-slot:label>
label as slot (with id)
</template>
<template v-slot:valid-feedback>
valid as slot (no id on elem)
</template>
<template v-slot:invalid-feedback>
invalid as slot (no id on elem)
</template>
<template v-slot:description>
description as slot (no id on elem)
</template>
</b-form-group>
<b-form-group
id="field2" :state="false"
label="label as prop (with id)"
valid-feedback="valid as prop (with id)"
invalid-feedback="invalid as prop (with id)"
description="description as prop (with id)"
>
<b-input />
</b-form-group>
</div>Expected behavior
Rendered elems should have field__BV_feedback_invalid_, field__BV_description_, …
Rendered <fieldset> should have aria-describedby="field__BV_description_ field__BV_feedback_invalid_".
Versions
Libraries:
- BootstrapVue: 2.18.0
- Bootstrap: 4.5.2
- Vue: 2.6.12