twbs / bootstrap / 28044357309

94%

main: 96%

push

github

Floating labels: place label before control for screen readers (#42539)

Floating labels required the control to precede the `<label>` in the DOM
so the floating animation could use a sibling (`~`) selector. That order
made screen readers (e.g. NVDA) announce the label after the field's
value instead of before it.

Switch the SCSS to look forward with `:has()` so the `<label>` can come
first in the DOM while the CSS still reacts to the control's state
(focus, value, disabled, autofill). Reorder all examples, docs, and the
visual test to label-first markup to match.

Also give `.form-control-plaintext` its own copy of the control tokens so
its `var(--control-*)` references resolve, fixing phantom borders and
label misalignment.

Fixes #41362

1032 of 1153 branches covered (89.51%)

Branch coverage included in aggregate %.

2971 of 3092 relevant lines covered (96.09%)

220.07 hits per line