Callouts HTML headings level for a11y

Created by: hannahiss

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

On many pages, Bootstrap added callouts to inform, warn or alert readers about specific problems. 33 of them begin with HTML heading.

Live example in drodpdowns: https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#rtl
Live example in tooltips: https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#overflow-auto-and-scroll

For those callouts (having a HTML heading), there is sometimes a problem with the title level, which does not follow directly the previous title level, which is recommended for accessibility purposes.

Is a HTML heading really needed there ? It makes the callouts title enter into the page table of contents, which is strange. I would suggest to use a <div> with a class like .h5. Moreover, it would harmonize the look of all callouts having HTML heading (they currently have different headings level and look slightly different).

Among the 33 callouts with HTML heading,15 have a heading level issue (see list below).

Reduced test cases

Screen copy of callout with HTML heading:

List of callouts having HTML heading:

Overview/RTL:
- https://twbs-bootstrap.netlify.app/docs/5.2/getting-started/rtl/#experimental-feature: no heading level problem
- https://twbs-bootstrap.netlify.app/docs/5.2/getting-started/rtl/#edge-cases-and-known-limitations: no heading level problem
Customize/optimize:
- https://twbs-bootstrap.netlify.app/docs/5.2/customize/optimize/#default-exports: no heading level problem
Content:
- Reboot:
  - https://twbs-bootstrap.netlify.app/docs/5.2/content/reboot/#date--color-input-support: h5 after h2
  - https://twbs-bootstrap.netlify.app/docs/5.2/content/reboot/#jquery-incompatibility: h5 after h2
- Tables:
  - https://twbs-bootstrap.netlify.app/docs/5.2/content/tables/#conveying-meaning-to-assistive-technologies: h5 after h2
Forms/overview:
- https://twbs-bootstrap.netlify.app/docs/5.2/forms/overview/#associating-form-text-with-form-controls: h5 after h2
Components:
- Alerts:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/alerts/#conveying-meaning-to-assistive-technologies: h5 after h2
- Badge:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/badge/#conveying-meaning-to-assistive-technologies: h5 after h2
- Breadcrumb:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/breadcrumb/#using-embedded-svg: no heading level problem
- Buttons:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/buttons/#conveying-meaning-to-assistive-technologies: h5 after h2
- Button-group:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/button-group/#ensure-correct-role-and-provide-a-label: h5 after h2
- Card:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/card/#conveying-meaning-to-assistive-technologies: no heading level problem
- Carousel:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/carousel/#asynchronous-methods-and-transitions: no heading level problem
- Collapse:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/collapse/#asynchronous-methods-and-transitions: no heading level problem
- Dropdowns:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#rtl: h4 after h2
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/dropdowns/#data-bs-toggledropdown-still-required: h4 after h2 (and not really suitable text for a heading)
- List-group:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/list-group/#conveying-meaning-to-assistive-technologies: h5 after h3
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/list-group/#asynchronous-methods-and-transitions: no heading level problem
- Modal:
- https://twbs-bootstrap.netlify.app/docs/5.2/components/modal/#asynchronous-methods-and-transitions: no heading level problem
- Nav & tabs:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/navs-tabs/#asynchronous-methods-and-transitions: no heading level problem
- Offcanvas:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/offcanvas/#asynchronous-methods-and-transitions: no heading level problem
- Popovers:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#specific-markup-required-for-dismiss-on-next-click: no heading level problem
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#making-popovers-work-for-keyboard-and-assistive-technology-users: no heading level problem
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#data-attributes-for-individual-popovers: no heading level problem
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/popovers/#asynchronous-methods-and-transitions: no heading level problem
- Progress:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/progress/#conveying-meaning-to-assistive-technologies: h5 after h2
- Toasts:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/toasts/#asynchronous-methods-and-transitions: no heading level problem
- Tooltips:
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#overflow-auto-and-scroll: h5 after h2
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#making-tooltips-work-for-keyboard-and-assistive-technology-users: h5 after h3
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#data-attributes-for-individual-tooltips: no heading level problem
  - https://twbs-bootstrap.netlify.app/docs/5.2/components/tooltips/#asynchronous-methods-and-transitions: no heading level problem
Utilities/colors:
- https://twbs-bootstrap.netlify.app/docs/5.2/utilities/colors/#conveying-meaning-to-assistive-technologies: h5 after h2

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

Windows, macOS, Android, iOS, Linux

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

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

v5.2