Repository navigation
Web Accessibility: When screen reader is turned ON, accessibility focus is lost after navigating to detail screen #122876
Description
Steps to Reproduce
- Execute
flutter runon the code sample - Turn on Voiceover on macOS
- Navigate to the
Go to detail screenbutton using voiceover commands - Click on the button and then the user is navigated to the detail screen and hence the focus is lost.
Expected results: Focus should either come on the text in AppBar or the text displayed on the screen
Actual results: When the screen reader is turned ON, the screen reader focus is lost after navigating to the detail screen and the user has to go out of the web area and then get back again to get focus
Code sample
/// main.dart
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'detail_screen.dart';
void main() {
runApp(const MyApp());
/// Enable Accessibility by default on Web
RendererBinding.instance.setSemanticsEnabled(true);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Web Screen Reader Issue Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
// body: const MyCustomForm(),
body: const MyHomePage(title: 'Semantics Demo'),
),
routes: {
'/detail-screen': (context) => const MyDetailScreen(),
},
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// Side Menu
Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(height: 20),
const SizedBox(
height: 50,
child: Text(
'Side Menu',
style: TextStyle(fontSize: 18),
),
),
SizedBox(
height: 50,
child: InkWell(
child: const Text('Home Screen'),
onTap: () {},
),
),
SizedBox(
height: 50,
child: InkWell(
child: const Text('Products'),
onTap: () {},
),
),
SizedBox(
height: 50,
child: InkWell(
child: const Text('Home Screen'),
onTap: () {},
),
),
SizedBox(
height: 50,
child: InkWell(
child: const Text('Categories'),
onTap: () {},
),
),
SizedBox(
height: 50,
child: InkWell(
child: const Text('Cart'),
onTap: () {},
),
),
],
),
),
/// Navigate to another (child) screen
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 30),
child: Column(
children: [
const Text(
'Navigate to detail screen',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
),
),
const Text(
"When screen readers are activated and user tries to navigate to it's detail screen or it's child screen, the focus doesn't come on screen",
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.of(context).pushNamed(
MyDetailScreen.routerName,
);
},
child: const Text('Go to detail screen'),
),
],
),
),
),
],
),
);
}
}
/// detail_screen.dart
import 'package:flutter/material.dart';
class MyDetailScreen extends StatelessWidget {
static const routerName = '/detail-screen';
const MyDetailScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Detail screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text('I am detail screen'),
const SizedBox(height: 50),
ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Go back to Parent screen'),
),
],
),
),
);
}
}
Logs
[✓] Flutter (Channel stable, 3.7.5, on macOS 13.2.1 22D68 darwin-x64, locale
en-IN)
• Flutter version 3.7.5 on channel stable at
/Volumes/data/development/sdks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c07f788888 (3 weeks ago), 2023-02-22 17:52:33 -0600
• Engine revision 0f359063c4
• Dart version 2.19.2
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version
33.0.0-rc1)
• Android SDK at /Users/akashav/Library/Android/sdk
• Platform android-33, build-tools 33.0.0-rc1
• ANDROID_HOME = /Users/akashav/Library/Android/sdk
• Java binary at:
/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home/bin/jav
a
• Java version OpenJDK Runtime Environment (AdoptOpenJDK)(build
1.8.0_292-b10)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• 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
• Try updating or re-installing Android Studio.
[✓] VS Code (version 1.76.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0
[✓] Connected device (3 available)
• RMX3031 (mobile) • GQBQLJ4XNRJNN7KJ • android-arm64 • Android 11 (API 30)
• macOS (desktop) • macos • darwin-x64 • macOS 13.2.1 22D68 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.64
[✓] HTTP Host Availability
• All required HTTP hosts are available
[✓] No issues found!
Accessibility.Focus.Issue.mov
Reacted by Sinan Yasargil
Activity
darshankawar commentedon Mar 17, 2023
Thanks for the report. Using latest versions, I am able to replicate the reported behavior. Although this could be related / similar to #118397
stable, master flutter doctor -v
[web] Skip non-focusable containers in Focusable.focusAsRouteDefault (f…
[web] Skip non-focusable containers in Focusable.focusAsRouteDefault (f…