bug:Accessibility 1.4.4 rescaling text fails for input field: floating label is truncated

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

A floating label in an input field is truncated and moved down when the text is scaled (e.g 200%)

### Expected Behavior

The label should wrap within the input field and the input field should grow (vertically) to comply with rule 1.4.4.

### Steps to Reproduce

1. Run the application
2. Rescale your text to 200%
3. Resize the window until the label no longer fits in the input field.

### Code Reproduction URL

https://github.com/ldikmans/inputfield-bug-wcag

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 8.4.3

Capacitor:

Capacitor CLI : 7.1.0
@capacitor/android : 7.1.0
@capacitor/core : 7.1.0
@capacitor/ios : 7.1.0

Utility:

cordova-res : 0.15.4
native-run : 2.0.1

System:

NodeJS : v23.7.0 (/usr/local/Cellar/node/23.7.0/bin/node)
npm : 10.9.2
OS : macOS Unknown

### Additional Information

In the documentation ionic writes that having a separate label is no longer recommended, but it seems to be the only way to adhere to WCAG guideline 1.4.4.

It seems other types of labels (stacked or default) don't solve this issue either.

I have tried to set the whitespace property to wrap and put the label in a label slot, but that seems to make it worse, all types of vertical transformations happen when I try that.