[a11y] autofocus interacts poorly with ListView (and likely other scrollables) #130844
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
flutter runthe repro example below on Android, iOS, or Web (mobile or macOS).- Enable the screen reader (e.g. VoiceOver or TalkBack).
- Traverse down the list using the screen reader until you are a full page down the list (enough for the lazy-scroll infra to remove the top items, including the checkbox)
- Traverse up the list using the screen reader until the viewport reveals the checkbox.
Expected results
The screen reader should move the a11y focus ring to the next item above the last focused one.
Actual results
As soon as the checkbox shows up the a11y focus ring jumps all the way to the checkbox skipping all items between the last focused one and the checkbox.
I attempted to fix this in the web engine but it turns out that semantics node IDs are unstable for the same widget. When you scroll a widget out of the view then scroll it back into view, the semantic node corresponding to it changes its ID. This prevents the engine from figuring out that the node is the same logical UI element, that focus was previous requested on it, and that it shouldn't request focus on it again. Note that the input focus should indeed stay on the checkbox, because all other widgets are not focusable (they are all plain Text widgets). The issue is that SemanticsFlag.isFocused causes the a11y focus to move because the engine believes that this is a new node that's requesting focus for the first time.
Code sample
Code sample
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(const MyApp());
if (kIsWeb) {
SemanticsBinding.instance.ensureSemantics();
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Accessibility tester app',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Accessibility tester app'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: CheckboxTest(),
);
}
}
class CheckboxTest extends StatefulWidget {
const CheckboxTest({ super.key });
@override
State<CheckboxTest> createState() => _CheckboxTestState();
}
class _CheckboxTestState extends State<CheckboxTest> {
bool _value1 = false;
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Row(
children: [
Checkbox(
autofocus: true,
value: _value1,
onChanged: (bool? value) {
setState(() {
_value1 = value!;
});
},
),
const Text('A checkbox'),
],
),
...List<Widget>.generate(100, (int i) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Text('$i', style: const TextStyle(fontSize: 24)),
);
}),
],
);
}
}Screenshots or Video
No response
Logs
No response
Flutter Doctor output
Doctor output
[!] Flutter (Channel main, 3.13.0-3.0.pre.19, on macOS 13.4.1 22F82 darwin-arm64, locale en)
• Flutter version 3.13.0-3.0.pre.19 on channel main at /Users/yjbanov/code/flutter/flutter
! Upstream repository [email protected]:yjbanov/flutter.git is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to [email protected]:yjbanov/flutter.git to dismiss this error.
• Framework revision dd0b6e35f3 (6 days ago), 2023-07-12 15:27:37 -0700
• Engine revision 16e2ab7e98
• Dart version 3.1.0 (build 3.1.0-300.0.dev)
• DevTools version 2.25.0
• 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/yjbanov/Library/Android/sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.12.0
[✓] 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 with Blaze.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)
[✓] VS Code (version 1.79.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.68.0
[✓] Connected device (3 available)
• Pixel 6 Pro (mobile) • 1A051FDEE00ADZ • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.4.1 22F82 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.198
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 2 categories.