Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BFormGroup doesn't add an id on description/valid-feedback/invalid-feedback slots #5930

Closed
Axolotle opened this issue Oct 20, 2020 · 1 comment · Fixed by #5933
Closed

BFormGroup doesn't add an id on description/valid-feedback/invalid-feedback slots #5930

Axolotle opened this issue Oct 20, 2020 · 1 comment · Fixed by #5933
Projects

Comments

@Axolotle
Copy link

Axolotle commented Oct 20, 2020

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

  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>

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
@jacobmllr95 jacobmllr95 added this to To do in v2.28.1 via automation Oct 21, 2020
@jacobmllr95 jacobmllr95 moved this from To do to In progress in v2.28.1 Oct 21, 2020
v2.28.1 automation moved this from In progress to Done Oct 21, 2020
jacobmllr95 added a commit that referenced this issue Oct 21, 2020
* fix(b-form-group): content element ID handling

* Update form-group.js

* Update form-group.js
jacobmllr95 added a commit that referenced this issue Oct 21, 2020
* chore(deps): update devdependency vue-jest to ^3.0.7 (#5770)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-modal): solve body padding not being removed (#5771)

* update dom.js

* update

* update modal-manager.js

* chore(deps): update devdependency @nuxt/content to ^1.9.0 (#5773)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.27.0 (#5779)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-table): properly handle empty included/excluded filter fields (closes #5775) (#5780)

* fix(b-table): properly handle empty included/excluded filter fileds

* Update table-filtering.spec.js

* chore: lock `postcss` and `autoprefixer` for now (closes #5774) (#5782)

* chore: lock `postcss` and `autoprefixer` for now

* Update renovate.json

* chore(deps): update devdependency lint-staged to ^10.4.0 (#5783)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: code refactoring to separate constants from utils and better code sharing (#5772)

* Initial improvements

* Separate inspect from other utils

* feat: code refactoring to reparte constants from utils and better code sharing

* Update modal.js

* Update form-group.spec.js

* Update .bundlewatch.config.json

* Update form-group.spec.js

* chore: bump version to v2.17.1 (#5786)

* chore(deps): update devdependency postcss to ^7.0.34 (#5788)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.27.1 (#5790)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-tooltip, b-popover): fix `title` not being reset on hide (#5793)

* fix bug

* add test

* update tooltip.spec.js

* Update bv-tooltip.js

* Update bv-tooltip.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-nav-item-dropdown): `boundary` handling in `<b-navbar>` (closes #5789) (#5794)

* fix(b-nav-item-dropdown): `boundary` handling in `<b-navbar>`

* Update nav-item-dropdown.spec.js

* docs(form-tags): fix unmatched quote in wrapper example (#5796)

* chore(deps): update devdependency terser to ^5.3.2 (#5800)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix typo in `b-form-rating` docs (#5801)

* chore: update keywords

* chore: move `standard-version` configuration to `.versionrc` and skip commit and tag creation

* fix(b-skeleton): add missing component exports (#5806)

* Fix description (#5807)

* chore: bump version to v2.17.2 (#5805)

* chore: bump version to vv2.17.2

* Update CHANGELOG.md

* chore(deps): update all non-major dependencies (#5816)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency codesandbox to ^2.2.1 (#5824)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency codemirror to ^5.58.1 (#5826)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency postcss-cli to v8 (#5821)

* chore(deps): update devdependency postcss-cli to v8

* Update to `postcss` v8

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5830)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-config-prettier to ^6.12.0 (#5831)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5833)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* docs(form-timepicker): fix typos in locale attribute (#5834)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update all non-major dependencies (#5835)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency terser to ^5.3.3 (#5838)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency postcss to ^8.1.1 (#5843)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-vue to v7 (#5844)

* chore(deps): update devdependency eslint-plugin-vue to v7

* chore: refactro code to conform new rules of `eslint-plugin-vue` v7

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-carousel): fix glitching when switching slides fast (closes #5810) (#5845)

* fix glitchingg

* Update carousel.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* Update README.md (#5846)

Fix typo

* chore(deps): update devdependency terser to ^5.3.4 (#5852)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-vue to ^7.0.1 (#5853)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies to ^26.5.0 (#5854)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-jest to ^24.1.0 (#5856)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies to ^26.5.2 (#5857)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/pwa to ^3.1.0 (#5858)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-sekelton): animation overflow issue for Safari (#5863)

* chore(docs): add example for `<b-toast>` with custom close button (#5864)

* chore(docs): simplify `<b-form-group>` validation message example (#5862)

* chore(deps): update devdependency @nuxtjs/pwa to ^3.1.2 (#5865)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency vue-router to ^3.4.6 (#5866)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.29.0 (#5871)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-card): properly support header/footer with body image overlay (#5872)

* chore(deps): update devdependency postcss-cli to ^8.1.0 (#5874)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency sass-loader to ^10.0.3 (#5878)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5880)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency jest to ^26.5.3 (#5884)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency terser to ^5.3.5 (#5886)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* docs(b-navbar): specify support of sidebar + array (#5885)

* specify support of sidebar + array

* update package.json

* Update navbar-toggle.js

* Update README.md

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency @nuxt/content to ^1.10.0 (#5887)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-link): `href` handling inconsistencies to `<router-link>` (closes #5820) (#5876)

* fix(b-link): `href` handling inconsistencies to `<router-link>`

* Update regex.js

* Update link.js

* Update link.js

* fix(v-tooltip, v-popover): render data-* attributes on root components (closes #5836) (#5882)

* fix(v-tooltip, v-popover): render data-* attributes on root components

* Delete package-lock.json

* Remove TBD's

* Attribute inheritance improvents

* Update popover.spec.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* Update README.md (#5889)

* chore(deps): update devdependency @nuxtjs/pwa to ^3.2.0 (#5890)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency @nuxtjs/pwa to ^3.2.1 (#5891)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): fix datepicker locale typo (#5892)

* chore: ignore `package-lock.json`

* chore(docs): use new slot syntax everywhere (#5895)

* chore(deps): update all non-major dependencies (#5896)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* feat: update `core-js` to v3 (#5894)

* chore(deps): update dependency @nuxt/opencollective to ^0.3.2 (#5897)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix closing span tag (#5898)

* chore: update dependencies (#5899)

* chore(deps): update all non-major dependencies to ^7.12.0 (#5902)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore: move global Vue.js entry to surce root (#5904)

* chore(deps): update all non-major dependencies (#5905)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies to ^7.12.1 (#5906)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* Allow dependabot to check GitHub actions daily (#5907)

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): bump actions/setup-node from v1 to v2.1.2 (#5909)

Bumps [actions/setup-node](https://github.com/actions/setup-node) from v1 to v2.1.2.
- [Release notes](https://github.com/actions/setup-node/releases)
- [Commits](actions/setup-node@v1...c6fd00c)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat(b-calendar): add `no-key-nav` property (closes #5861) (#5883)

* feat(b-calendar): add tabIndex property

* feat(b-calendar): change tabIndex property to noKeyNav

* feat(b-calendar): add noKeyNav prop description

* Update calendar.js

* Update calendar.spec.js

* Update calendar.js

* Update calendar.spec.js

* Update calendar.spec.js

* Update calendar.js

* Update calendar.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* fix(b-calendar): month formatting for ceratin dates (#5911)

* chore(deps): update devdependency @babel/standalone to ^7.12.2 (#5910)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency vue-router to ^3.4.7 (#5912)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5914)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update all non-major dependencies (#5917)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency eslint-plugin-vue to ^7.1.0 (#5921)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency postcss to ^8.1.2 (#5922)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): correct Bootstrap SCSS imports (#5923)

* chore: bump version to v2.18.0 (#5924)

* chore(deps): update all non-major dependencies (#5926)

* chore(deps): update all non-major dependencies

* chore(deps): update all non-major dependencies

* Update yarn.lock

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

* chore(deps): update devdependency @babel/standalone to ^7.12.4 (#5928)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency rollup to ^2.32.1 (#5931)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(deps): update devdependency marked to ^1.2.2 (#5936)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* fix(b-icon): local component lookup

* Update icon.js

* Revert "Update icon.js"

This reverts commit f3ced7b.

* Revert "fix(b-icon): local component lookup"

This reverts commit edb6ed6.

* chore(deps): update devdependency eslint-config-prettier to ^6.14.0 (#5938)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* chore(docs): add ecample on how to alias Vue with Vue CLI (#5935)

* fix(b-form-group): content element ID handling (closes #5930) (#5933)

* fix(b-form-group): content element ID handling

* Update form-group.js

* Update form-group.js

* fix(b-link): `href` handling with live router (closes #5927) (#5934)

* fix(b-link): `href` handling with live router

* Update router.spec.js

* fix(b-icon): local component lookup (#5939)

* chore: bump version to v2.18.1 (#5940)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Hiws <hiws@live.dk>
Co-authored-by: JonathanGuberman <jonathan@upnotnorth.net>
Co-authored-by: JonathanGuberman <jg@tineye.com>
Co-authored-by: Milan Curcic <caomaco@gmail.com>
Co-authored-by: Wouter Kroes <wouterkroes@users.noreply.github.com>
Co-authored-by: Салоев Сади <saloev.saadi@yandex.ru>
Co-authored-by: Sauli Anto <sauli.anto@gmail.com>
Co-authored-by: 82amp <46736702+82amp@users.noreply.github.com>
Co-authored-by: John Losito <lositojohnj@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Marco Túlio Gaulberto da Silva <marcot.gualberto@gmail.com>
@Axolotle
Copy link
Author

Awesome, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

2 participants