-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Labels
P2Important issues not at the top of the work listImportant issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Accessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: castawayf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22Found to occur in 3.22frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-accessibilityOwned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)Owned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)
Description
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 listImportant issues not at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)Accessibility, e.g. VoiceOver or TalkBack. (aka a11y)customer: castawayf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.19Found to occur in 3.19Found to occur in 3.19found in release: 3.22Found to occur in 3.22Found to occur in 3.22frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyiOS applications specificallyr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-accessibilityOwned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)Owned by Framework Accessibility team (i.e. responsible for accessibility code in flutter/flutter)
Type
Projects
Status
Done