a11y ListTile focusability on Android

Turns out, telling Android which nodes should be focusable (as we do in flutter-team-archive/engine#4067) is not enough to convince Android that a node should be focusable.

Example of broken focusability:

              new ListTile(
                onTap: () {
                  print('The ListTile was tapped!');
                },
                trailing: new IconButton(
                  icon: new Icon(Icons.volume_up),
                  onPressed: () {
                    print('The icon was pressed!');
                  },
                ),
              ),

Expectation here is that you can focus the ListTile itself (to trigger the first print) and the encapsulated IconButton (to trigger the second print). However, Android thinks that only the IconButton is focus-worthy even though both nodes are marked as focusable in Android's accessibility tree :

09-13 14:45:43.796 15099 15099 V TreeDebug:               (31061)185Flutter:(0, 280 - 1440, 476):AC:focusable:clickable
09-13 14:45:43.796 15099 15099 V TreeDebug:                 (31092)185Flutter:(1216, 294 - 1384, 462):aC:focusable:clickable

Why's that? Well, Android uses a complicated algorithm to determine if a node should actually be focusable or not (see flow chart on https://code.facebook.com/posts/391276077927020/android-accessibility-debugging-with-stetho/).

Not sure how much of an issue this is. In this particular example its unlikely that in the real world ListTile would not provide a semantics label (which according to the flow chart) would make it focusable. Maybe there are other edge cases that will not resolve that easily?

Manual roll of engine 7ea9884...5b94c8a (#40275)

Roll engine from 7ea9884..3c6383f (77 commits 🔥) (#40372)

Roll engine to 6e6de94

Roll engine to 6e6de94 (#40394)

Roll engine 7ea9884..1b63444 (91 commits 🔥🔥🔥) (#40442)

Manual roll of engine 7ea9884...5b94c8a (flutter#40275)

Roll engine from 7ea9884..3c6383f (77 commits 🔥) (flutter#40372)

I'm checking this issue on Android (Realme 6, Android 11) with below sample code (enabled TalkBack as well). I see the tile and trailing widget can be focused as below demo video:

Demo

Record_2024-01-18-17-18-18_1031d4194104be7ece83c8b64b53eb6d.mp4

Sample code

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: const MyApp(),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
        surfaceTintColor: Colors.yellow,
      ),
      body: Center(
        child: ListView.builder(
          itemCount: 10000,
          // itemExtent: 50,

          // itemExtentBuilder: (index, dimensions) => index % 2 == 0 ? 50 : 100,

          // prototypeItem: Container(
          //   color: Colors.amber,
          //   height: 50,
          //   child: const Text('Hello'),
          // ),
          itemBuilder: (context, index) {
            if (index % 2 == 0) return const Divider();
            return ListTile(
              title: Container(
                margin: const EdgeInsets.symmetric(vertical: 8),
                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
                child: Text('Hello $index'),
              ),
              leading: const Icon(Icons.ac_unit),
              onTap: () {
                print('The ListTile was tapped!');
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('The ListTile was pressed at $index')));
              },
              trailing: IconButton(
                icon: const Icon(Icons.volume_up),
                onPressed: () {
                  print('The icon was pressed!');
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('The icon was pressed at $index')));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.16.8, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.16.8 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (27 hours ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 120.0.6099.234

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.19.0-7.0.pre.19, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.0-7.0.pre.19 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 00032569a1 (23 minutes ago), 2024-01-17 18:53:33 -0800
    • Engine revision 73a2de5da5
    • Dart version 3.4.0 (build 3.4.0-24.0.dev)
    • DevTools version 2.31.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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 120.0.6099.234

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

I wonder if I missed something to check or if this is fixed on the latest Flutter channel (I'm checking this on Flutter master channel). Could you please confirm this?

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

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 -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

a11y ListTile focusability on Android #12080

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

a11y ListTile focusability on Android #12080

Description

Activity

3 remaining items

huycozy commented on Jan 18, 2024

github-actions commented on Feb 8, 2024

github-actions commented on Feb 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions