Skip to content

[Google3 Bug]: [Accessibility] Screen reader unable to reach/interact with all items in a scrollable #173097

@joel-lim

Description

@joel-lim

Help us understand the severity of this issue

  • causing severe production issues e.g. malfunctions or data loss
  • blocking next binary release
  • blocking a client feature launch within a quarter
  • nice-to-have but does not block a launch within the next quarter

Internal bugs

b/435424954
b/435380891
b/458784407

Steps to reproduce

  1. Use Form in a scrollable view with long body (e.g. many TextFormFields)
  2. Use iOS Voiceover to try to reach all items

Expected results

Able to reach and interact with all items in the form.

Actual results

  1. (always reproducible) After navigating to an initially "off-screen" TextFormField, unable to tap on the TextFormField to edit it.
  2. (sometimes reproducible) Focus restarts from the top of the page while navigating halfway through the page, preventing reaching all items in the form.

Note: the issue only seems to occur when Form is used. Without the parent Form widget, a11y behavior works as expected.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: false),
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

  final _formKey = GlobalKey<FormState>();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title, style: TextStyle(fontFamily: 'ProductSans')),
      ),
      body: SingleChildScrollView(
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              for (var i = 0; i < 25; i++) ...[
                TextFormField(
                  decoration: InputDecoration(labelText: 'Label text $i'),
                ),
                const SizedBox(height: 50),
              ],
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration
flutter_minimal_ios_voiceover_scrollable_form.mp4

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[Paste your output here]

Metadata

Metadata

Labels

P1High-priority issues at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: googleVarious Google teamscustomer: thoughts (g3)f: focusFocus traversal, gaining or losing focusf: material designflutter/packages/flutter/material repository.f: scrollingViewports, list views, slivers, etc.found in release: 3.32Found to occur in 3.32found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-accessibilityOwned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions