Wrong aria-labelledby generated by tab.js

Created by: janbensch

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In the documention for using tab navigation there is a section describing JavaScript behavior:

https://getbootstrap.com/docs/5.2/components/navs-tabs/#javascript-behavior

In the first sample code all child elements have an explicit aria-labelledby attribute. If you omit it, it gets autogenerated by Bootstrap's JavaScript engine. Unfortunately it gets generated with an additional "#", which is invalid HTML.

Reduced test cases

Example: https://codepen.io/janbensch/pen/QWVmbwO

In the example, the last div got altered. Inserting the generated html in W3C Nu-Checker shows following error.

What operating system(s) are you seeing the problem on?

Windows, Android, iOS

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.2.3