Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
AmitMY opened this issue Nov 27, 2024 · 1 comment
Labels

Comments

@AmitMY
Copy link
Contributor

AmitMY commented Nov 27, 2024

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

@ionitron-bot ionitron-bot bot added the triage label Nov 27, 2024
@AmitMY AmitMY changed the title bug: ionic angular standalone - button aria-label works in app but not in testing bug: (regression) ionic angular standalone - button aria-label works in app but not in testing Nov 29, 2024
@AmitMY AmitMY changed the title bug: (regression) ionic angular standalone - button aria-label works in app but not in testing bug: (regression) ionic angular standalone - button aria-label works in app but not in testing (icon-only) Dec 5, 2024
@AmitMY
Copy link
Contributor Author

AmitMY commented Dec 9, 2024

(this is still an issue, i have put around 5 hours of my time to test different ways, but it seems to be a bug in ionic)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant