Accessibility issues with floating labels/validation

Created by: HaoK

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

We are using the floating label look (https://getbootstrap.com/docs/5.1/forms/floating-labels/) for our forms and we've run into an accessibility issue where in High Contrast mode, users expected that the fields and text inside should be in proper orientation since this may cause confusion for our keyboard users

Reduced test cases

Validation example in the docs demonstrates the issue (https://getbootstrap.com/docs/5.1/forms/floating-labels/)

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

Windows

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

Chrome

What version of Bootstrap are you using?

5.1.0