Skip to content

[ally][iOS] : ModalBottomSheet's DragHandle missing semantic information #161430

@Wasmund1

Description

@Wasmund1

When using a screeneader you can tap on the DragHandle of ModalBottomSheet to dismiss it. iOS VoiceOver will only read 'dismiss' and provide no indication that this is a clickable element. (On Android TalkBack will say 'Dismiss, Double-Tap to activate'). Since, when navigating with a screenreader the DragHandle is tappable, it should be semantically indicated as a button.

Steps to reproduce:

  1. run this:
 import 'package:flutter/material.dart';

/// Flutter code sample for [showModalBottomSheet].
///   showDragHandle: true was added by author of the issue

void main() => runApp(const BottomSheetApp());

class BottomSheetApp extends StatelessWidget {
  const BottomSheetApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorSchemeSeed: const Color(0xff6750a4),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

class BottomSheetExample extends StatelessWidget {
  const BottomSheetExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            showDragHandle: true,
            context: context,
            builder: (BuildContext context) {
              return SizedBox(
                height: 200,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}
  1. Use iOS VoiceOver
  2. Open ModalBottomSheet
  3. Move semantic focus to the DragHandle -> No indication that this is a clickable element

Screenshot_modalBottomSheet

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)found in release: 3.27Found to occur in 3.27found in release: 3.28Found to occur in 3.28good first issueRelatively approachable for first-time contributorshas reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyplatform-macBuilding on or for macOS 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)triaged-accessibilityTriaged by Framework Accessibility team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions