Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/5930 below:

BFormGroup doesn't add an id on description/valid-feedback/invalid-feedback slots · Issue #5930 · bootstrap-vue/bootstrap-vue · GitHub

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.

1. Go to https://codesandbox.io/s/03tt4
2. 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>

Rendered elems should have field__BV_feedback_invalid_, field__BV_description_, …
Rendered <fieldset> should have aria-describedby="field__BV_description_ field__BV_feedback_invalid_".

Libraries:

• BootstrapVue: 2.18.0
• Bootstrap: 4.5.2
• Vue: 2.6.12

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4