Hey!
With the upgrade to Ionic 7, we’re running into issues with the new label-structure for ion-input, ion-range, ion-toggle, etc.
For most components & pages, the attribute aria-label works fine, both for binding and for regular text input. However, for some reason, some components and pages won’t compile with <ion-input aria-label="something"> nor <ion-input [aria-label]="'something'">.
When attempting to do <ion-input [attr.aria-label]="'something'">, this seems to work, but on the second load of the page, the console warning appears:
[Warning] [Ionic Warning]: ion-range now requires providing a label with either the label slot or the “aria-label” attribute. To migrate, remove any usage of “ion-label” and pass the label text to either the component or the “aria-label” attribute
As though there was never any aria-label set.
Additionally, using the new legacy="true property for inputs seems to not work either, resulting in the same warning as above.
Using label for ion-range and similar components doesn’t work the same way as for regular ion-inputs unfortunately.
Plain old aria-label="something" seems to work, though, but any attempt at binding text through either [aria-label]="'Text'" or [attr.aria-label]="'Text'" does not, and gives the warning above.
You have a typo.you have extra quotes. it should be: [aria-label]="Text". We migrated over as well and we don’t have any problem with using label or aria-label on ion-inputs or any other elements.
I’m struggling with the same problems. ion-inputs on pretty “simple” pages and components work as documented. But if the ion-inputs are used in a modal or even in nested modals I also have the problem that I get the warning and the inputs even break when the modal is opened the 2nd time.
I noticed that this only affects labels or aria-labels that are dynamically filled, in my case I use a “translate” pipe.
