Skip to content

[a11y] VoiceOver does not announce state of ButtonSegment #146987

@scopendo

Description

@scopendo

Steps to reproduce

Create a widget that shows a SegmentedButton, without any explicit use of Semantics. The example below is for a light/dark mode toggle.

class _ThemeSelector extends StatelessWidget {
  const _ThemeSelector();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Get the current theme mode...
    final themeMode = ...;

    return SegmentedButton(
      showSelectedIcon: false,
      segments: [
        ButtonSegment(
          icon: const Icon(Icons.light_mode),
          label: Text('Light mode'),
          value: ThemeMode.light,
        ),
        ButtonSegment(
          icon: const Icon(Icons.dark_mode),
          label: Text('Dark mode'.hardcoded),
          value: ThemeMode.dark,
        ),
      ],
      selected: {themeMode},
      onSelectionChanged: (selected) {
        // Set the current theme mode...
      },
    );
  }
}

Expected results

I would expect that the button segment announces that it is selected, or perhaps toggled on, without needing to wrap ButtonSegment.label in an explicit Semantics widget.

For example, given the example, it should announce "selected, light mode, button".

It is also probable that the role of a button segment is a toggle, rather than a button.

Actual results

In the example above, VoiceOver announces the button segment's label followed by "button" but without indicating when the button segment is selected, for example, "light mode, button".

Code sample

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Segmented Button Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _themeMode = ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: SegmentedButton(
          showSelectedIcon: false,
          segments: const [
            ButtonSegment(
              icon: Icon(Icons.light_mode),
              label: Text('Light mode'),
              value: ThemeMode.light,
            ),
            ButtonSegment(
              icon: Icon(Icons.dark_mode),
              label: Text('Dark mode'),
              value: ThemeMode.dark,
            ),
          ],
          selected: {_themeMode},
          onSelectionChanged: (selected) {
            setState(() {
              _themeMode = selected.first;
            });
          },
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
Doctor summary (to see all details, run flutter
doctor -v):
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.2.1 23C71 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.6)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: castawayf: material designflutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22frameworkflutter/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