bug: (regression) ionic angular standalone - button aria-label works in app but not in testing (icon-only)
AmitMY opened this issue · 1 comments
AmitMY commented
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
v8.x
Current Behavior
I migrated from ionic angular to standalone version.
Here is some code in my app:
<ion-button
fill="clear"
color="medium"
[matMenuTriggerFor]="signedLanguagesMenu"
class="menu-icon-button"
[attr.aria-label]="'More Languages'">
<ion-icon name="chevron-down"></ion-icon>
</ion-button>
When I run the app, the outerHTML
of the ion-button
is the following, where the aria-label
is delegated to the button
element:
<ion-button _ngcontent-ng-c2591335358="" fill="clear" color="medium"
class="mat-mdc-menu-trigger menu-icon-button ng-star-inserted ion-color ion-color-medium md button button-clear ion-activatable ion-focusable"
ng-reflect-fill="clear" ng-reflect-color="medium" ng-reflect-menu="[object Object]">
<ion-icon _ngcontent-ng-c2591335358="" name="chevron-down" ng-reflect-name="chevron-down" role="img" class="md flip-rtl"></ion-icon>
</ion-button>
But in angular testing, making sure to provideIonicAngular()
and to import IonButton
, I see the following, where the aria-label
remains on the ion-button
:
<ion-button _ngcontent-a-c2591335358="" fill="clear" color="medium"
class="mat-mdc-menu-trigger menu-icon-button ng-star-inserted" ng-reflect-fill="clear"
ng-reflect-color="medium" ng-reflect-menu="[object Object]" aria-label="More Languages" aria-haspopup="menu"
aria-expanded="false">
<ion-icon _ngcontent-a-c2591335358="" name="chevron-down" ng-reflect-name="chevron-down"></ion-icon>
</ion-button>
Expected Behavior
in test time, the ion-aria
should move to the button.
Steps to Reproduce
Unfortunately, this only happens during tests.
Here's my PR: sign/translate#177
git clone https://github.com/sign/translate.git
cd translate
git fetch origin/angular19
git checkout 146b51d1cb6ccd4232ac838e612727a75df95415
npm install
npm run test:chrome
Code Reproduction URL
Ionic Info
Unclear why, it warns that I am not in an ionic project.
I am using "@ionic/angular": "8.4.0",
[WARN] You are not in an Ionic project directory. Project context may be missing.
Ionic:
Ionic CLI : 7.2.0
Utility:
cordova-res : 0.15.4
native-run : 2.0.1
System:
NodeJS : v22.0.0
npm : 10.5.1
OS : macOS Unknown
Additional Information
This is not a problem on the main branch, using Angular 18 and not using standalone components