Skip to content

Show menu announces an extra VoiceOver item #56850

@mehmetf

Description

@mehmetf

b/154075528

In iOS, the usage of PopupMenuItem and some basic iOS overlay introduces an extra VoiceOver announcement for the Semantic label of the underlying page.

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Semantics(
        namesRoute: true,
        scopesRoute: true,
        explicitChildNodes: true,
        label: 'My awesome test!',
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final button = FlatButton(
      onPressed: () async {
        ImagePicker.pickImage(source: ImageSource.gallery);
      },
      child: Text('Pick Image'),
    );
    return Scaffold(
      appBar: AppBar(
          title: Text(widget.title),
          actions: [
            PopupMenuButton<FlatButton>(
              onSelected: (value) {
                value.onPressed();
              },
              itemBuilder: (context) {
                return [
                  PopupMenuItem(
                    value: button,
                    child: button.child,
                  )
                ];
              },
            ),
          ]),
      body: Center(
        child: Text(
          'Button tapped $_counter time${_counter == 1 ? '' : 's'}.',
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

I used the image picker plugin here and replaced the view controller it launches with this:

  if ([@"pickImage" isEqualToString:call.method]) {
    UIViewController *controller = [[UIViewController alloc] initWithNibName:nil bundle:nil];
    UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:controller];
    navController.navigationBarHidden = NO;
    [_viewController presentViewController:navController animated:YES completion:nil];

Steps:

  1. Launch App.
  2. Turn on VoiceOver.
  3. Navigate and open the overflow menu in the title.
  4. Tap on Pick Image.
  5. Notice that when the view controller opens, app announces: "My awesome test!".

Expected behavior:
It should not announce My awesome test.

Metadata

Metadata

Assignees

Labels

P0Critical issues such as a build break or regressiona: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: money (g3)engineflutter/engine related. See also e: labels.f: material designflutter/packages/flutter/material repository.f: routesNavigator, Router, and related APIs.frameworkflutter/packages/flutter repository. See also f: labels.platform-iosiOS applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions