Skip to content

Accessibility is broken on the Slider widget #101868

@madelinef

Description

@madelinef

Steps to Reproduce

  1. Execute flutter run on the code sample on an Android device
  2. Turn on the TalkBack screen reader.
  3. Change the slider value by entering the slider, then swiping up or down anywhere on screen. The first value read is the percentage, and the second value read is the value of the slider. Notice that the percentage value is correct and the value is incorrect. It seems that the previous slider value is read instead of the current slider value.
  4. For comparison, change the value of the slider by using two fingers to slide the slider, then tap the slider to have the screen reader read the value. Notice that the value read is correct. This is not the main way that a user with visual impairment would interact with the slider.

Expected results: For example, when increasing the slider to the max value, "100%, 100 slider" is read.

Actual results: For example, when increasing the slider to the max value, "100%, 90 slider" is read.

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

void main() {
  runApp(const MyApp());
  RendererBinding.instance!.setSemanticsEnabled(true);
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentSliderValue,
      max: 100,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });
      },
    );
  }
}
Logs
[✓] Flutter (Channel unknown, 2.10.4, on macOS 12.3.1 21E258 darwin-arm, locale
    en)
    • Flutter version 2.10.4 at /Users/mfolkerts/flutter
    • Upstream repository unknown
    • Framework revision c860cba910 (3 weeks ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/mfolkerts/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio with
      Blaze.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio
    • Android Studio at /Applications/Android Studio with Blaze.app/Contents
    • 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
      11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code 2.app/Contents
    • Flutter extension version 3.38.1

[✓] VS Code (version 1.66.0)
    • VS Code at /Users/mfolkerts/Downloads/Visual Studio Code.app/Contents
    • Flutter extension version 3.38.1

[✓] Connected device (2 available)
    • Pixel 6 Pro (mobile) • 1C241FDEE0024C • android-arm64  • Android 12 (API
      32)
    • Chrome (web)         • chrome         • web-javascript • Google Chrome
      100.0.4896.75

[✓] HTTP Host Availability
    • All required HTTP hosts are available

Metadata

Metadata

Assignees

Labels

a: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)f: material designflutter/packages/flutter/material repository.found in release: 2.10Found to occur in 2.10found in release: 2.13Found to occur in 2.13frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-androidAndroid applications specificallyr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions