bug: item and card buttons should inherit aria-label attribute

[DeyBo]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Hi !

I saw that there are already some components that reflect aria-label property on their native element (i.e. ion-button).
In my case, I use ion-card and ion-item. Sometimes, I set button to true for these, but my custom aria-label is not extended to native button.

Expected Behavior

I wanted to know if it is possible to use aria-label with another way ?
Or maybe make it possible to extend aria-label to native button when ion-item and ion-card has button to true ?

Steps to Reproduce

To see it, you can use ion-item or ion-card with button property to true. Set a custom aria-label to your ion-item or ion-card and check accessibility name.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 6.0.9
@angular-devkit/build-angular : 13.3.9
@angular-devkit/schematics : 12.2.15
@angular/cli : 13.1.4
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7

Utility:

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

System:

NodeJS : v16.15.1 (/usr/local/bin/node)
npm : 8.12.1
OS : macOS Monterey

Additional Information

Thanks and sorry for my medium english !

[sean-perkins]

Hello @DeyBo! Can you try with this dev-build and let me know if you run into any issues?

npm install @ionic/[email protected]

In this build any aria-label specified on the host of ion-item or ion-card when using button, will be reflected to the inner button.

[DeyBo]

Hello @sean-perkins !

It seams that it's adding "arialabel" and not "aria-label" so it doesn't work properly for web accessibility.

There is some screenshots of Firefox Devtools to illustrate !

What it does :
DOM view

Accessibility view

What it should do :
DOM view

Accessibility view

Thank you very much for your time !

[sean-perkins]

@DeyBo thanks for testing and confirming that problem. It would definitely help if I had assigned to the correct key!

Here is an updated dev-build that assigns to aria-label, not ariaLabel.

npm install @ionic/[email protected] 

[DeyBo]

Thank you very much @sean-perkins !
It's working very well !

[sean-perkins]

This will be available in the next patch release of Ionic.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.