bug: Aria attributes are not reflected to ion-item in Vue

[pablo7798]

    @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] 

Originally posted by @sean-perkins in #25885 (comment)

Hi @sean-perkins,

Im using "@ionic/vue": "^6.4.1", and still having the problem with aria-label on ion-item elements. Does this fix included on the vue version?

Thank you.

[ionitron-bot]

Thanks for the issue! This issue has been labeled as holiday triage. With the winter holidays quickly approaching, much of the Ionic Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues are properly triaged and that new PRs are reviewed. In the meantime, please read our Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly. Thank you!

[sean-perkins]

Hello @pablo7798 thanks for reporting this issue.

I've confirmed that there is an issue with our @ionic/vue component wrappers, where reflected aria attributes are not available properties to assign.

For example, this should be valid usage:

<ion-item aria-label="Hello world">
 
</ion-item>

We will capture this as a bug and prioritize in the backlog.

[pablo7798]

Hello @pablo7798 thanks for reporting this issue.

I've confirmed that there is an issue with our @ionic/vue component wrappers, where reflected aria attributes are not available properties to assign.

For example, this should be valid usage:

<ion-item aria-label="Hello world">
 
</ion-item>

We will capture this as a bug and prioritize in the backlog.

Thank you @sean-perkins.

I was trying to use it like you say but never worked :(

[sean-perkins]

Hello @pablo7798 can you test with this dev-build and let me know if you run into any issues?

npm install @ionic/[email protected] @ionic/[email protected]

This is based on updates to the framework wrappers: ionic-team/stencil-ds-output-targets#316

[pablo7798]

Hello @pablo7798 can you test with this dev-build and let me know if you run into any issues?

npm install @ionic/[email protected] @ionic/[email protected]

This is based on updates to the framework wrappers: ionic-team/stencil-ds-output-targets#316

Hello @sean-perkins,

I have tested this build but the problem still there. I will try to explain it better:

In my case, the ion-item is transformed to a button, and there is where i want to put the aria-label attibute.

First, a capture of the original code fragment:

And here, the generated code:

I hope it's clearer, i am trying to make my site more accesible :)

[sean-perkins]

Thank you for testing that dev-build and providing extra context @pablo7798!

Here is an updated version to test with:

npm install @ionic/[email protected]

This should reflect the aria-label for both simple ion-item usages and when the ion-item is rendered as a button/clickable target. I've tested locally for both scenarios.

When installing the new version, I'd recommend deleting the node_modules/.cache/ directory, if it exists locally.

[pablo7798]

Solved now! So thankful!

I have diferent problem with the ion-accordion, it generates a duplicated role attributes and dont provide aria-labels:

The code fragment is the same than on my last post, and here is the problem (green color, yellow ones are correct)

This might be on another thread, tell me if you prefer to start another one.

[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.