bug: iOS 17.1+, VoiceOver does not announce text in button if text is wrapped in an another element

[dpalou]

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

After updating to iPadOS 17.1, a user reported that VoiceOver no longer reads some elements in our app. I did some tests and I was able to replicate the problem in a blank Ionic 7 app.

For example, if you create an ion-item with "button" attribute, VoiceOver no longer reads the contents of the item, it only says "button". If you set an aria-label to the item then VoiceOver correctly reads the aria-label, but having to replicate all the readable content in the aria-label for all items can be a lot of work and it will increase maintenance time.

Maybe there are other elements affected, for example using the "tabs" starter app VoiceOver doesn't read the tabs title either if you select a tab in the tab bar.

This worked properly in iPadOS 16, so I guess Apple has changed something in their algorithm and broke this (maybe it's related to shadow DOM?). I'm not sure if Ionic team can do anything to fix this or we should expect a solution from Apple, but I still wanted to open the issue to clarify this.

Expected Behavior

VoiceOver should read the elements contents as it used to.

Steps to Reproduce

1. Create a new ionic7 app, in my case I did: ionic start ionic7-voiceover-test tabs --type=angular --cordova
2. In one of the tabs template I added the following HTML:

   <ion-list>
   <ion-item button (click)="clicked()" detail="true">
     <ion-label>
       This is a clickable item
     </ion-label>
   </ion-item>
   <ion-item [button]="true" (click)="clicked()" [attr.aria-label]="'This is the aria label'">
     <ion-label>
       This is a second clickable item with aria-label
     </ion-label>
   </ion-item>
   </ion-list>

3. Run the app in an iOS device with iPadOS 17 (I guess the same will happen in iOS 17) and VoiceOver enabled.
4. Select the first item, VoiceOver will say "button" and it won't read the contents of the item. If you select the second item, VoiceOver will read the aria-label correctly.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/dpalou/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.5.3 @angular-devkit/build-angular : 16.2.9 @angular-devkit/schematics : 16.2.9 @angular/cli : 16.2.9 @ionic/angular-toolkit : 9.0.0

Cordova:

Cordova CLI : 12.0.0 (cordova-lib@12.0.1) Cordova Platforms : ios 7.0.1 Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)

Utility:

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

System:

Android SDK Tools : 26.1.1 (/Users/dpalou/Library/Android/sdk) ios-deploy : 1.12.2 ios-sim : 8.0.2 NodeJS : v16.14.2 (/Users/dpalou/.nvm/versions/node/v16.14.2/bin/node) npm : 8.5.0 OS : macOS Unknown Xcode : Xcode 15.0.1 Build version 15A507

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce this, and this does appear to be a WebKit bug. I filed a bug with Apple: https://bugs.webkit.org/show_bug.cgi?id=264410

It looks like this regressed in WebKit somewhat recently as I cannot reproduce in iOS 17.0, but I can reproduce in iOS 17.2. You mentioned this reproduces in iOS 17.1, so it's possible the behavior regressed around that time.

In addition to your aria-label workaround, you can also remove ion-label and that should avoid the bug too. I'll follow up here when the issue is resolved on Apple's side.

[liamdebeasi]

Hey there,

This was fixed by Apple, and the fix is available in iOS 17.2. I previously tested on a beta version of iOS 17.2, but it looks like the fix made it into the stable version of iOS 17.2.

[manisaga]

voiceover does not announces content of aria-label on a tag. The same works fine for android but not for ios. please help

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