Fix double tap in a11y mode moves thumb to the center of the `Slider` #157601

TahaTesser · 2024-10-25T15:07:28Z

Fixes [A11y] Double Tap brings the Slider thumb to the center of the widget.

Description

When double tapping in talkback or voice over mode on mobile platform, the Slider thumb moves to the center of the widget and changes the Slider value unexpectedly. When the user expects to swipe or down to adjust the Slider thumb. When tapping the Slider should show overlay for 500 milliseconds to bring attention instead of the moving the thumb to the center of the widget.

Code sample

expand to view the code sample

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _sliderValue = 0.2;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.dark),
      home: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: IntrinsicHeight(
              child: Slider(
                value: _sliderValue,
                onChanged: (double value) {
                  setState(() {
                    _sliderValue = value;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Note: Semantic node size is known issue aka green box in the demos.

Before

The demo uses swipe up and down gesture to adjust the Slider. However, when double tapped the thumb unexpectedly moves to the center of the widget.

VID_20241025180329.mp4

After

The demo uses swipe up and down gesture to adjust the Slider. When double tapped the overlay is shown briefly.

VID_20241025180241.mp4

Android Components

VID_20241025180439.mp4

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

flutter-dashboard · 2024-10-25T17:10:01Z

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

QuncCccccc · 2024-10-29T23:19:16Z

dev/a11y_assessments/test/accessibility_guideline_test.dart

-      await expectLater(tester, meetsGuideline(labeledTapTargetGuideline));
+      // Skip the Slider use case, it uses tap action without label on purpose.
+      // see ttps://github.com/flutter/flutter/pull/157601.
+      if (useCase.name != 'Slider') {


Not very sure whether we can modify the test like this. @hannah-hyj and @chunhtai are OOO, we can double check with them next week:)

I'm also not sure but this guideline test doesn't really work for Slider. When testing the Android components Slider, it is tappable in a11y mode without changing the Slider value and shows overlay.

My fix overrides Semantic with action tap to show overlay but action tap require semantics label but an existing Slider test prevents this. So i decided to skip the a11y test itself.

I see. If the current behavior is intended, I think we can create an issue for the guideline and add a TODO here:)
CC: @chunhtai

This doesn't look right, the slider use case does assign a label to the slider, it should not have failed the test. Can you dump the semantics tree when run the a11y_assessment app? i suspect something is forming a node unexpectedly

@chunhtai
I've reverted the a11y_assessment. changes to show the error logs in the CI to access.

https://logs.chromium.org/logs/flutter/buildbucket/cr-buildbucket/8732575348927856369/+/u/run_test.dart_for_framework_tests_shard_and_subshard_misc/stdout

So I try to understand the issue. It looks like ios that it will issue regular tap if there isn't a semantics tap. the regular tap taps the center of the slider causes it to change the value to the middle.

The code here is a workaround so that the ios thinks there is a semantics tap so that it won't issue regular tap. This seems to me it is something that we should fix in iOS embedding. More specifically here should return YES if this is a slider
https://github.com/flutter/engine/blob/e553cd61645fc9bb21e62055e75ccddb09b596eb/shell/platform/darwin/ios/framework/Source/SemanticsObject.mm#L695

Tagging @bleroux who can help fix this in the engine side.

If we agree the fix should be on the iOS side, I think we should close this pr

dev/a11y_assessments/test/accessibility_guideline_test.dart

Piinks · 2024-11-06T23:10:47Z

(Triage): Flyby comment, there are a bunch of failing checks.

) ## Description iOS fix [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter/flutter#156427) per instruction from flutter/flutter#157601 (comment) I don't have a physical iOS device to double check, but using the iOS Simulator and accessibility tools, the behavior seems ok. Without this PR, the slider thumb goes to the center when clicking 'Activate', with this PR it does not : https://github.com/user-attachments/assets/697acadd-7fb1-40a5-ba5a-b549cac381a1 ## Related Issue iOS fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter/flutter#156427) ## Tests Adds 1 test.

## Description Android fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter/flutter#156427). Similar to [the iOS engine fix](#56427). Slider widget doesn't define a Semantics.onTap handler, so a double-click while in accessibility mode defaults to a regular tap down event to which _RenderSlider reacts by changing the slider value. Adding a onTap callback on the framework side was tried in flutter/flutter#157601 but it breaks one accessibility guideline test, see flutter/flutter#157601 (comment)). See flutter/flutter#157601 (comment) for the reasoning to make the change at the engine level. ## Related Issue Android fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter/flutter#156427). ## Tests Adds 1 test.

…tter/engine#56427) ## Description iOS fix [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter#156427) per instruction from flutter#157601 (comment) I don't have a physical iOS device to double check, but using the iOS Simulator and accessibility tools, the behavior seems ok. Without this PR, the slider thumb goes to the center when clicking 'Activate', with this PR it does not : https://github.com/user-attachments/assets/697acadd-7fb1-40a5-ba5a-b549cac381a1 ## Related Issue iOS fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter#156427) ## Tests Adds 1 test.

…6452) ## Description Android fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter#156427). Similar to [the iOS engine fix](flutter/engine#56427). Slider widget doesn't define a Semantics.onTap handler, so a double-click while in accessibility mode defaults to a regular tap down event to which _RenderSlider reacts by changing the slider value. Adding a onTap callback on the framework side was tried in flutter#157601 but it breaks one accessibility guideline test, see flutter#157601 (comment)). See flutter#157601 (comment) for the reasoning to make the change at the engine level. ## Related Issue Android fix for [[A11y] Double Tap brings the Slider thumb to the center of the widget.](flutter#156427). ## Tests Adds 1 test.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Oct 25, 2024

TahaTesser marked this pull request as draft October 25, 2024 17:06

github-actions bot added the a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) label Oct 28, 2024

TahaTesser marked this pull request as ready for review October 28, 2024 10:52

TahaTesser force-pushed the fix_slider_a11y_tap branch 3 times, most recently from 77d470e to e8b5be8 Compare October 29, 2024 08:45

github-actions bot added the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser force-pushed the fix_slider_a11y_tap branch from e8b5be8 to c04e538 Compare October 29, 2024 14:45

TahaTesser removed the a: text input Entering text in a text field or keyboard related problems label Oct 29, 2024

TahaTesser requested a review from QuncCccccc October 29, 2024 16:02

QuncCccccc reviewed Oct 29, 2024

View reviewed changes

Fix double tap in a11y mode moves thumb to the center of the Slider

96f01cc

TahaTesser force-pushed the fix_slider_a11y_tap branch from c04e538 to 96f01cc Compare October 31, 2024 08:42

github-actions bot removed the a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) label Oct 31, 2024

TahaTesser requested a review from chunhtai October 31, 2024 16:11

TahaTesser closed this Nov 7, 2024

TahaTesser deleted the fix_slider_a11y_tap branch November 7, 2024 08:01

This was referenced Nov 7, 2024

[iOS] Fix slider semantics node answer to accessibility activate flutter/engine#56427

Merged

[Android] Fix Slider semantics double tap behaviors flutter/engine#56452

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix double tap in a11y mode moves thumb to the center of the `Slider` #157601

Fix double tap in a11y mode moves thumb to the center of the `Slider` #157601

Uh oh!

TahaTesser commented Oct 25, 2024

Uh oh!

flutter-dashboard bot commented Oct 25, 2024

Uh oh!

QuncCccccc Oct 29, 2024

Uh oh!

TahaTesser Oct 30, 2024 •

edited

Loading

Uh oh!

QuncCccccc Oct 30, 2024

Uh oh!

chunhtai Oct 30, 2024

Uh oh!

TahaTesser Oct 31, 2024

Uh oh!

chunhtai Nov 5, 2024

Uh oh!

TahaTesser Nov 6, 2024

Uh oh!

chunhtai Nov 6, 2024

Uh oh!

Uh oh!

Piinks commented Nov 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix double tap in a11y mode moves thumb to the center of the Slider #157601

Fix double tap in a11y mode moves thumb to the center of the Slider #157601

Uh oh!

Conversation

TahaTesser commented Oct 25, 2024

Description

Code sample

Before

After

Android Components

Pre-launch Checklist

Uh oh!

flutter-dashboard bot commented Oct 25, 2024

Uh oh!

QuncCccccc Oct 29, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Oct 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

chunhtai Oct 30, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Oct 31, 2024

Choose a reason for hiding this comment

Uh oh!

chunhtai Nov 5, 2024

Choose a reason for hiding this comment

Uh oh!

TahaTesser Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

chunhtai Nov 6, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Piinks commented Nov 6, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix double tap in a11y mode moves thumb to the center of the `Slider` #157601

Fix double tap in a11y mode moves thumb to the center of the `Slider` #157601

TahaTesser Oct 30, 2024 •

edited

Loading