bug: aria-label/label cause undesired changes on ionic components

[Wasenshi123]

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

When I upgraded to ionic 7, I noticed the warning in console about aria-label or label needed on various component (mainly, ion-input, ion-select, ion-textarea).

I have my own layout structure for look & responsive purpose, so I cannot just use "label" property. Thus, I tried to add aria-label instead.

But I found out that, after I added aria-label (or label property for that matter), the look and behavior of those components got changed.

namely:

• all: line is not highlighted anymore( when the component got focus)
• ion-input: placeholder gets shown all the time (previously, will only be shown when the component gets focus)
• ion-select: the arrow of the select box is not at the end of component and no transition animation
• ion-select: Header in alert interface is not shown anymore

Those structure and issues have been demonstrated here:
https://stackblitz.com/edit/3we1ad-cymjmo?file=index.html

Expected Behavior

The behavior and appearance of ion-input/ion-select/ion-textarea should not be altered after adding aria-label or label property.

Steps to Reproduce

1. Wrap ion-input or ion-select or ion-textarea in ion-item
2. Add aria-label or label property
3. Behavior get altered

Code Reproduction URL

https://stackblitz.com/edit/3we1ad-cymjmo?file=index.html

Ionic Info

Ionic:

Ionic CLI : 7.0.1 (C:\Users\User\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.0.1
@angular-devkit/build-angular : 15.2.5
@angular-devkit/schematics : 10.1.7
@angular/cli : 15.2.5
@ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v16.18.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.2
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. There are a few issues here:

1. Inputs do not receive the blue highlight line.
   Inputs inside of ion-item no longer receive the blue highlight. This was done to match the Material Design spec. Inputs used outside of ion-item continue to receive the blue highlight.

2. Placeholder is always show on the input
   This is happening because you did not migrate your input correctly. The warning states that you should use the label property on ion-input for visible text and remove ion-label. However, you used aria-label which should be used if you do not have visible text. When migrating to the new syntax, ion-input ignores the ion-label which is why the unexpected behavior is happening.

Here is the correct syntax:

<ion-input label="Name" label-placement="floating"></ion-input>

(I omitted the other attributes for brevity)

3. Select is not sized correctly.

This is the same issue as 2 but with ion-select. Here is the correct syntax:

<ion-select label="Gender" label-placement="floating">...</ion-select>

4. Header is not shown in select alert.

Making the changes in step 3 fixes the issue.

[liamdebeasi]

Our documentation also has more examples on how to migrate: https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax

[Wasenshi123]

If you expand the window you will see that I have another set of labels on the other ion-cols for wider screen.

How can I make your solution applied to this case?

(And also, note that the labels have red '*' to indicate for user that it's required, how can I apply that to 'label' property?)

[Wasenshi123]

Here I tried your solution: https://stackblitz.com/edit/3we1ad-ox58un?file=index.html

You can see that it still does not solve my problem entirely.

When size of window is more than sm, the labels will be doubled.

And the red '*' cannot be shown on those built-in label from 'label' property.

[liamdebeasi]

If you expand the window you will see that I have another set of labels on the other ion-cols for wider screen.

This isn't something you should be doing. The reason is that screen readers (like VoiceOver and TalkBack) are unable to associate the label with the form control which makes for a confusing experience for people who are using assistive technology.

It looks like what you are trying to do is make sure the labels/inputs are all lined up consistently. In that case, I recommend using label-placement="fixed" which gives labels a fixed width.

(And also, note that the labels have red '*' to indicate for user that it's required, how can I apply that to 'label' property

Inputs don't have support for custom HTML at the moment, but you can do something like this:

ion-input.custom-input .label-text::after {
  content: "*";
  color: red;
}

[Wasenshi123]

It looks like what you are trying to do is make sure the labels/inputs are all lined up consistently. In that case, I recommend using label-placement="fixed" which gives labels a fixed width.

Yes, partly, but not just that. I also want to make it floating when the screen is smaller to make it more user friendly and responsive.

Inputs don't have support for custom HTML at the moment, but you can do something like this:

how to apply this to ion-select too?

I tried it here, but you can see the ion-select is not receiving that: https://stackblitz.com/edit/3we1ad-kzmne4?file=index.html