bug: ion-refresher-content, should be able to set aria-label, title or aria-labelledby

[stianmorsund]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

This got my attention due to a failing accessibility test using @axe-core/playwright. So the issue that gets warned about is that progressbars should have accessible labels: https://dequeuniversity.com/rules/axe/4.8/aria-progressbar-name?application=playwright

There appears to be no way to set an accessible label when using the ion-refresher, like so

<ion-content>
    <ion-refresher slot="fixed" (ionRefresh)="refresh()">
      <ion-refresher-content  />
    </ion-refresher>
 </ion-content>

Expected Behavior

Expect to be able to set a title, aria-label or aria-labelledby as recommended here https://ionicframework.com/docs/api/refresher

Steps to Reproduce

Just see any of the demos here https://ionicframework.com/docs/api/refresher and observe that the spinners don't have an accessible name

Code Reproduction URL

No response

Ionic Info

"@ionic/angular": "7.6.6",

Additional Information

No response

[thetaPC]

@stianmorsund Thank you for the issue!

I have verified that this causes a failing status when it comes to web accessibility.

Are you wanting to customize the text that is passed to aria-label,title or aria-labelledby?

[stianmorsund]

@thetaPC Thanks for having a look :) Being able to customize the text would be great, then we can also support translations.

[thetaPC]

@stianmorsund that makes sense. The team will look into this. Thank you again for submitting the issue!