Skip to content

A11y: Dropdowns have accessibility focus issues #40101

@andywolff

Description

@andywolff

Internal: b/140831334

If you have a dropdown (DropdownButton and DropdownMenuItems) below a Navigator in a MaterialApp, it breaks the screenreader focus behavior.

The problem is that when you activate the dropdown button, focus gets lost instead of going to the selected item in the popup. Sometimes it works properly the first time you open the popup, but not subsequent times. One strange thing I noticed (TalkBack only) was that if you navigate backwards three times in this state, it will successfully focus on the last element, but navigating forwards from this state never focuses on anything. Also, when you select an item and the popup closes, focus gets lost instead of returning to the button.

If the dropdown does not have a Navigator in its ancestry, it doesn't have this problem.

Our app does have a page where the dropdown focus works correctly even though it has a Navigator in the tree above the dropdown. This gives me hope that there may be some kind of workaround for the issue. However, I haven't been able to isolate what makes this different from the repro case below because the app's tree has many layers.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Navigator(
        onGenerateRoute: (_) {
          return MaterialPageRoute(
            builder: (context) {
              return Scaffold(
                body: SafeArea(
                  child: DropdownButton(
                    value: "foo",
                    items: [
                      DropdownMenuItem(value: "foo", child: Text("Foo"),),
                      DropdownMenuItem(value: "bar", child: Text("Bar"),),
                    ],
                    onChanged: (_) {},
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Tested on both Android and iOS. Issue is present on both.

Metadata

Metadata

Assignees

Labels

a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)f: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions