[A11y] RangeSlider should have 2 focus node by hannah-hyj · Pull Request #172729 · flutter/flutter

hannah-hyj · 2025-07-24T22:14:43Z

internal: b/430179234 : in a11y mode, you can't use tab to focus on the handles of the rangeslider, only use a11y shortcut to focus on them.

rangeSlider is a widget with 1 renderObject but 2 semanticsNode because it has 2 inputs, each handle of the rangeSlider has its own actions. To achieve that, rangeSlider creates its semantics node using the assembleSemantics function.

For the same reason, rangeSlider should have 2 focus nodes instead of 1, and it should be linked to semantics to support tab to navigate in a11y mode.

This PR is to add 2 focus nodes to the range slider, link them to a11y and also highlight the thumb when focused.

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.

hannah-hyj · 2025-07-28T21:41:04Z

packages/flutter/test/material/range_slider_test.dart

    expect(RendererBinding.instance.mouseTracker.debugDeviceActiveCursor(1), disabledCursor);

    await tester.pumpWidget(buildFrame(enabled: true));
-    expect(


Removing L2457-L2461 because I think this expect here was incorrect, it should never be SystemMouseCursors.none.
In previous code before my PR, if adding await tester.pumpAndSettle(); before L2457, the test will fail because it will become SystemMouseCursors.hovered.

yjbanov · 2025-07-28T22:45:04Z

packages/flutter/lib/src/material/range_slider.dart

  )
  final bool? year2023;

+  /// Focus node for the start thumb.


It would be useful to document what these focus nodes can be used for. I imagine these exist so the parent widget could programmatically control the focus? It would also be useful to document what happens if these are left as null (e.g. that a default focus node will be created).

yjbanov · 2025-07-28T22:45:11Z

packages/flutter/lib/src/material/range_slider.dart

+  /// Focus node for the start thumb.
+  final FocusNode? startFocusNode;
+
+  /// Focus node for the end thumb.


yjbanov · 2025-07-28T23:01:48Z

packages/flutter/lib/src/material/range_slider.dart

+        Row(
+          children: <Widget>[
+            Focus(focusNode: startFocusNode, child: const SizedBox.shrink()),
+            Focus(focusNode: endFocusNode, child: const SizedBox.shrink()),


This might be good enough for keyboard-based focus traversal. However, this may not be enough for mouse-based focus traversal. On the web it is expected that if I click on a thumb it acquires focus. So if I use the left/right arrow keys, the last thumb I clicked on reacts to the key.

One way to fix this is to position and size the children exactly to cover the thumbs, and hook up a click/tap listener that calls startFocusNode.requestFocus() or endFocusNode.requestFocus(), as appropriate.

That said, we can also treat it as a separate issue, and fix keyboard first, and mouse later.

sounds good, i will treat it as a separate issue

do we have code to handle adjusting the slider with keyboard once the new focus nodes receive focus?

good catch, we currently don't, we can adjust the slider in a11y mode. But when a11y mode is off, I didn't add the shortcut to the new focus nodes.

yjbanov · 2025-07-28T23:02:38Z

packages/flutter/lib/src/material/range_slider.dart

-      child: result,
+    return Stack(
+      children: <Widget>[
+        //Adds two invisible focus nodes to the range slider for its two thumbs.


nit: add one space between // and Adds.

chunhtai · 2025-07-30T16:02:30Z

packages/flutter/lib/src/material/range_slider.dart

      'This feature was deprecated after v3.30.0-0.1.pre.',
    )
    this.year2023,
+    this.startFocusNode,


Do we need to accept a focus node? Is there a use case where someone would want to pass in the focus node?

I was trying to follow the practice of Slider and it has passed-in focus node.
I removed passed-in focus nodes and if they're needed in the future they can still be added.

chunhtai · 2025-07-30T16:03:33Z

packages/flutter/lib/src/material/range_slider.dart

    enableController.dispose();
    startPositionController.dispose();
    endPositionController.dispose();
+    startFocusNode.dispose();


This can be passed-in focus node, in that case, we shouldn't dispose it

removed passed-in focus node

chunhtai · 2025-07-30T16:05:01Z

packages/flutter/lib/src/material/range_slider.dart

      } else {
        enableController.reverse();
      }
+      setState(() {


won't this crash in didUpdateWidget?

yeah you're right this should be simply "_showHoverHighlight = _hovering && isEnabled;"

chunhtai · 2025-07-30T16:05:17Z

packages/flutter/lib/src/material/range_slider.dart

        enableController.reverse();
      }
+      setState(() {
+        if (_showHoverHighlight != (_hovering && isEnabled)) {


this if check is redundant

chunhtai · 2025-07-30T16:14:54Z

packages/flutter/lib/src/material/range_slider.dart

+        Row(
+          children: <Widget>[
+            Focus(focusNode: startFocusNode, child: const SizedBox.shrink()),
+            Focus(focusNode: endFocusNode, child: const SizedBox.shrink()),


do we have code to handle adjusting the slider with keyboard once the new focus nodes receive focus?

fix tests add highlight Update range_slider.dart

…172729)

Roll Flutter from c3279ca to 871849e (56 revisions) flutter/flutter@c3279ca...871849e 2025-08-01 [email protected] Roll Dart SDK from 6832e04cf2f9 to 6e1bb159c860 (8 revisions) (flutter/flutter#173119) 2025-08-01 [email protected] Add `--profile-startup` flag to `flutter run` (flutter/flutter#172990) 2025-08-01 [email protected] Add `side` to `RadioThemeData` (flutter/flutter#171945) 2025-08-01 [email protected] Update GCA instructions (flutter/flutter#173001) 2025-08-01 [email protected] [engine] Null aware elements clean-ups (flutter/flutter#173075) 2025-08-01 [email protected] Roll Packages from db6988d to f0645d8 (3 revisions) (flutter/flutter#173111) 2025-08-01 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reland licenses cpp switch 3 (#173063)" (flutter/flutter#173113) 2025-08-01 [email protected] Update embedder API CODEOWNERS (flutter/flutter#173081) 2025-08-01 [email protected] Move android_obfuscate_test from devicelab into tools integration.shard (flutter/flutter#169798) 2025-08-01 [email protected] [A11y] RangeSlider should have 2 focus node (flutter/flutter#172729) 2025-07-31 [email protected] Upload the linux arm64 embedder to cloud buckets. (flutter/flutter#173068) 2025-07-31 [email protected] Reland licenses cpp switch 3 (flutter/flutter#173063) 2025-07-31 [email protected] [ Tool ] Mark IOOverrides subclasses as `final` (flutter/flutter#173078) 2025-07-31 [email protected] [macOS] Remove duplicate object initialization (flutter/flutter#171767) 2025-07-31 [email protected] Redistribute Android test owners (flutter/flutter#172886) 2025-07-31 [email protected] Avoid negatives in the styleguide.md (flutter/flutter#172917) 2025-07-31 [email protected] Roll Skia from 42e3bed42110 to 49e39cd3cf18 (7 revisions) (flutter/flutter#173069) 2025-07-31 [email protected] Fix the issue where calling showOnScreen on a sliver after a pinned child in SliverMainAxisGroup does not reveal it. (flutter/flutter#171339) 2025-07-31 [email protected] Improve assertion message in `EdgeInsetsDirectional.resolve` (flutter/flutter#172099) 2025-07-31 [email protected] licenses_cpp: Switched to lexically_relative for 2x speed boost. (flutter/flutter#173048) 2025-07-31 [email protected] Add dartvm to the dart_sdk_entitlement_config list. (flutter/flutter#173044) 2025-07-31 [email protected] [web] ClickDebouncer workaround for iOS Safari click behavior (flutter/flutter#172995) 2025-07-31 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reland licenses cpp switch 2 (#172996)" (flutter/flutter#173059) 2025-07-31 [email protected] [web] Text editing test accepts both behaviors in Firefox (flutter/flutter#172767) 2025-07-31 [email protected] Reland licenses cpp switch 2 (flutter/flutter#172996) 2025-07-31 [email protected] Roll Packages from d914120 to db6988d (2 revisions) (flutter/flutter#173039) 2025-07-31 [email protected] Add a SliverList code sample (flutter/flutter#172986) 2025-07-31 [email protected] fix: adjust scrollable size assertion with tolerance (flutter/flutter#171426) 2025-07-31 [email protected] impeller: Shrink `Command` 40 bytes (flutter/flutter#173004) 2025-07-31 [email protected] [web] Remove outdated comment about HTML renderer (flutter/flutter#172877) 2025-07-31 [email protected] Roll Skia from ff4da49305c5 to 42e3bed42110 (1 revision) (flutter/flutter#173038) 2025-07-31 [email protected] Roll Skia from 7d468a4868cb to ff4da49305c5 (3 revisions) (flutter/flutter#173028) 2025-07-31 [email protected] Roll Skia from 951277895c86 to 7d468a4868cb (1 revision) (flutter/flutter#173027) 2025-07-31 [email protected] Manual roll of Dart from 14ea8d342149 to 6832e04cf2f9 (flutter/flutter#173015) 2025-07-31 [email protected] Roll Skia from 8bdf4cdcf4ed to 951277895c86 (2 revisions) (flutter/flutter#173022) 2025-07-31 [email protected] Roll Fuchsia Linux SDK from bQVQlLssTxxLjoDU0... to xo_bqOoFuBKFmgKxn... (flutter/flutter#173021) 2025-07-31 [email protected] feat: Add `cursorHeight` to `DropdownMenu` (flutter/flutter#172615) 2025-07-31 [email protected] Roll Skia from a3347cee2d73 to 8bdf4cdcf4ed (3 revisions) (flutter/flutter#173013) 2025-07-31 [email protected] [ Widget Preview ] Add `--web-server` support (flutter/flutter#172978) 2025-07-30 [email protected] Bump customer tests for zulip fix 2 (flutter/flutter#173003) 2025-07-30 [email protected] Migrate to null aware elements - Part 4 (flutter/flutter#172322) 2025-07-30 [email protected] Marks Linux linux_feature_flags_test to be unflaky (flutter/flutter#172629) 2025-07-30 [email protected] [ Widget Previews ] Add support for `MultiPreview`s (flutter/flutter#172852) 2025-07-30 [email protected] Made licenses_cpp simpatico with google licenses (flutter/flutter#172991) 2025-07-30 [email protected] Roll Skia from d579722d65c6 to a3347cee2d73 (6 revisions) (flutter/flutter#172989) 2025-07-30 [email protected] Migrate to null aware elements - Part 5 (flutter/flutter#172418) ...

internal: b/430179234 : in a11y mode, you can't use tab to focus on the handles of the rangeslider, only use a11y shortcut to focus on them. rangeSlider is a widget with 1 renderObject but 2 semanticsNode because it has 2 inputs, each handle of the rangeSlider has its own actions. To achieve that, rangeSlider creates its semantics node using the assembleSemantics function. For the same reason, rangeSlider should have 2 focus nodes instead of 1, and it should be linked to semantics to support tab to navigate in a11y mode. This PR is to add 2 focus nodes to the range slider, link them to a11y and also highlight the thumb when focused. ## 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].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

…172729)

internal: b/430179234 : in a11y mode, you can't use tab to focus on the handles of the rangeslider, only use a11y shortcut to focus on them. rangeSlider is a widget with 1 renderObject but 2 semanticsNode because it has 2 inputs, each handle of the rangeSlider has its own actions. To achieve that, rangeSlider creates its semantics node using the assembleSemantics function. For the same reason, rangeSlider should have 2 focus nodes instead of 1, and it should be linked to semantics to support tab to navigate in a11y mode. This PR is to add 2 focus nodes to the range slider, link them to a11y and also highlight the thumb when focused. ## 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].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

This comment was marked as resolved.

Sign in to view

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jul 24, 2025

hannah-hyj force-pushed the rangeslider branch from 9b154fa to 300d2ea Compare July 24, 2025 23:36

hannah-hyj commented Jul 28, 2025

View reviewed changes

hannah-hyj changed the title ~~[draft] range slider should have 2 focus node~~ range slider should have 2 focus node Jul 28, 2025

hannah-hyj changed the title ~~range slider should have 2 focus node~~ [A11y] RangeSlider should have 2 focus node Jul 28, 2025

hannah-hyj force-pushed the rangeslider branch from f20e952 to a136c4a Compare July 28, 2025 22:29

hannah-hyj requested review from chunhtai and yjbanov July 28, 2025 22:34

yjbanov approved these changes Jul 28, 2025

View reviewed changes

hannah-hyj force-pushed the rangeslider branch from 103e264 to 696977b Compare July 29, 2025 17:49

chunhtai reviewed Jul 30, 2025

View reviewed changes

hannah-hyj added 10 commits July 31, 2025 17:41

range slider focus

ec60b20

fix tests add highlight Update range_slider.dart

Update range_slider.dart

6602201

resolve comments

6b37d54

Update range_slider_test.dart

fc1f22f

Update range_slider_test.dart

88a2b06

Update range_slider_test.dart

b289260

resolve comments

2f28a3b

lint

669065b

lint

d71152c

includeSemantics: false

85b175a

hannah-hyj force-pushed the rangeslider branch from eee25f2 to 85b175a Compare August 1, 2025 00:41

fix listeners

7363e67

hannah-hyj added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 1, 2025

auto-submit bot added this pull request to the merge queue Aug 1, 2025

Merged via the queue into flutter:master with commit 2b07a4a Aug 1, 2025
75 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 1, 2025

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to 15f39d189edb (49 revisions) flutter/packages#9722

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

fd9fb3a

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to e1f8458f7568 (51 revisions) flutter/packages#9723

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

9973557

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to 6feaa2c63278 (52 revisions) flutter/packages#9724

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

ade1c84

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to b588b3b46fb0 (53 revisions) flutter/packages#9725

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

da5929d

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to ce44f81c8637 (54 revisions) flutter/packages#9726

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

42541a8

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to 28481edd6b5d (55 revisions) flutter/packages#9727

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

990c39c

…172729)

engine-flutter-autoroll mentioned this pull request Aug 1, 2025

Roll Flutter from c3279caa127d to 871849e4b6bf (56 revisions) flutter/packages#9728

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 1, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

e12c868

…172729)

Piinks mentioned this pull request Aug 1, 2025

Flutter Notable Commits - 2025 #161460

Closed

yjbanov mentioned this pull request Aug 11, 2025

[a11y] RangeSlider keyboard focus does not follow mouse interaction #173575

Closed

hannah-hyj mentioned this pull request Sep 16, 2025

[Google3 Bug]: [Accessibility] RangeSlider does not respond to keyboard focus or interactions #170177

Closed

4 tasks

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025

2b07a4a [A11y] RangeSlider should have 2 focus node (flutter/flutter#…

fb32ac7

…172729)

devrelm mentioned this pull request Dec 9, 2025

[Google3 Bug]: [Accessibility] RangeSlider does not respond to keyboard interactions #179638

Open

4 tasks

Conversation

hannah-hyj commented Jul 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

This comment was marked as resolved.

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hannah-hyj commented Jul 24, 2025 •

edited

Loading