[a11y] RangeSlider mouse interaction should change keyboard focus (#182185)
fix: https://github.com/flutter/flutter/issues/173575
RangeSlider manages its own focus node for 2 thumbs. ( a special case
because it's one widget, one render object but two focus nodes)
so when you dragging a thumb, or tap a thumb, the focus node should
request focus.
## 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].
**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.
<!-- Links -->
[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
diff --git a/packages/flutter/lib/src/material/range_slider.dart b/packages/flutter/lib/src/material/range_slider.dart
index 953f910..dc47795 100644
--- a/packages/flutter/lib/src/material/range_slider.dart
+++ b/packages/flutter/lib/src/material/range_slider.dart
@@ -1353,6 +1353,13 @@
);
if (_lastThumbSelection != null) {
+ switch (_lastThumbSelection!) {
+ case Thumb.start:
+ _state.startFocusNode.requestFocus();
+ case Thumb.end:
+ _state.endFocusNode.requestFocus();
+ }
+
_active = true;
// We supply the *current* values as the start locations, so that if we have
// a tap, it consists of a call to onChangeStart with the previous value and
diff --git a/packages/flutter/test/material/range_slider_test.dart b/packages/flutter/test/material/range_slider_test.dart
index 555ca2e..ff98d56 100644
--- a/packages/flutter/test/material/range_slider_test.dart
+++ b/packages/flutter/test/material/range_slider_test.dart
@@ -1729,6 +1729,7 @@
expect(
sliderBox,
paints
+ ..circle(color: sliderTheme.overlayColor)
..circle(color: sliderTheme.thumbColor)
..circle(color: sliderTheme.overlappingShapeStrokeColor)
..circle(color: sliderTheme.thumbColor),
@@ -3375,8 +3376,8 @@
);
final RenderObject renderObject = tester.renderObject(find.byType(RangeSlider));
- // 2 thumbs and 1 overlay.
- expect(renderObject, paintsExactlyCountTimes(#drawCircle, 3));
+ // 2 thumbs, 1 overlay for hover, and 1 overlay for focus.
+ expect(renderObject, paintsExactlyCountTimes(#drawCircle, 4));
// Move away from thumb
await gesture.moveTo(tester.getTopRight(find.byType(RangeSlider)));
@@ -3895,6 +3896,183 @@
);
expect(tester.getSize(find.byType(RangeSlider)), Size.zero);
});
+
+ testWidgets('RangeSlider taps should set focus on start/end thumbs', (WidgetTester tester) async {
+ var values = const RangeValues(0.3, 0.7);
+
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Material(
+ child: Center(
+ child: StatefulBuilder(
+ builder: (BuildContext context, StateSetter setState) {
+ return RangeSlider(
+ values: values,
+ onChanged: (RangeValues newValues) {
+ setState(() {
+ values = newValues;
+ });
+ },
+ onChangeStart: (RangeValues newValues) {},
+ onChangeEnd: (RangeValues newValues) {},
+ );
+ },
+ ),
+ ),
+ ),
+ ),
+ );
+
+ // Initial state: root focus scope has focus
+ final FocusNode initialFocus = FocusManager.instance.primaryFocus!;
+ expect(initialFocus, isNotNull);
+
+ final Offset topLeft = tester.getTopLeft(find.byType(RangeSlider));
+ final Offset bottomRight = tester.getBottomRight(find.byType(RangeSlider));
+
+ // Tap near the start thumb (0.3)
+ final Offset startThumbPos = topLeft + (bottomRight - topLeft) * 0.3;
+ await tester.tapAt(startThumbPos);
+ await tester.pump();
+
+ // Verify focus changed to start thumb
+ final startFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).startFocusNode as FocusNode;
+ expect(startFocusNode.hasFocus, isTrue, reason: 'Start thumb should have focus after tap');
+ expect(FocusManager.instance.primaryFocus, equals(startFocusNode));
+
+ // Reset focus
+ FocusManager.instance.primaryFocus?.unfocus();
+ await tester.pump();
+
+ // Tap near the end thumb (0.7)
+ final Offset endThumbPos = topLeft + (bottomRight - topLeft) * 0.7;
+ await tester.tapAt(endThumbPos);
+ await tester.pump();
+
+ // Verify focus changed to end thumb
+ final endFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).endFocusNode as FocusNode;
+ expect(endFocusNode.hasFocus, isTrue, reason: 'End thumb should have focus after tap');
+ expect(FocusManager.instance.primaryFocus, equals(endFocusNode));
+ });
+
+ testWidgets('RangeSlider drag should set focus on start/end thumbs', (WidgetTester tester) async {
+ var values = const RangeValues(0.3, 0.7);
+
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Material(
+ child: Center(
+ child: StatefulBuilder(
+ builder: (BuildContext context, StateSetter setState) {
+ return RangeSlider(
+ values: values,
+ onChanged: (RangeValues newValues) {
+ setState(() {
+ values = newValues;
+ });
+ },
+ );
+ },
+ ),
+ ),
+ ),
+ ),
+ );
+
+ // Initial state
+ final FocusNode initialFocus = FocusManager.instance.primaryFocus!;
+ expect(initialFocus, isNotNull);
+
+ final Offset topLeft = tester.getTopLeft(find.byType(RangeSlider));
+ final Offset bottomRight = tester.getBottomRight(find.byType(RangeSlider));
+
+ // Drag start thumb
+ final Offset startThumbPos = topLeft + (bottomRight - topLeft) * 0.3;
+ final TestGesture gesture = await tester.startGesture(startThumbPos);
+ await tester.pump();
+
+ // Verify focus on start drag
+ final startFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).startFocusNode as FocusNode;
+ expect(startFocusNode.hasFocus, isTrue, reason: 'Start thumb should have focus on drag start');
+ expect(FocusManager.instance.primaryFocus, equals(startFocusNode));
+
+ await gesture.moveBy(const Offset(10, 0));
+ await gesture.up();
+ await tester.pump();
+
+ // Reset focus
+ FocusManager.instance.primaryFocus?.unfocus();
+ await tester.pump();
+
+ // Drag end thumb
+ final Offset endThumbPos = topLeft + (bottomRight - topLeft) * 0.7;
+ final TestGesture endGesture = await tester.startGesture(endThumbPos);
+ await tester.pump();
+
+ // Verify focus on end drag
+ final endFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).endFocusNode as FocusNode;
+ expect(endFocusNode.hasFocus, isTrue, reason: 'End thumb should have focus on drag start');
+ expect(FocusManager.instance.primaryFocus, equals(endFocusNode));
+
+ await endGesture.moveBy(const Offset(-10, 0));
+ await endGesture.up();
+ await tester.pump();
+ });
+
+ testWidgets('RangeSlider tap start thumb then tab should focus end thumb', (
+ WidgetTester tester,
+ ) async {
+ var values = const RangeValues(0.3, 0.7);
+
+ await tester.pumpWidget(
+ MaterialApp(
+ home: Material(
+ child: Center(
+ child: StatefulBuilder(
+ builder: (BuildContext context, StateSetter setState) {
+ return RangeSlider(
+ values: values,
+ onChanged: (RangeValues newValues) {
+ setState(() {
+ values = newValues;
+ });
+ },
+ );
+ },
+ ),
+ ),
+ ),
+ ),
+ );
+
+ final Offset topLeft = tester.getTopLeft(find.byType(RangeSlider));
+ final Offset bottomRight = tester.getBottomRight(find.byType(RangeSlider));
+
+ // Tap near the start thumb (0.3)
+ final Offset startThumbPos = topLeft + (bottomRight - topLeft) * 0.3;
+ await tester.tapAt(startThumbPos);
+ await tester.pump();
+
+ // Verify start thumb has focus
+ final startFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).startFocusNode as FocusNode;
+ expect(startFocusNode.hasFocus, isTrue, reason: 'Start thumb should have focus after tap');
+ expect(FocusManager.instance.primaryFocus, equals(startFocusNode));
+
+ // Press Tab
+ await tester.sendKeyEvent(LogicalKeyboardKey.tab);
+ await tester.pump();
+
+ // Verify end thumb has focus
+ final endFocusNode =
+ (tester.state(find.byType(RangeSlider)) as dynamic).endFocusNode as FocusNode;
+ expect(endFocusNode.hasFocus, isTrue, reason: 'End thumb should have focus after tab');
+ expect(FocusManager.instance.primaryFocus, equals(endFocusNode));
+ });
}
// A value indicator shape to log labelPainter text.
