Each SwitchListTile receives TAB focus two times while only one is necessary #77470
Description
Steps to Reproduce
- Run
flutter create tab. - Update the files as follows:
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _state = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SwitchListTile(
title: Text('List Tile Caption'),
value: _state,
onChanged: (bool value) {
setState(() {
_state = value;
});
},
),
Container(height: 30),
ElevatedButton(child: Text('Button'), onPressed: () {}),
],
),
),
);
}
}
- Start app in chrome
- Press Tab key several times and watch how tab focus is given first to the SwitchListTile row and then to the switch on the right and last to the button.
Expected results:
I expect that when I use TAB to navigate, I will not have to visit both the ListTileRow and the switch button. More precisely, I expect TAB to only visit the switch on the right.
Actual results:
Focus moves first to the SwitchListTile and then to the switch.
tab4.mp4
Discussion
If a UI contains multiple SwitchListTiles, I have to press TAB unnecessary many times to get past the switch list when navigating app using keyboard only (if app developer did not add and document shortcuts).
Since SwitchListTile onPressed callback do not get to know if user pressed on the list row or the switch handle, I don't see that it could break apps if this is changed so tab traversal only visit each SwitchListTile. Of course if the trailing or child has an element that can receive focus such as a button, then tab traversal would visit the ListTile more than once. But in this bug example the child is just a static Text().
Logs
Analyzing tab...
No issues found! (ran in 7.3s)
[✓] Flutter (Channel beta, 2.0.1, on Microsoft Windows [Version 10.0.19041.804], locale sv-SE)
• Flutter version 2.0.1 at C:\Users\Leif\Programmering\Libraries\flutter
• Framework revision c5a4b4029c (2 days ago), 2021-03-04 09:47:48 -0800
• Engine revision 40441def69
• Dart version 2.12.0
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\Leif\Programmering\Android\android-sdks
• Platform android-30, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[✓] Android Studio (version 4.1.0)
• Android Studio at C:\Program Files\Android\Android Studio
• 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 1.8.0_242-release-1644-b01)
[✓] VS Code, 32-bit edition (version 1.53.2)
• VS Code at C:\Program Files (x86)\Microsoft VS Code
• Flutter extension version 3.20.0
[✓] Connected device (2 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.182
• Edge (web) • edge • web-javascript • Microsoft Edge 88.0.705.81
• No issues found!