Slider does not show changed label value for keyboard users #152884
Description
Steps to reproduce
- Create a simple Slider widget (using the Slider sample code from documentation: https://api.flutter.dev/flutter/material/Slider-class.html)
- Focus on the slider by tabbing to it
- Click up, down, left, or right arrow key to change current value
- Notice that the value indicator label is not shown when value changes
Expected results
The value indicator label should be shown to the user using arrow keys when its value is changed just like it is shown for drag and click actions.
This creates an accessibility issue for users that don't use a screen reader or mouse and only use the keyboard to traverse the website. Since drag and click actions can only be accomplished by a mouse, keyboard users do not have a way of knowing what the current value of the slider is when it's changed using arrow keys.
Actual results
Value indicator label is not shown for users that change the current value using arrow keys.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for [Slider].
void main() => runApp(const SliderApp());
class SliderApp extends StatelessWidget {
const SliderApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: SliderExample(),
);
}
}
class SliderExample extends StatefulWidget {
const SliderExample({super.key});
@override
State<SliderExample> createState() => _SliderExampleState();
}
class _SliderExampleState extends State<SliderExample> {
double _currentSliderValue = 20;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Slider')),
body: Slider(
value: _currentSliderValue,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Screen.recording.2024-08-05.12.16.24.PM.webm
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[!] Flutter (Channel [user-branch], 3.24.0-1.0.pre.280, on Debian GNU/Linux rodete 6.6.15-2rodete2-amd64, locale
en_US.UTF-8)
! Flutter version 3.24.0-1.0.pre.280 on channel [user-branch] at /usr/local/google/home/denisbowen/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
! Upstream repository https://github.com/DBowen33/flutter.git is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to https://github.com/DBowen33/flutter.git to dismiss this error.
• Framework revision 993593818f (13 days ago), 2024-07-23 16:43:20 +0000
• Engine revision 74737820a8
• Dart version 3.6.0 (build 3.6.0-78.0.dev)
• DevTools version 2.37.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to
perform update checks and upgrades.
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /usr/local/google/home/denisbowen/Android/Sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/linux-android-setup for more details.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✗] Linux toolchain - develop for Linux desktop
• Debian clang version 16.0.6 (26)
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from
https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
✗ pkg-config is required for Linux development.
It is likely available from your distribution (e.g.: apt install pkg-config), or can be downloaded from
https://www.freedesktop.org/wiki/Software/pkg-config/
[✓] Android Studio (version 2023.2)
• Android Studio at /opt/android-studio-with-blaze-2023.2
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.87.1)
• VS Code at /usr/share/code
• Flutter extension version 3.92.0
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux rodete 6.6.15-2rodete2-amd64
• Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.88
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 3 categories.