Describe the bug

The b-form-group adds aria-describedby to the input specified, and looks for it based on the given label-for. When the id of the input uses special characters, which are valid HTML5 (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id), a console error happens, and the aria-describedby is not added.

The reason for this is that the special characters are not escaped inside querySelector.

I encountered this bug when using an id that comes from a FHIR Questionnaire, which usually has ids like /15478-3. We are not in control of these ids, and it's kind of a standard practice to use this / character for them.

Steps to reproduce the bug

Just use /my-id for example:

<b-form-group ... label-for="/my-id">...</b-form-group>

See for a working example, and notice the console error, which makes the component "failing": https://codesandbox.io/s/serene-dewdney-ydnnu

Expected behavior

As these characters are allowed in HTML5, though have a compatibility warning for HTML4, this should just work, as a library like this must not be concerned with these warnings, as it's up to the user to decide if they want to be compatible.

Versions

Libraries:

• BootstrapVue: 2.15.0
• Bootstrap: 4.5.0
• Vue: 2.6.11

Environment:

• Device: Windows laptop
• OS: Windows 10
• Browser: Edge
• Version: Version 84.0.522.28

Demo link

Thx for the playground and export links, this really makes it easy to have min. reproductions.

https://codesandbox.io/s/serene-dewdney-ydnnu

Additional context

Like mentioned earlier, we are in no control of the ids being used, as our application is a consumer of these, and we have to use them.

The solution is just to use CSS.escape to escape the selector. I will see to create a PR to resolve this. Unless there are any concerns in doing this, as I don't know all internals of this library.