[a11y] VoiceOver focus doesn't work well when there's a semantic overlap #131780
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
Hi !
In the video showing the bug, I have 2 RawApplePayButtons which are supposed to open a bottomSheet when onPressed is triggered.
The first Apple Pay button is used "conventionally", i.e. there are no other Semantics wrapped around it, so the widget works fine.
The second button is wrapped by a SizedBox(), itself wrapped by a Semantics(). When the RawApplePayButton is tapped, the callback is not triggered.
However, as you can see in the video, if I focus on my SizedBox() and click on it, the onPressed on my RawApplePayButton is called, which shouldn't be the case.
In my Apple Pay button KO, the focus seems to be directly on the PKPaymentButton and so Flutter's onPressed callback isn't triggered.
The bug seems to be only from iOS 16.5 onwards, and only when voice is used. (I tested on iPhone 14 pro on 16.5.1)
I've already opened an issue on the google-pay github but they told me that their library used the standard apple pay button behavior.
If you want to reproduce you can take the code sample and install the pay package
Expected results
onPressed on the ApplePay button is triggered when it is tapped while the VoiceOver focus is on it.
Actual results
onPressed on the ApplePay button is triggered while VoiceOver focus is on the parent (Container).
Code sample
Code sample
class ApplePayIssue extends StatefulWidget {
const ApplePayIssue({super.key});
@override
State<ApplePayIssue> createState() => _ApplePayIssueState();
}
class _ApplePayIssueState extends State<ApplePayIssue> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("apple pay button OK"),
RawApplePayButton(
style: ApplePayButtonStyle.black,
type: ApplePayButtonType.plain,
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
return const SizedBox(
height: 200,
child: Text("apple pay modal OK"),
);
});
},
),
const SizedBox(
height: 50,
),
const Text("apple pay button KO"),
Semantics(
label: "paiement card",
excludeSemantics: false,
explicitChildNodes: true,
child: Container(
color: Colors.red,
padding: const EdgeInsets.all(10),
child: RawApplePayButton(
style: ApplePayButtonStyle.black,
type: ApplePayButtonType.plain,
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
return const SizedBox(
height: 200,
child: Text("apple pay modal OK"),
);
});
},
),
),
),
],
),
));
}
}Screenshots or Video
Screenshots / Video demonstration
255897347-d4e4c3b3-5eeb-49f2-a911-97e60ec2701e.mov
Logs
No response
Flutter Doctor output
Doctor output
[!] Flutter (Channel stable, 3.7.12, on macOS 13.4 22F66 darwin-arm64, locale fr-FR)
• Flutter version 3.7.12 on channel stable at /Users/romain_greaume/fvm/versions/3.7.12
! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/3.0.7/libexec/bin/dart, which is not inside your current Flutter SDK checkout at
/Users/romain_greaume/fvm/versions/3.7.12. Consider adding /Users/romain_greaume/fvm/versions/3.7.12/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (4 months ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/romain_greaume/Library/Android/sdk
• Platform android-33, build-tools 33.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.4)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 73.1.1
• Dart plugin version 231.9065
[✓] VS Code (version 1.80.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.70.0
[✓] Connected device (3 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33) (emulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.4 22F66 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.114
[✓] HTTP Host Availability
• All required HTTP hosts are available
```
</details>