Repository navigation
[Semantics][Android]: Focus do not return to the top of the page when starting a new page #97522
Description
My application contains navigator, and when I push a new page with a button located in my bottomNavigationBar of my Scaffold and my new page also has a button in bottomNavigationBar. My focus remains on the button of the bottomNavigationBar of my new page on Android and does not automatically return to appBar like in iOS.
Steps to Reproduce
Using the following example app:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
const FirstRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Route'),
),
body: const Center(child: Text('Page One')),
bottomNavigationBar: ElevatedButton(
child: const Text('Page two'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
},
),
);
}
}
class SecondRoute extends StatelessWidget {
const SecondRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Route'),
),
body: const Center(child: Text('Page Two')),
bottomNavigationBar: ElevatedButton(
child: const Text('Page three'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const ThirdRoute()),
);
},
),
);
}
}
class ThirdRoute extends StatelessWidget {
const ThirdRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Third Route'),
),
body: const Center(child: Text('Page Three')),
bottomNavigationBar: ElevatedButton(
child: const Text('Page one'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const FirstRoute()),
);
},
),
);
}
}
- Open the above app with talkback enabled on an Android device.
- Swipe to the right to navigate to the bottom button
- Double click on my bottom button
- Notice that the talkback focus directly on the bottom button of the page two and doesn't automatically return to appBar
The same process on iOS with voiceOver working.
I tried to put a semantics widget with focused to true on appBar. As well as a focusNode, but that doesn't work.
Flutter doctor
[✓] Flutter (Channel stable, 2.8.1, on macOS 11.6 20G165 darwin-x64, locale fr-FR)
• Flutter version 2.8.1 at /usr/local/Caskroom/flutter/2.8.0/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 77d935af4d (7 weeks ago), 2021-12-16 08:37:33 -0800
• Engine revision 890a5fca2e
• Dart version 2.15.1
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/arnaud/Library/Android/sdk
• Platform android-31, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.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 11.0.8+10-b944.6916264)
[✓] VS Code (version 1.63.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.32.0
[✓] Connected device (1 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99
• No issues found!
Activity
danagbemava-nc commentedon Feb 1, 2022
Reproducible using code sample and steps in #97522 (comment) on
android.Unable to confirm
iOSbehavior at the moment. I will update this post when I'm able to.video
telegram-cloud-document-4-6035086468639100709.mp4
flutter doctor -v
goderbauer commentedon Feb 2, 2022
/cc @chunhtai
chunhtai commentedon Feb 2, 2022
Unfortunately the focus is purely managed by android talkBack, and we don't have control on how they handle it. A few observations i found is they may set the focus at the original location if the layouts of two pages are similar.
luomo-pro commentedon Feb 3, 2022
hi
@chunhtai
In #93926, I tested that the native software talk back is able to remember the focus position accurately, only in flutter it is not.
If you use iOS, you can use VoiceOver's scrub gesture to remember the focus position accurately in the native software.
So I feel it should still be a problem with flutter, please try to see if there is a way to fix it. I talk about the importance of this issue for blind users in detail in #93926, it is important.
luomo-pro commentedon Feb 3, 2022
@chunhtai
If flutter's UI cannot support talk back to automatically remember focus.
Then is it possible to try to solve #94523 by providing an API to manually get as well as set accessibility focus, so that developers can manually support focus memory?
jscti commentedon Feb 3, 2022
+1 for the reopening of this
chunhtai commentedon Feb 3, 2022
There is #94523 to better manage the focus in Flutter. If that is done, Flutter should remember the focus on a visited page in both iOS and Android more accurately, and programmatically adjust the focus.
github-actions commentedon Feb 17, 2022
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.