ionic-team/ionic-framework

bug: (regression) ionic angular standalone - button aria-label works in app but not in testing (icon-only)

AmitMY opened this issue · 1 comments

Prerequisites

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

sign/translate#177

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