ionic-framework: bug: select, long text does not truncate

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Ionic now suggests adding a label or aria-label to tags such as ion-select which is highlighted via this console warning

[Ionic Warning]: ion-select now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.

Example: <ion-select label="Favorite Color">...</ion-select>
Example with aria-label: <ion-select aria-label="Favorite Color">...</ion-select>

Upon adding an aria-label attribute to the ion-select, the positioning of the up / down carets on the right hand side comes inwards. Here is a basic code example

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">

      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label>Fruit</label>
      </ion-col>

      <ion-col>
        <ion-select placeholder="Select a fruit" fill="outline" aria-label="Fruit" style="border: 3px solid blue;">
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>

    </ion-row>
</ion-content>

The result of that being…

Expected Behavior

I would expect the position of the carets to remain the same as without the aria-label attribute.

In the below example, the carets remain in the position expected.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <ion-row style="border: 3px solid black;">

      <ion-col class="ion-align-self-center" style="border: 3px solid red;" size="4">
        <label id="fruit-label">Fruit</label>
      </ion-col>

      <ion-col>
        <ion-select placeholder="Select a fruit" fill="outline" style="border: 3px solid blue;">
          <ion-select-option value="apple">Apple</ion-select-option>
          <ion-select-option value="banana">Banana</ion-select-option>
          <ion-select-option value="orange">Orange</ion-select-option>
        </ion-select>
      </ion-col>

    </ion-row>
</ion-content>

The result of that being…

Steps to Reproduce

1. Add snippet provided above in the Current Behaviour section

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.8 (/opt/homebrew/lib/node_modules/@ionic/cli)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 15.2.4
   @angular-devkit/schematics    : 15.2.4
   @angular/cli                  : 15.2.4
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 4.7.3
   @capacitor/android : not installed
   @capacitor/core    : 4.7.3
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.2

System:

   NodeJS : v18.10.0 (/Users/matt/.n/bin/node)
   npm    : 8.19.2
   OS     : macOS Unknown

Additional Information

No response