Repository navigation
a11y focus problem with DropdownMenuItems and BottomNavigationBar #44077
Description
Internal: b/143551289
With a widget tree like:
Scaffold
Navigator --> DropdownButton ...
BottomNavigationBar
Open the dropdown's popup and navigate between the DropdownMenuItems.
Expected behavior: Screenreader linear navigation should take you between the DropdownMenuItems only. You should not be able to escape the popup while it is open (except maybe for the dismiss background area).
Actual behavior: The BottomNavigationBar items are reachable while the popup is open. It's like it treats the BottomNavigationBarItems as being in the same navigation plane(?) as DropdownMenuItems.
Issue is present on both iOS and Android.
Repro case:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String value = 'foo';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: Navigator(
onGenerateRoute: (_) => MaterialPageRoute(builder: bodyBuilder),
),
bottomNavigationBar: SafeArea(
child: BottomNavigationBar(
items: ['1', '2', '3']
.map((item) => BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text(item)))
.toList(),
)),
),
);
}
Widget bodyBuilder(BuildContext context) => SafeArea(
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
DropdownButton(
value: value,
items: [
DropdownMenuItem(
value: 'foo',
child: Text('Foo'),
),
DropdownMenuItem(
value: 'bar',
child: Text('Bar'),
),
DropdownMenuItem(
value: 'baz',
child: Text('Baz'),
),
],
onChanged: (String value) {
setState(() {
this.value = value;
});
},
),
MaterialButton(
child: Text('Reset'),
onPressed: () {
setState(() {
this.value = 'foo';
});
},
),
],
),
),
);
}
Activity
rymotion commentedon Nov 24, 2019
@mehmetf The possible issue here is that technically
BottomNavigationBarand the dropdown menu are on the same route and looking into line 929 indropdown.dartthe issue is that we are essentially inserting a Semantics widgets into the widget tree meaning that the your menu and its children are now in the tree with your bottomNavigationBarwhat you need to do is remove that bottomNavigationBarfrom the Semantic tree changing your example to something more suitable. Possibly like an earlier issue (I was not able to locate the specific issue) #17088 might be the closest I can find. Either way swap out the Scaffold for a Stack with a alignment to the center bottomdarshankawar commentedon Jul 10, 2020
Issue is replicable on latest dev channel. With accessibility ON and when dropdown menu items are displayed, slide to navigate between menu items which takes control to bottom navigation bar items after last menu item.
huycozy commentedon Jul 5, 2022
Hi, this issue is reproducible on the latest
stableandmasterchannels with provided sample code.It seems the issue is only reproducible on Android. On iOS, the BottomNavigationBar items are not reachable while the popup is open.
Demo
XRecorder_05072022_171114.mp4
Image.from.iOS.2.MP4
flutter doctor -v
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.2.1 21D62 darwin-x64, locale en-VN) • Flutter version 3.0.4 at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 85684f9300 (3 days ago), 2022-06-30 13:22:47 -0700 • Engine revision 6ba2af10bb • Dart version 2.17.5 • DevTools version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio • Android Studio at /Applications/Android Studio Preview.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.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.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2020.3.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.68.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.42.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.53 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category.[✓] Flutter (Channel master, 3.1.0-0.0.pre.1501, on macOS 12.2.1 21D62 darwin-x64, locale en-VN) • Flutter version 3.1.0-0.0.pre.1501 on channel master at /Users/huynq/Documents/GitHub/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 753fee42cf (89 minutes ago), 2022-07-04 22:09:02 -0400 • Engine revision 94b47cc0eb • Dart version 2.18.0 (build 2.18.0-254.0.dev) • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13E113 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [!] Android Studio • Android Studio at /Applications/Android Studio Preview.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 ✗ Unable to find bundled Java version. • Try updating or re-installing Android Studio. [✓] Android Studio (version 2021.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.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2020.3.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • 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 [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • 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 [✓] VS Code (version 1.68.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.42.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.114 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category.chunhtai commentedon Dec 12, 2024
This should be fixed after menu anchor is migrated to overlay portal
github-actions commentedon Dec 27, 2024
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.