Skip to content

A11y of nested Navigator seems broken #55758

New issue
New issue
Open
Open
A11y of nested Navigator seems broken#55758
Labels
P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: money (g3)found in release: 3.3Found to occur in 3.3found in release: 3.6Found to occur in 3.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

Description

@mehmetf
mehmetf
opened on Apr 27, 2020

b/155104967

When putting a Navigator in a Row/Column, it seems that the semantics nodes that come before the Navigator are not collected. See:

Semantics(
  explicitChildNodes: true,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Expanded(child: Text('1')),
      Expanded(
        child: Navigator(
          initialRoute: '/',
          onGenerateRoute: (_) =>
              PageRouteBuilder(pageBuilder: (_, __, ___) => Text('2')),
        ),
      ),
      Expanded(child: Text('3')),
    ],
  ),
);

This looks like the following in SemanticDebugger. I would have expected Row 1 to be rendered as well.

image

Activity

  1. mehmetf
    added
    a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)
    f: routesNavigator, Router, and related APIs.
    customer: money (g3)
    severe: customer critical
    on Apr 27, 2020

  2. goderbauer commented on Apr 28, 2020

    @goderbauer
    goderbauer
    on Apr 28, 2020
    Member

    @mehmetf Can you provide a print-out of the semantics tree (debugDumpSemanticsTree or pressing S during flutter run) - that will give us more information whether the node is actually in there or not.

  3. goderbauer
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    and removed
    f: routesNavigator, Router, and related APIs.
    on Apr 28, 2020

  4. goderbauer commented on Apr 29, 2020

    @goderbauer
    goderbauer
    on Apr 29, 2020
    Member

    I can reproduce the problem. It is not the the nested Navigator that's causing the issue, but the PageRouteBuilder, which internally builds a ModalBarrier to block interaction with all Routes below it. The ModalBarrier includes a BlockSemantics [1] widget, which drops the semantics of all widgets within the same semantics container that where painted before it. In this example, Text('1') and the Navigator with that ModalBarrier and the BlockSemantics widget end up in the same container, so the semantics of Text('1') are dropped. You can work around this by introducing an explicit Semantics container around the Navigator:

    import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Semantics(
        explicitChildNodes: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(child: Text('1')),
            Expanded(
              child: Semantics(   // NEW
                container: true,    // NEW
                child: Navigator(
                  initialRoute: '/',
                  onGenerateRoute: (_) =>
                      PageRouteBuilder(pageBuilder: (_, __, ___) => Text('2')),
                ),
              ),
            ),
            Expanded(child: Text('3')),
          ],
        ),
      ),
    ),
  );
}

    We should probably just make the Navigator always add that semantics container since there should never be any reason for the Navigator to contribute any semantics to its surroundings.

    [1] https://master-api.flutter.dev/flutter/widgets/BlockSemantics-class.html

  5. goderbauer
    self-assigned this
    on Apr 29, 2020
  6. goderbauer
    removed
    severe: customer critical
    on May 5, 2020

  7. goderbauer commented on May 5, 2020

    @goderbauer
    goderbauer
    on May 5, 2020
    Member

    De-prioritized internally since there is a work-around.

  8. goderbauer
    removed their assignment
    on Aug 4, 2020
  9. goderbauer
    added
    P2Important issues not at the top of the work list
    on Aug 4, 2020

  10. TahaTesser commented on Sep 18, 2020

    @TahaTesser
    TahaTesser
    on Sep 18, 2020
    Contributor
    code sample 
    import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Semantics(
          explicitChildNodes: true,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(child: Text('1')),
              Expanded(
                child: Navigator(
                  initialRoute: '/',
                  onGenerateRoute: (_) =>
                      PageRouteBuilder(pageBuilder: (_, __, ___) => Text('2')),
                ),
              ),
              Expanded(child: Text('3')),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel master, 1.22.0-10.0.pre.251, on Mac OS X 10.15.6 19G2021
    x86_64, locale en-GB)
    • Flutter version 1.22.0-10.0.pre.251 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision d26268bb9e (13 hours ago), 2020-09-18 09:06:26 +0900
    • Engine revision 2abe69c608
    • Dart version 2.10.0 (build 2.10.0-136.0.dev)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 49.0.2
    • Dart plugin version 193.7547
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.49.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.14.1

[✓] Connected device (3 available)
    • macOS (desktop)  • macos      • darwin-x64     • Mac OS X 10.15.6 19G2021
      x86_64
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome
      85.0.4183.102

• No issues found!
  11. TahaTesser
    added
    found in release: 1.22Found to occur in 1.22
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Sep 18, 2020

  12. huycozy commented on Nov 18, 2022

    @huycozy
    huycozy
    on Nov 18, 2022
    Member

    This issue is reproducible on the latest stable and master channels with sample code at #55758 (comment).

    The workaround at #55758 (comment) works as expected.

    flutter doctor -v (stable and master) 
    [✓] Flutter (Channel stable, 3.3.8, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.3.8 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 52b3dc25f6 (23 hours ago), 2022-11-09 12:09:26 +0800
    • Engine revision 857bd6b74c
    • Dart version 2.18.4
    • 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.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] 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.73.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.52.0

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • 332079AF-E895-4685-910E-7B1E18B0C6B8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

    [!] Flutter (Channel master, 3.6.0-5.0.pre.25, on macOS 13.0 22A380 darwin-x64, locale en-VN)
    • Flutter version 3.6.0-5.0.pre.25 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5487a7debf (21 minutes ago), 2022-11-17 22:23:12 -0500
    • Engine revision 39f546585b
    • Dart version 2.19.0 (build 2.19.0-406.0.dev)
    • DevTools version 2.19.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 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.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 70.0.5
    • Dart plugin version 222.4167.21

[✓] 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.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.52.0

[✓] Connected device (4 available)
    • SM T225 (mobile) • R9JT3004VRJ                              • android-arm64  • Android 12 (API 31)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7 19H12
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 13.0 22A380 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 107.0.5304.110

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
  13. huycozy
    added
    found in release: 3.3Found to occur in 3.3
    found in release: 3.6Found to occur in 3.6
    and removed
    found in release: 1.22Found to occur in 1.22
    on Nov 18, 2022
  14. flutter-triage-bot
    added
    team-frameworkOwned by Framework team
    triaged-frameworkTriaged by Framework team
    on Jul 8, 2023
  15. auto-submit
    added a commit that references this issue on Sep 22, 2026

    [go_router] Fix ShellRoute chrome dropped from semantics tree by Moda…

    63ee971
  16. vashworth
    added a commit that references this issue on Sep 24, 2026

    [go_router] Fix ShellRoute chrome dropped from semantics tree by Moda…

    5634aa2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: money (g3)found in release: 3.3Found to occur in 3.3found in release: 3.6Found to occur in 3.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-frameworkOwned by Framework teamtriaged-frameworkTriaged by Framework team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions