Ionic 7: Can't bind to 'aria-label' since it isn't a known property of 'ion-input'

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.

What could be causing this?


Have you tried just using label instead?

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 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.

It’s not a typo, unfortunately. Good to hear it’s working for some :slight_smile:

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.

I am going to downgrade for now.

1 Like

Hey there,

This is a known issue, and we have a dev build with a proposed fix on bug: v7, cannot pass dynamic label to form controls · Issue #27085 · ionic-team/ionic-framework · GitHub if you are interested in trying.