bug: component inherited attributes are not updated when changed dynamically

[BenoitMonchanin]

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

v6.x

Current Behavior

Hello,

I'm working on accessibility in my app and I want to provide ARIA Invalid property to an ion-input dynamically (I'm using Angular with forms). First value is correctly provided to native input but there is no changes on native input when ARIA Invalid property updates.

Expected Behavior

I wanted to know if it is possible to make it working or if there is a work around for my case.

Steps to Reproduce

1. Create a page/component in Angular ;
2. Add an ion-input inside of it ;
3. Add ARIA Invalid property with a variable [attr.aria-invalid]="invalid" ;
4. Make possible to update invalid variable to update dynamically your input accessibility ;
5. You'll see that native input don't receive new value of aria-invalid.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.2
@angular-devkit/build-angular : 13.3.11
@angular-devkit/schematics : 14.2.2
@angular/cli : 13.1.4
@ionic/angular-toolkit : 7.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v16.19.1 (/Users/monchaninbenoit/.nvm/versions/node/v16.19.1/bin/node)
npm : 8.19.3
OS : macOS

Additional Information

Don't worry to ask me for something !

Sorry for my bad english

[liamdebeasi]

Thanks for the report. Are you able to reproduce this issue in an Ionic starter and provide a link to the repo? Having a runnable sample will help us triage this issue.

[BenoitMonchanin]

Hello Liam !

Here is a link to a little project which has the issue : https://github.com/BenoitMonchanin/ionic-demo
You can just run by cd ion-input_aria-invalid, little npm i then ionic serve and the first page will be it !

Thanks

(Edit)
Here is the ionic info for this project :

Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 16.0.1
@angular-devkit/schematics : 16.0.1
@angular/cli : 16.0.1
@ionic/angular-toolkit : 9.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v16.19.1 (/Users/monchaninbenoit/.nvm/versions/node/v16.19.1/bin/node)
npm : 8.19.3
OS : macOS

[averyjohnston]

Thank you, I'm able to replicate this, including with the latest version of Ionic and after updating the input to use the modern form control syntax. I'm also seeing it in core, meaning this likely happens in React and Vue as well.

It looks like it's happening with all ARIA attributes (or at least the handful I tested) -- the initial value is passed through to the native input correctly, but any future updates are not. We inherit ARIA attributes to the native input in the componentWillLoad hook, but this is only run once. It's likely this is happening in other components as well.