bug: (regression) ionic angular standalone - button aria-label doesn't work when icon-only

[AmitMY]

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

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

[AmitMY]

(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)

[AmitMY]

Lighthouse also complains:

[Zac-Smucker-Bryan]

Hello @AmitMY - I have looked into your issue and think there are a few things going on with your project setup that would address the issues you identified:

1. For the warning You are not in an Ionic project directory. Project context may be missing.I believe that is because you are missing the project configuration file. If you run ionic init (https://ionicframework.com/docs/cli/commands/init) it should fix the issue, or else, you can manually create the file.
2. Some of your components’ spec.ts files include provideIonicAngular() per the documentation on using ng components and some don't. That should help some errors go away if you want to delay until the native button is there with await fixture.whenStable() but other component errors are surfaced as a result. There appear to be 4 instances where this was missing and potentially needed:

• src/app/components/speech-to-text/speech-to-text.component.spec.ts
• src/app/pages/not-found/not-found.component.spec.ts
• src/app/pages/settings/settings-voice-output/settings-voice-output.component.spec.ts
• src/app/pages/main.component.spec.ts

3. In terms of the accessibility tests failing, here are 2 fixes that seemed to work when a test failed as currently written:

• Adding a role to ion-button of something like role=”button”, which is what worked for language-selector or, what I would recommend…
• In many cases, there was an ion-icon nested inside the ion-button. Assuming they are decorative, adding aria-hidden=“true” to the icons removes the accessibility violation, even though the error is about the button specifically. Marking the icon in this way, per Ionic’s documentation (aria-hidden="true" if decorative) resolves the issue.

I would take a look at this for the following components:

• SpokenLanguageInputComponent
• SpeechToTextComponent
• LanguageSelectorsComponent
• LanguageSelectorComponent

4. In investigating the issue, though the fixes above will make your tests pass, I think that your current tests aren't testing the native button due to a hydration issue. Right now, before making any markup changes, the tests failing say aria-label attribute cannot be used on a ion-button with no valid role attribute. However, waiting for the button to fully hydrate would cause the violation to change to Violation found at $('ion-icon') ... [role="img"] elements must have alternative text (role-img-alt)[ https://dequeuniversity.com/rules/axe/4.12/role-img-alt?application=axeAPI] (https://dequeuniversity.com/rules/axe/4.12/role-img-alt?application=axeAPI) because without either a button role assigned, or ion-icon having aria-hidden="true", it would seem the img role is assigned to ion-icon, then flagged.

The jasmine-axe tests are trying to test the native element, not ion-button, using Angular's ComponentFixture and awaiting fixture.nativeElement. When I console log if the shadowDom is present after something like await customElements.whenDefined('ion-button'); , I don't see it present. Some tests incorrectly pass without waiting for the shadowDOM. To actually fully test this, in addition to the markup and project set up things already mentioned is to add import { componentOnReady } from '@ionic/core'; to your imports and add await new Promise<void>((resolve) => {componentOnReady(ionButton, () => resolve());}); to the test. Doing this catches the tests that are passing when the markup is not correct/to spec and changes the accessibility flag in the tests. I have attached my example for your speech to text component.

Speech To Text Example.rtf

Let us know if the above helps with the tests passing and testing what you want to test.

[AmitMY]

thanks! this is a legacy project, so i can't really follow up. should have closed earlier