Re-Land: Add focus nodes, hover, and shortcuts to switches, checkboxes, and radio buttons. (#43657)

This re-lands the change that adds focus nodes, hover, and shortcuts to switches, checkboxes, and radio buttons. (#43213), with fixes for the web tests that weren't enabled in the master that it was synced to when I first landed it.

dev/integration_tests/android_semantics_testing/test_driver/main_test.dart

@@ -198,8 +198,16 @@ void main() {
       });
 
       test('Checkbox has correct Android semantics', () async {
+        Future<AndroidSemanticsNode> getCheckboxSemantics(String key) async {
+          return getSemantics(
+            find.descendant(
+              of: find.byValueKey(key),
+              matching: find.byType('_CheckboxRenderObjectWidget'),
+            ),
+          );
+        }
         expect(
-          await getSemantics(find.byValueKey(checkboxKeyValue)),
+          await getCheckboxSemantics(checkboxKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.checkBox,
             isChecked: false,
@@ -216,7 +224,7 @@ void main() {
         await driver.tap(find.byValueKey(checkboxKeyValue));
 
         expect(
-          await getSemantics(find.byValueKey(checkboxKeyValue)),
+          await getCheckboxSemantics(checkboxKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.checkBox,
             isChecked: true,
@@ -230,7 +238,7 @@ void main() {
           ),
         );
         expect(
-          await getSemantics(find.byValueKey(disabledCheckboxKeyValue)),
+          await getCheckboxSemantics(disabledCheckboxKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.checkBox,
             isCheckable: true,
@@ -242,8 +250,16 @@ void main() {
         );
       });
       test('Radio has correct Android semantics', () async {
+        Future<AndroidSemanticsNode> getRadioSemantics(String key) async {
+          return getSemantics(
+            find.descendant(
+              of: find.byValueKey(key),
+              matching: find.byType('_RadioRenderObjectWidget'),
+            ),
+          );
+        }
         expect(
-          await getSemantics(find.byValueKey(radio2KeyValue)),
+          await getRadioSemantics(radio2KeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.radio,
             isChecked: false,
@@ -260,7 +276,7 @@ void main() {
         await driver.tap(find.byValueKey(radio2KeyValue));
 
         expect(
-          await getSemantics(find.byValueKey(radio2KeyValue)),
+          await getRadioSemantics(radio2KeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.radio,
             isChecked: true,
@@ -275,8 +291,16 @@ void main() {
         );
       });
       test('Switch has correct Android semantics', () async {
+        Future<AndroidSemanticsNode> getSwitchSemantics(String key) async {
+          return getSemantics(
+            find.descendant(
+              of: find.byValueKey(key),
+              matching: find.byType('_SwitchRenderObjectWidget'),
+            ),
+          );
+        }
         expect(
-          await getSemantics(find.byValueKey(switchKeyValue)),
+          await getSwitchSemantics(switchKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.toggleSwitch,
             isChecked: false,
@@ -293,7 +317,7 @@ void main() {
         await driver.tap(find.byValueKey(switchKeyValue));
 
         expect(
-          await getSemantics(find.byValueKey(switchKeyValue)),
+          await getSwitchSemantics(switchKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.toggleSwitch,
             isChecked: true,
@@ -310,8 +334,16 @@ void main() {
 
       // Regression test for https://github.com/flutter/flutter/issues/20820.
       test('Switch can be labeled', () async {
+        Future<AndroidSemanticsNode> getSwitchSemantics(String key) async {
+          return getSemantics(
+            find.descendant(
+              of: find.byValueKey(key),
+              matching: find.byType('_SwitchRenderObjectWidget'),
+            ),
+          );
+        }
         expect(
-          await getSemantics(find.byValueKey(labeledSwitchKeyValue)),
+          await getSwitchSemantics(labeledSwitchKeyValue),
           hasAndroidSemantics(
             className: AndroidClassName.toggleSwitch,
             isChecked: false,

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

@@ -4,6 +4,8 @@
 
 import 'dart:math' as math;
 
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
@@ -52,7 +54,7 @@ class Checkbox extends StatefulWidget {
   /// * [onChanged], which is called when the value of the checkbox should
   ///   change. It can be set to null to disable the checkbox.
   ///
-  /// The value of [tristate] must not be null.
+  /// The values of [tristate] and [autofocus] must not be null.
   const Checkbox({
     Key key,
     @required this.value,
@@ -60,9 +62,14 @@ class Checkbox extends StatefulWidget {
     @required this.onChanged,
     this.activeColor,
     this.checkColor,
+    this.focusColor,
+    this.hoverColor,
     this.materialTapTargetSize,
+    this.focusNode,
+    this.autofocus = false,
   }) : assert(tristate != null),
        assert(tristate || value != null),
+       assert(autofocus != null),
        super(key: key);
 
   /// Whether this checkbox is checked.
@@ -113,10 +120,10 @@ class Checkbox extends StatefulWidget {
   ///
   /// Checkbox displays a dash when its value is null.
   ///
-  /// When a tri-state checkbox is tapped its [onChanged] callback will be
-  /// applied to true if the current value is null or false, false otherwise.
-  /// Typically tri-state checkboxes are disabled (the onChanged callback is
-  /// null) so they don't respond to taps.
+  /// When a tri-state checkbox ([tristate] is true) is tapped, its [onChanged]
+  /// callback will be applied to true if the current value is false, to null if
+  /// value is true, and to false if value is null (i.e. it cycles through false
+  /// => true => null => false when tapped).
   ///
   /// If tristate is false (the default), [value] must not be null.
   final bool tristate;
@@ -130,6 +137,18 @@ class Checkbox extends StatefulWidget {
   ///  * [MaterialTapTargetSize], for a description of how this affects tap targets.
   final MaterialTapTargetSize materialTapTargetSize;
 
+  /// The color for the checkbox's [Material] when it has the input focus.
+  final Color focusColor;
+
+  /// The color for the checkbox's [Material] when a pointer is hovering over it.
+  final Color hoverColor;
+
+  /// {@macro flutter.widgets.Focus.focusNode}
+  final FocusNode focusNode;
+
+  /// {@macro flutter.widgets.Focus.autofocus}
+  final bool autofocus;
+
   /// The width of a checkbox widget.
   static const double width = 18.0;
 
@@ -138,6 +157,68 @@ class Checkbox extends StatefulWidget {
 }
 
 class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin {
+  bool get enabled => widget.onChanged != null;
+  Map<LocalKey, ActionFactory> _actionMap;
+  bool _showHighlight = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _actionMap = <LocalKey, ActionFactory>{
+      SelectAction.key: _createAction,
+      if (!kIsWeb) ActivateAction.key: _createAction,
+    };
+    _updateHighlightMode(WidgetsBinding.instance.focusManager.highlightMode);
+    WidgetsBinding.instance.focusManager.addHighlightModeListener(_handleFocusHighlightModeChange);
+  }
+
+  void _actionHandler(FocusNode node, Intent intent){
+    if (widget.onChanged != null) {
+      switch (widget.value) {
+        case false:
+          widget.onChanged(true);
+          break;
+        case true:
+          widget.onChanged(widget.tristate ? null : false);
+          break;
+        default: // case null:
+          widget.onChanged(false);
+          break;
+      }
+    }
+    final RenderObject renderObject = node.context.findRenderObject();
+    renderObject.sendSemanticsEvent(const TapSemanticEvent());
+  }
+
+  Action _createAction() {
+    return CallbackAction(
+      SelectAction.key,
+      onInvoke: _actionHandler,
+    );
+  }
+
+  void _updateHighlightMode(FocusHighlightMode mode) {
+    switch (WidgetsBinding.instance.focusManager.highlightMode) {
+      case FocusHighlightMode.touch:
+        _showHighlight = false;
+        break;
+      case FocusHighlightMode.traditional:
+        _showHighlight = true;
+        break;
+    }
+  }
+
+  void _handleFocusHighlightModeChange(FocusHighlightMode mode) {
+    if (!mounted) {
+      return;
+    }
+    setState(() { _updateHighlightMode(mode); });
+  }
+
+  bool hovering = false;
+  void _handleMouseEnter(PointerEnterEvent event) => setState(() { hovering = true; });
+  void _handleMouseExit(PointerExitEvent event) => setState(() { hovering = false; });
+
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
@@ -152,15 +233,36 @@ class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin {
         break;
     }
     final BoxConstraints additionalConstraints = BoxConstraints.tight(size);
-    return _CheckboxRenderObjectWidget(
-      value: widget.value,
-      tristate: widget.tristate,
-      activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
-      checkColor: widget.checkColor ?? const Color(0xFFFFFFFF),
-      inactiveColor: widget.onChanged != null ? themeData.unselectedWidgetColor : themeData.disabledColor,
-      onChanged: widget.onChanged,
-      additionalConstraints: additionalConstraints,
-      vsync: this,
+    return MouseRegion(
+      onEnter: enabled ? _handleMouseEnter : null,
+      onExit: enabled ? _handleMouseExit : null,
+      child: Actions(
+        actions: _actionMap,
+        child: Focus(
+          focusNode: widget.focusNode,
+          autofocus: widget.autofocus,
+          canRequestFocus: enabled,
+          debugLabel: '${describeIdentity(widget)}(${widget.value})',
+          child: Builder(
+            builder: (BuildContext context) {
+              return _CheckboxRenderObjectWidget(
+                value: widget.value,
+                tristate: widget.tristate,
+                activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
+                checkColor: widget.checkColor ?? const Color(0xFFFFFFFF),
+                inactiveColor: enabled ? themeData.unselectedWidgetColor : themeData.disabledColor,
+                focusColor: widget.focusColor ?? themeData.focusColor,
+                hoverColor: widget.hoverColor ?? themeData.hoverColor,
+                onChanged: widget.onChanged,
+                additionalConstraints: additionalConstraints,
+                vsync: this,
+                hasFocus: enabled && _showHighlight && Focus.of(context).hasFocus,
+                hovering: enabled && _showHighlight && hovering,
+              );
+            },
+          ),
+        ),
+      ),
     );
   }
 }
@@ -173,9 +275,13 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
     @required this.activeColor,
     @required this.checkColor,
     @required this.inactiveColor,
+    @required this.focusColor,
+    @required this.hoverColor,
     @required this.onChanged,
     @required this.vsync,
     @required this.additionalConstraints,
+    @required this.hasFocus,
+    @required this.hovering,
   }) : assert(tristate != null),
        assert(tristate || value != null),
        assert(activeColor != null),
@@ -185,9 +291,13 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
 
   final bool value;
   final bool tristate;
+  final bool hasFocus;
+  final bool hovering;
   final Color activeColor;
   final Color checkColor;
   final Color inactiveColor;
+  final Color focusColor;
+  final Color hoverColor;
   final ValueChanged<bool> onChanged;
   final TickerProvider vsync;
   final BoxConstraints additionalConstraints;
@@ -199,9 +309,13 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
     activeColor: activeColor,
     checkColor: checkColor,
     inactiveColor: inactiveColor,
+    focusColor: focusColor,
+    hoverColor: hoverColor,
     onChanged: onChanged,
     vsync: vsync,
     additionalConstraints: additionalConstraints,
+    hasFocus: hasFocus,
+    hovering: hovering,
   );
 
   @override
@@ -212,9 +326,13 @@ class _CheckboxRenderObjectWidget extends LeafRenderObjectWidget {
       ..activeColor = activeColor
       ..checkColor = checkColor
       ..inactiveColor = inactiveColor
+      ..focusColor = focusColor
+      ..hoverColor = hoverColor
       ..onChanged = onChanged
       ..additionalConstraints = additionalConstraints
-      ..vsync = vsync;
+      ..vsync = vsync
+      ..hasFocus = hasFocus
+      ..hovering = hovering;
   }
 }
 
@@ -229,8 +347,12 @@ class _RenderCheckbox extends RenderToggleable {
     Color activeColor,
     this.checkColor,
     Color inactiveColor,
+    Color focusColor,
+    Color hoverColor,
     BoxConstraints additionalConstraints,
     ValueChanged<bool> onChanged,
+    bool hasFocus,
+    bool hovering,
     @required TickerProvider vsync,
   }) : _oldValue = value,
        super(
@@ -238,9 +360,13 @@ class _RenderCheckbox extends RenderToggleable {
          tristate: tristate,
          activeColor: activeColor,
          inactiveColor: inactiveColor,
+         focusColor: focusColor,
+         hoverColor: hoverColor,
          onChanged: onChanged,
          additionalConstraints: additionalConstraints,
          vsync: vsync,
+         hasFocus: hasFocus,
+         hovering: hovering,
        );
 
   bool _oldValue;

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

@@ -5,7 +5,9 @@
 import 'dart:math' as math;
 import 'dart:ui' show window;
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
 import 'button_theme.dart';
@@ -116,6 +118,12 @@ class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
   CurvedAnimation _fadeOpacity;
   CurvedAnimation _resize;
 
+  // On the web, enter doesn't select things, *except* in a <select>
+  // element, which is what a dropdown emulates.
+  static final Map<LogicalKeySet, Intent> _webShortcuts =<LogicalKeySet, Intent>{
+    LogicalKeySet(LogicalKeyboardKey.enter): const Intent(SelectAction.key),
+  };
+
   @override
   void initState() {
     super.initState();
@@ -159,7 +167,7 @@ class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
         final double end = (start + 1.5 * unit).clamp(0.0, 1.0);
         opacity = CurvedAnimation(parent: route.animation, curve: Interval(start, end));
       }
-      children.add(FadeTransition(
+      Widget child = FadeTransition(
         opacity: opacity,
         child: InkWell(
           child: Container(
@@ -171,7 +179,16 @@ class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
             _DropdownRouteResult<T>(route.items[itemIndex].item.value),
           ),
         ),
-      ));
+      );
+      if (kIsWeb) {
+        // On the web, enter doesn't select things, *except* in a <select>
+        // element, which is what a dropdown emulates.
+        child = Shortcuts(
+          shortcuts: _webShortcuts,
+          child: child,
+        );
+      }
+      children.add(child);
     }
 
     return FadeTransition(
@@ -974,7 +991,10 @@ class _DropdownButtonState<T> extends State<DropdownButton<T>> with WidgetsBindi
     if (widget.focusNode == null) {
       _internalNode ??= _createFocusNode();
     }
-    _actionMap = <LocalKey, ActionFactory>{ ActivateAction.key: _createAction };
+    _actionMap = <LocalKey, ActionFactory>{
+      SelectAction.key: _createAction,
+      if (!kIsWeb) ActivateAction.key: _createAction,
+    };
     focusNode.addListener(_handleFocusChanged);
   }
 

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

@@ -489,20 +489,25 @@ class _InkResponseState<T extends InkResponse> extends State<T> with AutomaticKe
 
   bool get highlightsExist => _highlights.values.where((InkHighlight highlight) => highlight != null).isNotEmpty;
 
+  void _handleAction(FocusNode node, Intent intent) {
+    _startSplash(context: node.context);
+    _handleTap(node.context);
+  }
+
   Action _createAction() {
     return CallbackAction(
       ActivateAction.key,
-      onInvoke: (FocusNode node, Intent intent) {
-        _startSplash(context: node.context);
-        _handleTap(node.context);
-      },
+      onInvoke:  _handleAction,
     );
   }
 
   @override
   void initState() {
     super.initState();
-    _actionMap = <LocalKey, ActionFactory>{ ActivateAction.key: _createAction };
+    _actionMap = <LocalKey, ActionFactory>{
+      SelectAction.key: _createAction,
+      if (!kIsWeb) ActivateAction.key: _createAction,
+    };
     WidgetsBinding.instance.focusManager.addHighlightModeListener(_handleFocusHighlightModeChange);
   }
 

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
@@ -107,8 +109,13 @@ class Radio<T> extends StatefulWidget {
     @required this.groupValue,
     @required this.onChanged,
     this.activeColor,
+    this.focusColor,
+    this.hoverColor,
     this.materialTapTargetSize,
-  }) : super(key: key);
+    this.focusNode,
+    this.autofocus = false,
+  }) : assert(autofocus != null),
+       super(key: key);
 
   /// The value represented by this radio button.
   final T value;
@@ -161,15 +168,77 @@ class Radio<T> extends StatefulWidget {
   ///  * [MaterialTapTargetSize], for a description of how this affects tap targets.
   final MaterialTapTargetSize materialTapTargetSize;
 
+  /// The color for the radio's [Material] when it has the input focus.
+  final Color focusColor;
+
+  /// The color for the radio's [Material] when a pointer is hovering over it.
+  final Color hoverColor;
+
+  /// {@macro flutter.widgets.Focus.focusNode}
+  final FocusNode focusNode;
+
+  /// {@macro flutter.widgets.Focus.autofocus}
+  final bool autofocus;
+
   @override
   _RadioState<T> createState() => _RadioState<T>();
 }
 
 class _RadioState<T> extends State<Radio<T>> with TickerProviderStateMixin {
-  bool get _enabled => widget.onChanged != null;
+  bool get enabled => widget.onChanged != null;
+  Map<LocalKey, ActionFactory> _actionMap;
+  bool _showHighlight = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _actionMap = <LocalKey, ActionFactory>{
+      SelectAction.key: _createAction,
+      if (!kIsWeb) ActivateAction.key: _createAction,
+    };
+    _updateHighlightMode(WidgetsBinding.instance.focusManager.highlightMode);
+    WidgetsBinding.instance.focusManager.addHighlightModeListener(_handleFocusHighlightModeChange);
+  }
+
+  void _actionHandler(FocusNode node, Intent intent){
+    if (widget.onChanged != null) {
+      widget.onChanged(widget.value);
+    }
+    final RenderObject renderObject = node.context.findRenderObject();
+    renderObject.sendSemanticsEvent(const TapSemanticEvent());
+  }
+
+  Action _createAction() {
+    return CallbackAction(
+      SelectAction.key,
+      onInvoke: _actionHandler,
+    );
+  }
+
+  void _updateHighlightMode(FocusHighlightMode mode) {
+    switch (WidgetsBinding.instance.focusManager.highlightMode) {
+      case FocusHighlightMode.touch:
+        _showHighlight = false;
+        break;
+      case FocusHighlightMode.traditional:
+        _showHighlight = true;
+        break;
+    }
+  }
+
+  void _handleFocusHighlightModeChange(FocusHighlightMode mode) {
+    if (!mounted) {
+      return;
+    }
+    setState(() { _updateHighlightMode(mode); });
+  }
+
+  bool hovering = false;
+  void _handleMouseEnter(PointerEnterEvent event) => setState(() { hovering = true; });
+  void _handleMouseExit(PointerExitEvent event) => setState(() { hovering = false; });
 
   Color _getInactiveColor(ThemeData themeData) {
-    return _enabled ? themeData.unselectedWidgetColor : themeData.disabledColor;
+    return enabled ? themeData.unselectedWidgetColor : themeData.disabledColor;
   }
 
   void _handleChanged(bool selected) {
@@ -191,13 +260,34 @@ class _RadioState<T> extends State<Radio<T>> with TickerProviderStateMixin {
         break;
     }
     final BoxConstraints additionalConstraints = BoxConstraints.tight(size);
-    return _RadioRenderObjectWidget(
-      selected: widget.value == widget.groupValue,
-      activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
-      inactiveColor: _getInactiveColor(themeData),
-      onChanged: _enabled ? _handleChanged : null,
-      additionalConstraints: additionalConstraints,
-      vsync: this,
+    return MouseRegion(
+      onEnter: enabled ? _handleMouseEnter : null,
+      onExit: enabled ? _handleMouseExit : null,
+      child: Actions(
+        actions: _actionMap,
+        child: Focus(
+          focusNode: widget.focusNode,
+          autofocus: widget.autofocus,
+          canRequestFocus: enabled,
+          debugLabel: '${describeIdentity(widget)}(${widget.value})',
+          child: Builder(
+            builder: (BuildContext context) {
+              return _RadioRenderObjectWidget(
+                selected: widget.value == widget.groupValue,
+                activeColor: widget.activeColor ?? themeData.toggleableActiveColor,
+                inactiveColor: _getInactiveColor(themeData),
+                focusColor: widget.focusColor ?? themeData.focusColor,
+                hoverColor: widget.hoverColor ?? themeData.hoverColor,
+                onChanged: enabled ? _handleChanged : null,
+                additionalConstraints: additionalConstraints,
+                vsync: this,
+                hasFocus: enabled && _showHighlight && Focus.of(context).hasFocus,
+                hovering: enabled && _showHighlight && hovering,
+              );
+            },
+          ),
+        ),
+      ),
     );
   }
 }
@@ -208,9 +298,13 @@ class _RadioRenderObjectWidget extends LeafRenderObjectWidget {
     @required this.selected,
     @required this.activeColor,
     @required this.inactiveColor,
+    @required this.focusColor,
+    @required this.hoverColor,
     @required this.additionalConstraints,
     this.onChanged,
     @required this.vsync,
+    @required this.hasFocus,
+    @required this.hovering,
   }) : assert(selected != null),
        assert(activeColor != null),
        assert(inactiveColor != null),
@@ -218,8 +312,12 @@ class _RadioRenderObjectWidget extends LeafRenderObjectWidget {
        super(key: key);
 
   final bool selected;
+  final bool hasFocus;
+  final bool hovering;
   final Color inactiveColor;
   final Color activeColor;
+  final Color focusColor;
+  final Color hoverColor;
   final ValueChanged<bool> onChanged;
   final TickerProvider vsync;
   final BoxConstraints additionalConstraints;
@@ -229,9 +327,13 @@ class _RadioRenderObjectWidget extends LeafRenderObjectWidget {
     value: selected,
     activeColor: activeColor,
     inactiveColor: inactiveColor,
+    focusColor: focusColor,
+    hoverColor: hoverColor,
     onChanged: onChanged,
     vsync: vsync,
     additionalConstraints: additionalConstraints,
+    hasFocus: hasFocus,
+    hovering: hovering,
   );
 
   @override
@@ -240,9 +342,13 @@ class _RadioRenderObjectWidget extends LeafRenderObjectWidget {
       ..value = selected
       ..activeColor = activeColor
       ..inactiveColor = inactiveColor
+      ..focusColor = focusColor
+      ..hoverColor = hoverColor
       ..onChanged = onChanged
       ..additionalConstraints = additionalConstraints
-      ..vsync = vsync;
+      ..vsync = vsync
+      ..hasFocus = hasFocus
+      ..hovering = hovering;
   }
 }
 
@@ -251,17 +357,25 @@ class _RenderRadio extends RenderToggleable {
     bool value,
     Color activeColor,
     Color inactiveColor,
+    Color focusColor,
+    Color hoverColor,
     ValueChanged<bool> onChanged,
     BoxConstraints additionalConstraints,
     @required TickerProvider vsync,
+    bool hasFocus,
+    bool hovering,
   }) : super(
          value: value,
          tristate: false,
          activeColor: activeColor,
          inactiveColor: inactiveColor,
+         focusColor: focusColor,
+         hoverColor: hoverColor,
          onChanged: onChanged,
          additionalConstraints: additionalConstraints,
          vsync: vsync,
+         hasFocus: hasFocus,
+         hovering: hovering,
        );
 
   @override

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

@@ -10,9 +10,15 @@ import 'package:flutter/scheduler.dart';
 
 import 'constants.dart';
 
+// Duration of the animation that moves the toggle from one state to another.
 const Duration _kToggleDuration = Duration(milliseconds: 200);
+
+// Radius of the radial reaction over time.
 final Animatable<double> _kRadialReactionRadiusTween = Tween<double>(begin: 0.0, end: kRadialReactionRadius);
 
+// Duration of the fade animation for the reaction when focus and hover occur.
+const Duration _kReactionFadeDuration = Duration(milliseconds: 50);
+
 /// A base class for material style toggleable controls with toggle animations.
 ///
 /// This class handles storing the current value, dispatching ValueChanged on a
@@ -28,9 +34,13 @@ abstract class RenderToggleable extends RenderConstrainedBox {
     bool tristate = false,
     @required Color activeColor,
     @required Color inactiveColor,
+    Color hoverColor,
+    Color focusColor,
     ValueChanged<bool> onChanged,
     BoxConstraints additionalConstraints,
     @required TickerProvider vsync,
+    bool hasFocus = false,
+    bool hovering = false,
   }) : assert(tristate != null),
        assert(tristate || value != null),
        assert(activeColor != null),
@@ -40,7 +50,11 @@ abstract class RenderToggleable extends RenderConstrainedBox {
        _tristate = tristate,
        _activeColor = activeColor,
        _inactiveColor = inactiveColor,
+       _hoverColor = hoverColor ?? activeColor.withAlpha(kRadialReactionAlpha),
+       _focusColor = focusColor ?? activeColor.withAlpha(kRadialReactionAlpha),
        _onChanged = onChanged,
+       _hasFocus = hasFocus,
+       _hovering = hovering,
        _vsync = vsync,
        super(additionalConstraints: additionalConstraints) {
     _tap = TapGestureRecognizer()
@@ -66,6 +80,24 @@ abstract class RenderToggleable extends RenderConstrainedBox {
       parent: _reactionController,
       curve: Curves.fastOutSlowIn,
     )..addListener(markNeedsPaint);
+    _reactionHoverFadeController = AnimationController(
+      duration: _kReactionFadeDuration,
+      value: hovering || hasFocus ? 1.0 : 0.0,
+      vsync: vsync,
+    );
+    _reactionHoverFade = CurvedAnimation(
+      parent: _reactionHoverFadeController,
+      curve: Curves.fastOutSlowIn,
+    )..addListener(markNeedsPaint);
+    _reactionFocusFadeController = AnimationController(
+      duration: _kReactionFadeDuration,
+      value: hovering || hasFocus ? 1.0 : 0.0,
+      vsync: vsync,
+    );
+    _reactionFocusFade = CurvedAnimation(
+      parent: _reactionFocusFadeController,
+      curve: Curves.fastOutSlowIn,
+    )..addListener(markNeedsPaint);
   }
 
   /// Used by subclasses to manipulate the visual value of the control.
@@ -102,6 +134,66 @@ abstract class RenderToggleable extends RenderConstrainedBox {
   AnimationController _reactionController;
   Animation<double> _reaction;
 
+  /// Used by subclasses to control the radial reaction's opacity animation for
+  /// [hasFocus] changes.
+  ///
+  /// Some controls have a radial ink reaction to focus. This animation
+  /// controller can be used to start or stop these ink reaction fade-ins and
+  /// fade-outs.
+  ///
+  /// Subclasses should call [paintRadialReaction] to actually paint the radial
+  /// reaction.
+  @protected
+  AnimationController get reactionFocusFadeController => _reactionFocusFadeController;
+  AnimationController _reactionFocusFadeController;
+  Animation<double> _reactionFocusFade;
+
+  /// Used by subclasses to control the radial reaction's opacity animation for
+  /// [hovering] changes.
+  ///
+  /// Some controls have a radial ink reaction to pointer hover. This animation
+  /// controller can be used to start or stop these ink reaction fade-ins and
+  /// fade-outs.
+  ///
+  /// Subclasses should call [paintRadialReaction] to actually paint the radial
+  /// reaction.
+  @protected
+  AnimationController get reactionHoverFadeController => _reactionHoverFadeController;
+  AnimationController _reactionHoverFadeController;
+  Animation<double> _reactionHoverFade;
+
+  /// True if this toggleable has the input focus.
+  bool get hasFocus => _hasFocus;
+  bool _hasFocus;
+  set hasFocus(bool value) {
+    assert(value != null);
+    if (value == _hasFocus)
+      return;
+    _hasFocus = value;
+    if (_hasFocus) {
+      _reactionFocusFadeController.forward();
+    } else {
+      _reactionFocusFadeController.reverse();
+    }
+    markNeedsPaint();
+  }
+
+  /// True if this toggleable is being hovered over by a pointer.
+  bool get hovering => _hovering;
+  bool _hovering;
+  set hovering(bool value) {
+    assert(value != null);
+    if (value == _hovering)
+      return;
+    _hovering = value;
+    if (_hovering) {
+      _reactionHoverFadeController.forward();
+    } else {
+      _reactionHoverFadeController.reverse();
+    }
+    markNeedsPaint();
+  }
+
   /// The [TickerProvider] for the [AnimationController]s that run the animations.
   TickerProvider get vsync => _vsync;
   TickerProvider _vsync;
@@ -192,6 +284,54 @@ abstract class RenderToggleable extends RenderConstrainedBox {
     markNeedsPaint();
   }
 
+  /// The color that should be used for the reaction when [hovering] is true.
+  ///
+  /// Used when the toggleable needs to change the reaction color/transparency,
+  /// when it is being hovered over.
+  ///
+  /// Defaults to the [activeColor] at alpha [kRadialReactionAlpha].
+  Color get hoverColor => _hoverColor;
+  Color _hoverColor;
+  set hoverColor(Color value) {
+    assert(value != null);
+    if (value == _hoverColor)
+      return;
+    _hoverColor = value;
+    markNeedsPaint();
+  }
+
+  /// The color that should be used for the reaction when [hasFocus] is true.
+  ///
+  /// Used when the toggleable needs to change the reaction color/transparency,
+  /// when it has focus.
+  ///
+  /// Defaults to the [activeColor] at alpha [kRadialReactionAlpha].
+  Color get focusColor => _focusColor;
+  Color _focusColor;
+  set focusColor(Color value) {
+    assert(value != null);
+    if (value == _focusColor)
+      return;
+    _focusColor = value;
+    markNeedsPaint();
+  }
+
+  /// The color that should be used for the reaction when drawn.
+  ///
+  /// Used when the toggleable needs to change the reaction color/transparency
+  /// that is displayed when the toggleable is toggled by a tap.
+  ///
+  /// Defaults to the [activeColor] at alpha [kRadialReactionAlpha].
+  Color get reactionColor => _reactionColor;
+  Color _reactionColor;
+  set reactionColor(Color value) {
+    assert(value != null);
+    if (value == _reactionColor)
+      return;
+    _reactionColor = value;
+    markNeedsPaint();
+  }
+
   /// Called when the control changes value.
   ///
   /// If the control is tapped, [onChanged] is called immediately with the new
@@ -323,12 +463,18 @@ abstract class RenderToggleable extends RenderConstrainedBox {
   /// point at which the user interacted with the control, which is handled
   /// automatically).
   void paintRadialReaction(Canvas canvas, Offset offset, Offset origin) {
-    if (!_reaction.isDismissed) {
-      // TODO(abarth): We should have a different reaction color when position is zero.
-      final Paint reactionPaint = Paint()..color = activeColor.withAlpha(kRadialReactionAlpha);
+    if (!_reaction.isDismissed || !_reactionFocusFade.isDismissed || !_reactionHoverFade.isDismissed) {
+      final Paint reactionPaint = Paint()
+        ..color = Color.lerp(
+          Color.lerp(activeColor.withAlpha(kRadialReactionAlpha), hoverColor, _reactionHoverFade.value),
+          focusColor,
+          _reactionFocusFade.value,
+        );
       final Offset center = Offset.lerp(_downPosition ?? origin, origin, _reaction.value);
-      final double radius = _kRadialReactionRadiusTween.evaluate(_reaction);
-      canvas.drawCircle(center + offset, radius, reactionPaint);
+      final double reactionRadius = hasFocus || hovering
+          ? kRadialReactionRadius
+          : _kRadialReactionRadiusTween.evaluate(_reaction);
+      canvas.drawCircle(center + offset, reactionRadius, reactionPaint);
     }
   }
 

packages/flutter/lib/src/widgets/actions.dart

@@ -376,8 +376,8 @@ class DoNothingAction extends Action {
 /// An action that invokes the currently focused control.
 ///
 /// This is an abstract class that serves as a base class for actions that
-/// activate a control. It is bound to [LogicalKeyboardKey.enter] in the default
-/// keyboard map in [WidgetsApp].
+/// activate a control. By default, is bound to [LogicalKeyboardKey.enter] in
+/// the default keyboard map in [WidgetsApp].
 abstract class ActivateAction extends Action {
   /// Creates a [ActivateAction] with a fixed [key];
   const ActivateAction() : super(key);
@@ -385,3 +385,16 @@ abstract class ActivateAction extends Action {
   /// The [LocalKey] that uniquely identifies this action.
   static const LocalKey key = ValueKey<Type>(ActivateAction);
 }
+
+/// An action that selects the currently focused control.
+///
+/// This is an abstract class that serves as a base class for actions that
+/// select something, like a checkbox or a radio button. By default, it is bound
+/// to [LogicalKeyboardKey.space] in the default keyboard map in [WidgetsApp].
+abstract class SelectAction extends Action {
+  /// Creates a [SelectAction] with a fixed [key];
+  const SelectAction() : super(key);
+
+  /// The [LocalKey] that uniquely identifies this action.
+  static const LocalKey key = ValueKey<Type>(SelectAction);
+}

packages/flutter/lib/src/widgets/app.dart

@@ -1048,6 +1048,7 @@ class _WidgetsAppState extends State<WidgetsApp> with WidgetsBindingObserver {
     LogicalKeySet(LogicalKeyboardKey.arrowDown): const DirectionalFocusIntent(TraversalDirection.down),
     LogicalKeySet(LogicalKeyboardKey.arrowUp): const DirectionalFocusIntent(TraversalDirection.up),
     LogicalKeySet(LogicalKeyboardKey.enter): const Intent(ActivateAction.key),
+    LogicalKeySet(LogicalKeyboardKey.space): const Intent(SelectAction.key),
   };
 
   final Map<LocalKey, ActionFactory> _actionMap = <LocalKey, ActionFactory>{

packages/flutter/lib/src/widgets/focus_manager.dart

@@ -897,8 +897,8 @@ class FocusNode with DiagnosticableTreeMixin, ChangeNotifier {
     super.debugFillProperties(properties);
     properties.add(DiagnosticsProperty<BuildContext>('context', context, defaultValue: null));
     properties.add(FlagProperty('canRequestFocus', value: canRequestFocus, ifFalse: 'NOT FOCUSABLE', defaultValue: true));
-    properties.add(FlagProperty('hasFocus', value: hasFocus, ifTrue: 'FOCUSED', defaultValue: false));
-    properties.add(StringProperty('debugLabel', debugLabel, defaultValue: null));
+    properties.add(FlagProperty('hasFocus', value: hasFocus && !hasPrimaryFocus, ifTrue: 'IN FOCUS PATH', defaultValue: false));
+    properties.add(FlagProperty('hasPrimaryFocus', value: hasPrimaryFocus, ifTrue: 'PRIMARY FOCUS', defaultValue: false));
   }
 
   @override

packages/flutter/test/material/dropdown_test.dart

@@ -6,6 +6,7 @@ import 'dart:math' as math;
 import 'dart:ui' show window;
 
 import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
@@ -2433,7 +2434,7 @@ void main() {
     expect(find.byKey(buttonKey), isNot(paints ..rrect(rrect: const RRect.fromLTRBXY(0.0, 0.0, 104.0, 48.0, 4.0, 4.0), color: const Color(0xff00ff00))));
   });
 
-  testWidgets('DropdownButton is activated with the enter key', (WidgetTester tester) async {
+  testWidgets('DropdownButton is activated with the enter/space key', (WidgetTester tester) async {
     final FocusNode focusNode = FocusNode(debugLabel: 'DropdownButton');
     String value = 'one';
     void didChangeValue(String newValue) {
@@ -2471,16 +2472,17 @@ void main() {
     await tester.pump(); // Pump a frame for autofocus to take effect.
     expect(focusNode.hasPrimaryFocus, isTrue);
 
-    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+    // Web doesn't respond to enter, only space.
+    await tester.sendKeyEvent(kIsWeb ? LogicalKeyboardKey.space : LogicalKeyboardKey.enter);
     await tester.pump();
     await tester.pump(const Duration(seconds: 1)); // finish the menu animation
     expect(value, equals('one'));
 
-    await tester.sendKeyEvent(LogicalKeyboardKey.tab); // Focus 'one'
+    await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown); // Focus 'one'
     await tester.pump();
-    await tester.sendKeyEvent(LogicalKeyboardKey.tab); // Focus 'two'
+    await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown); // Focus 'two'
     await tester.pump();
-    await tester.sendKeyEvent(LogicalKeyboardKey.enter); // Select 'two'
+    await tester.sendKeyEvent(LogicalKeyboardKey.enter); // Select 'two', should work on web too.
     await tester.pump();
 
     await tester.pump();

packages/flutter/test/material/ink_paint_test.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
@@ -252,51 +253,48 @@ void main() {
     await gesture.up();
   }, skip: isBrowser);
 
-  testWidgets('The InkWell widget renders an ActivateAction-induced ink ripple', (WidgetTester tester) async {
+  testWidgets('The InkWell widget renders an SelectAction or ActivateAction-induced ink ripple', (WidgetTester tester) async {
     const Color highlightColor = Color(0xAAFF0000);
     const Color splashColor = Color(0xB40000FF);
     final BorderRadius borderRadius = BorderRadius.circular(6.0);
 
     final FocusNode focusNode = FocusNode(debugLabel: 'Test Node');
-    await tester.pumpWidget(
-      Shortcuts(
-        shortcuts: <LogicalKeySet, Intent>{
-          LogicalKeySet(LogicalKeyboardKey.enter): const Intent(ActivateAction.key),
-        },
-        child: Directionality(
-          textDirection: TextDirection.ltr,
-          child: Material(
-            child: Center(
-              child: Container(
-                width: 100.0,
-                height: 100.0,
-                child: InkWell(
-                  borderRadius: borderRadius,
-                  highlightColor: highlightColor,
-                  splashColor: splashColor,
-                  focusNode: focusNode,
-                  onTap: () { },
-                  radius: 100.0,
-                  splashFactory: InkRipple.splashFactory,
+    Future<void> buildTest(Key actionKey) async {
+      return await tester.pumpWidget(
+        Shortcuts(
+          shortcuts: <LogicalKeySet, Intent>{
+            LogicalKeySet(LogicalKeyboardKey.space): Intent(actionKey),
+          },
+          child: Directionality(
+            textDirection: TextDirection.ltr,
+            child: Material(
+              child: Center(
+                child: Container(
+                  width: 100.0,
+                  height: 100.0,
+                  child: InkWell(
+                    borderRadius: borderRadius,
+                    highlightColor: highlightColor,
+                    splashColor: splashColor,
+                    focusNode: focusNode,
+                    onTap: () { },
+                    radius: 100.0,
+                    splashFactory: InkRipple.splashFactory,
+                  ),
                 ),
               ),
             ),
           ),
         ),
-      ),
-    );
-
-    final Offset topLeft = tester.getTopLeft(find.byType(InkWell));
-    final Offset inkWellCenter = tester.getCenter(find.byType(InkWell)) - topLeft;
+      );
+    }
 
-    // Now activate it with a keypress.
+    await buildTest(ActivateAction.key);
     focusNode.requestFocus();
     await tester.pumpAndSettle();
 
-    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
-    await tester.pump();
-
-    final RenderBox box = Material.of(tester.element(find.byType(InkWell))) as dynamic;
+    final Offset topLeft = tester.getTopLeft(find.byType(InkWell));
+    final Offset inkWellCenter = tester.getCenter(find.byType(InkWell)) - topLeft;
 
     bool offsetsAreClose(Offset a, Offset b) => (a - b).distance < 1.0;
     bool radiiAreClose(double a, double b) => (a - b).abs() < 1.0;
@@ -324,6 +322,47 @@ void main() {
         );
     }
 
+    // Now activate it with a keypress.
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pump();
+
+    RenderBox box = Material.of(tester.element(find.byType(InkWell))) as dynamic;
+
+    if (kIsWeb) {
+      expect(box, isNot(ripplePattern(30.0, 0)));
+    } else {
+      // ripplePattern always add a translation of topLeft.
+      expect(box, ripplePattern(30.0, 0));
+
+      // The ripple fades in for 75ms. During that time its alpha is eased from
+      // 0 to the splashColor's alpha value.
+      await tester.pump(const Duration(milliseconds: 50));
+      expect(box, ripplePattern(56.0, 120));
+
+      // At 75ms the ripple has faded in: it's alpha matches the splashColor's
+      // alpha.
+      await tester.pump(const Duration(milliseconds: 25));
+      expect(box, ripplePattern(73.0, 180));
+
+      // At this point the splash radius has expanded to its limit: 5 past the
+      // ink well's radius parameter. The fade-out is about to start.
+      // The fade-out begins at 225ms = 50ms + 25ms + 150ms.
+      await tester.pump(const Duration(milliseconds: 150));
+      expect(box, ripplePattern(105.0, 180));
+
+      // After another 150ms the fade-out is complete.
+      await tester.pump(const Duration(milliseconds: 150));
+      expect(box, ripplePattern(105.0, 0));
+    }
+
+    // Now try it with a select action instead.
+    await buildTest(SelectAction.key);
+    await tester.pumpAndSettle();
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pump();
+
+    box = Material.of(tester.element(find.byType(InkWell))) as dynamic;
+
     // ripplePattern always add a translation of topLeft.
     expect(box, ripplePattern(30.0, 0));
 

packages/flutter/test/material/radio_test.dart

@@ -4,11 +4,13 @@
 
 import 'dart:ui';
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:flutter/material.dart';
 
+import '../rendering/mock_canvas.dart';
 import '../widgets/semantics_tester.dart';
 
 void main() {
@@ -131,6 +133,7 @@ void main() {
             SemanticsFlag.hasCheckedState,
             SemanticsFlag.hasEnabledState,
             SemanticsFlag.isEnabled,
+            SemanticsFlag.isFocusable,
           ],
           actions: <SemanticsAction>[
             SemanticsAction.tap,
@@ -157,6 +160,7 @@ void main() {
             SemanticsFlag.isChecked,
             SemanticsFlag.hasEnabledState,
             SemanticsFlag.isEnabled,
+            SemanticsFlag.isFocusable,
           ],
           actions: <SemanticsAction>[
             SemanticsAction.tap,
@@ -181,6 +185,7 @@ void main() {
             SemanticsFlag.isInMutuallyExclusiveGroup,
             SemanticsFlag.hasCheckedState,
             SemanticsFlag.hasEnabledState,
+            SemanticsFlag.isFocusable,
           ],
         ),
       ],
@@ -232,7 +237,7 @@ void main() {
     ));
 
     await tester.tap(find.byKey(key));
-    final RenderObject object = tester.firstRenderObject(find.byKey(key));
+    final RenderObject object = tester.firstRenderObject(find.byType(Focus));
 
     expect(radioValue, 1);
     expect(semanticEvent, <String, dynamic>{
@@ -279,5 +284,240 @@ void main() {
       matchesGoldenFile('radio.ink_ripple.png'),
     );
   }, skip: isBrowser);
+
+  testWidgets('Radio is focusable and has correct focus color', (WidgetTester tester) async {
+    final FocusNode focusNode = FocusNode(debugLabel: 'Radio');
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    int groupValue = 0;
+    const Key radioKey = Key('radio');
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Container(
+                width: 100,
+                height: 100,
+                color: Colors.white,
+                child: Radio<int>(
+                  key: radioKey,
+                  value: 0,
+                  onChanged: enabled ? (int newValue) {
+                    setState(() {
+                      groupValue = newValue;
+                    });
+                  } : null,
+                  focusColor: Colors.orange[500],
+                  autofocus: true,
+                  focusNode: focusNode,
+                  groupValue: groupValue,
+                ),
+              );
+            }),
+          ),
+        ),
+      );
+    }
+    await tester.pumpWidget(buildApp());
+
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isTrue);
+    expect(
+      Material.of(tester.element(find.byKey(radioKey))),
+      paints
+        ..rect(
+            color: const Color(0xffffffff),
+            rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+        ..circle(color: Colors.orange[500])
+        ..circle(color: const Color(0xff1e88e5))
+        ..circle(color: const Color(0xff1e88e5)),
+    );
+
+    // Check when the radio isn't selected.
+    groupValue = 1;
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isTrue);
+    expect(
+      Material.of(tester.element(find.byKey(radioKey))),
+      paints
+        ..rect(
+            color: const Color(0xffffffff),
+            rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+        ..circle(color: Colors.orange[500])
+        ..circle(color: const Color(0x8a000000), style: PaintingStyle.stroke, strokeWidth: 2.0)
+    );
+
+    // Check when the radio is selected, but disabled.
+    groupValue = 0;
+    await tester.pumpWidget(buildApp(enabled: false));
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isFalse);
+    expect(
+      Material.of(tester.element(find.byKey(radioKey))),
+      paints
+        ..rect(
+            color: const Color(0xffffffff),
+            rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+        ..circle(color: const Color(0x61000000))
+        ..circle(color: const Color(0x61000000)),
+    );
+  });
+
+  testWidgets('Radio can be hovered and has correct focus color', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    int groupValue = 0;
+    const Key radioKey = Key('radio');
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Container(
+                width: 100,
+                height: 100,
+                color: Colors.white,
+                child: Radio<int>(
+                  key: radioKey,
+                  value: 0,
+                  onChanged: enabled ? (int newValue) {
+                    setState(() {
+                      groupValue = newValue;
+                    });
+                  } : null,
+                  hoverColor: Colors.orange[500],
+                  groupValue: groupValue,
+                ),
+              );
+            }),
+          ),
+        ),
+      );
+    }
+    await tester.pumpWidget(buildApp());
+
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byKey(radioKey))),
+      paints
+        ..rect(
+            color: const Color(0xffffffff),
+            rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+        ..circle(color: const Color(0xff1e88e5))
+        ..circle(color: const Color(0xff1e88e5)),
+    );
+
+    // Start hovering
+    final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+    addTearDown(gesture.removePointer);
+    await gesture.moveTo(tester.getCenter(find.byKey(radioKey)));
+
+    // Check when the radio isn't selected.
+    groupValue = 1;
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    expect(
+        Material.of(tester.element(find.byKey(radioKey))),
+        paints
+          ..rect(
+              color: const Color(0xffffffff),
+              rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+          ..circle(color: Colors.orange[500])
+          ..circle(color: const Color(0x8a000000), style: PaintingStyle.stroke, strokeWidth: 2.0)
+    );
+
+    // Check when the radio is selected, but disabled.
+    groupValue = 0;
+    await tester.pumpWidget(buildApp(enabled: false));
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byKey(radioKey))),
+      paints
+        ..rect(
+            color: const Color(0xffffffff),
+            rect: const Rect.fromLTRB(350.0, 250.0, 450.0, 350.0))
+        ..circle(color: const Color(0x61000000))
+        ..circle(color: const Color(0x61000000)),
+    );
+  });
+
+  testWidgets('Radio can be toggled by keyboard shortcuts', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    int groupValue = 1;
+    const Key radioKey0 = Key('radio0');
+    const Key radioKey1 = Key('radio1');
+    const Key radioKey2 = Key('radio2');
+    final FocusNode focusNode2 = FocusNode(debugLabel: 'radio2');
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Container(
+                width: 200,
+                height: 100,
+                color: Colors.white,
+                child: Row(
+                  children: <Widget>[
+                    Radio<int>(
+                      key: radioKey0,
+                      value: 0,
+                      onChanged: enabled ? (int newValue) {
+                        setState(() {
+                          groupValue = newValue;
+                        });
+                      } : null,
+                      hoverColor: Colors.orange[500],
+                      groupValue: groupValue,
+                      autofocus: true,
+                    ),
+                    Radio<int>(
+                      key: radioKey1,
+                      value: 1,
+                      onChanged: enabled ? (int newValue) {
+                        setState(() {
+                          groupValue = newValue;
+                        });
+                      } : null,
+                      hoverColor: Colors.orange[500],
+                      groupValue: groupValue,
+                    ),
+                    Radio<int>(
+                      key: radioKey2,
+                      value: 2,
+                      onChanged: enabled ? (int newValue) {
+                        setState(() {
+                          groupValue = newValue;
+                        });
+                      } : null,
+                      hoverColor: Colors.orange[500],
+                      groupValue: groupValue,
+                      focusNode: focusNode2,
+                    ),
+                  ],
+                ),
+              );
+            }),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+    await tester.pumpAndSettle();
+    // On web, radios don't respond to the enter key.
+    expect(groupValue, kIsWeb ? equals(1) : equals(0));
+
+    focusNode2.requestFocus();
+    await tester.pumpAndSettle();
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pumpAndSettle();
+    expect(groupValue, equals(2));
+  });
+
 }
 

packages/flutter/test/material/raw_material_button_test.dart

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@@ -47,6 +48,7 @@ void main() {
       Shortcuts(
         shortcuts: <LogicalKeySet, Intent>{
           LogicalKeySet(LogicalKeyboardKey.enter): const Intent(ActivateAction.key),
+          LogicalKeySet(LogicalKeyboardKey.space): const Intent(SelectAction.key),
         },
         child: Directionality(
           textDirection: TextDirection.ltr,
@@ -65,15 +67,41 @@ void main() {
     focusNode.requestFocus();
     await tester.pump();
 
+    // Web doesn't react to enter, just space.
     await tester.sendKeyEvent(LogicalKeyboardKey.enter);
     await tester.pump(const Duration(milliseconds: 10));
 
+    if (!kIsWeb) {
+      final RenderBox splash = Material.of(tester.element(find.byType(InkWell))) as dynamic;
+      expect(splash, paints..circle(color: splashColor));
+    }
+
+    await tester.pumpAndSettle();
+
+    expect(pressed, kIsWeb ? isFalse : isTrue);
+
+    pressed = false;
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pumpAndSettle();
+
+    expect(pressed, isTrue);
+
+    pressed = false;
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pump(const Duration(milliseconds: 10));
+
     final RenderBox splash = Material.of(tester.element(find.byType(InkWell))) as dynamic;
     expect(splash, paints..circle(color: splashColor));
 
     await tester.pumpAndSettle();
 
     expect(pressed, isTrue);
+
+    pressed = false;
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pumpAndSettle();
+
+    expect(pressed, isTrue);
   });
 
   testWidgets('materialTapTargetSize.padded expands hit test area', (WidgetTester tester) async {

packages/flutter/test/material/switch_test.dart

@@ -3,11 +3,12 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
-import 'package:flutter/gestures.dart';
 
 import '../rendering/mock_canvas.dart';
 import '../widgets/semantics_tester.dart';
@@ -518,7 +519,7 @@ void main() {
       ),
     );
     await tester.tap(find.byType(Switch));
-    final RenderObject object = tester.firstRenderObject(find.byType(Switch));
+    final RenderObject object = tester.firstRenderObject(find.byType(Focus));
 
     expect(value, true);
     expect(semanticEvent, <String, dynamic>{
@@ -623,4 +624,199 @@ void main() {
 
   });
 
+  testWidgets('Switch is focusable and has correct focus color', (WidgetTester tester) async {
+    final FocusNode focusNode = FocusNode(debugLabel: 'Switch');
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    bool value = true;
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Switch(
+                value: value,
+                onChanged: enabled ? (bool newValue) {
+                  setState(() {
+                    value = newValue;
+                  });
+                } : null,
+                focusColor: Colors.orange[500],
+                autofocus: true,
+                focusNode: focusNode,
+              );
+            }),
+          ),
+        ),
+      );
+    }
+    await tester.pumpWidget(buildApp());
+
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isTrue);
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x801e88e5),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: Colors.orange[500])
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xff1e88e5)),
+    );
+
+    // Check the false value.
+    value = false;
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isTrue);
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x52000000),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: Colors.orange[500])
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xfffafafa)),
+    );
+
+    // Check what happens when disabled.
+    value = false;
+    await tester.pumpWidget(buildApp(enabled: false));
+    await tester.pumpAndSettle();
+    expect(focusNode.hasPrimaryFocus, isFalse);
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x1f000000),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xffbdbdbd)),
+    );
+  });
+
+  testWidgets('Switch can be hovered and has correct hover color', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    bool value = true;
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Switch(
+                value: value,
+                onChanged: enabled ? (bool newValue) {
+                  setState(() {
+                    value = newValue;
+                  });
+                } : null,
+                hoverColor: Colors.orange[500],
+              );
+            }),
+          ),
+        ),
+      );
+    }
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x801e88e5),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xff1e88e5)),
+    );
+
+    // Start hovering
+    final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+    addTearDown(gesture.removePointer);
+    await gesture.moveTo(tester.getCenter(find.byType(Switch)));
+
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x801e88e5),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: Colors.orange[500])
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xff1e88e5)),
+    );
+
+    // Check what happens when disabled.
+    await tester.pumpWidget(buildApp(enabled: false));
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints
+        ..rrect(
+            color: const Color(0x1f000000),
+            rrect: RRect.fromLTRBR(
+                383.5, 293.0, 416.5, 307.0, const Radius.circular(7.0)))
+        ..circle(color: const Color(0x33000000))
+        ..circle(color: const Color(0x24000000))
+        ..circle(color: const Color(0x1f000000))
+        ..circle(color: const Color(0xffbdbdbd)),
+    );
+  });
+
+  testWidgets('Switch can be toggled by keyboard shortcuts', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    bool value = true;
+    Widget buildApp({bool enabled = true}) {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+              return Switch(
+                value: value,
+                onChanged: enabled ? (bool newValue) {
+                  setState(() {
+                    value = newValue;
+                  });
+                } : null,
+                focusColor: Colors.orange[500],
+                autofocus: true,
+              );
+            }),
+          ),
+        ),
+      );
+    }
+    await tester.pumpWidget(buildApp());
+    await tester.pumpAndSettle();
+    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+    await tester.pumpAndSettle();
+    // On web, switches don't respond to the enter key.
+    expect(value, kIsWeb ? isTrue : isFalse);
+    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+    await tester.pumpAndSettle();
+    expect(value, isTrue);
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pumpAndSettle();
+    expect(value, isFalse);
+    await tester.sendKeyEvent(LogicalKeyboardKey.space);
+    await tester.pumpAndSettle();
+    expect(value, isTrue);
+  });
 }

packages/flutter/test/widgets/focus_manager_test.dart

@@ -66,9 +66,12 @@ void main() {
       FocusNode(
         debugLabel: 'Label',
       ).debugFillProperties(builder);
-      final List<String> description = builder.properties.where((DiagnosticsNode n) => !n.isFiltered(DiagnosticLevel.info)).map((DiagnosticsNode n) => n.toString()).toList();
+      final List<String> description = builder.properties.map((DiagnosticsNode n) => n.toString()).toList();
       expect(description, <String>[
-        'debugLabel: "Label"',
+        'context: null',
+        'canRequestFocus: true',
+        'hasFocus: false',
+        'hasPrimaryFocus: false'
       ]);
     });
   });
@@ -621,9 +624,12 @@ void main() {
       FocusScopeNode(
         debugLabel: 'Scope Label',
       ).debugFillProperties(builder);
-      final List<String> description = builder.properties.where((DiagnosticsNode n) => !n.isFiltered(DiagnosticLevel.info)).map((DiagnosticsNode n) => n.toString()).toList();
+      final List<String> description = builder.properties.map((DiagnosticsNode n) => n.toString()).toList();
       expect(description, <String>[
-        'debugLabel: "Scope Label"',
+        'context: null',
+        'canRequestFocus: true',
+        'hasFocus: false',
+        'hasPrimaryFocus: false'
       ]);
     });
     testWidgets('debugDescribeFocusTree produces correct output', (WidgetTester tester) async {
@@ -663,43 +669,36 @@ void main() {
           ' │ primaryFocusCreator: Container-[GlobalKey#00000] ← [root]\n'
           ' │\n'
           ' └─rootScope: FocusScopeNode#00000(Root Focus Scope)\n'
-          '   │ FOCUSED\n'
-          '   │ debugLabel: "Root Focus Scope"\n'
+          '   │ IN FOCUS PATH\n'
           '   │ focusedChildren: FocusScopeNode#00000\n'
           '   │\n'
           '   ├─Child 1: FocusScopeNode#00000(Scope 1)\n'
           '   │ │ context: Container-[GlobalKey#00000]\n'
-          '   │ │ debugLabel: "Scope 1"\n'
           '   │ │\n'
           '   │ └─Child 1: FocusNode#00000(Parent 1)\n'
           '   │   │ context: Container-[GlobalKey#00000]\n'
-          '   │   │ debugLabel: "Parent 1"\n'
           '   │   │\n'
           '   │   ├─Child 1: FocusNode#00000(Child 1)\n'
           '   │   │   context: Container-[GlobalKey#00000]\n'
-          '   │   │   debugLabel: "Child 1"\n'
           '   │   │\n'
           '   │   └─Child 2: FocusNode#00000\n'
           '   │       context: Container-[GlobalKey#00000]\n'
           '   │\n'
           '   └─Child 2: FocusScopeNode#00000\n'
           '     │ context: Container-[GlobalKey#00000]\n'
-          '     │ FOCUSED\n'
+          '     │ IN FOCUS PATH\n'
           '     │ focusedChildren: FocusNode#00000(Child 4)\n'
           '     │\n'
           '     └─Child 1: FocusNode#00000(Parent 2)\n'
           '       │ context: Container-[GlobalKey#00000]\n'
-          '       │ FOCUSED\n'
-          '       │ debugLabel: "Parent 2"\n'
+          '       │ IN FOCUS PATH\n'
           '       │\n'
           '       ├─Child 1: FocusNode#00000(Child 3)\n'
           '       │   context: Container-[GlobalKey#00000]\n'
-          '       │   debugLabel: "Child 3"\n'
           '       │\n'
           '       └─Child 2: FocusNode#00000(Child 4)\n'
           '           context: Container-[GlobalKey#00000]\n'
-          '           FOCUSED\n'
-          '           debugLabel: "Child 4"\n'
+          '           PRIMARY FOCUS\n'
         ));
     });
   });

packages/flutter/test/widgets/focus_scope_test.dart

@@ -229,34 +229,29 @@ void main() {
         parentFocusScope.toStringDeep(),
         equalsIgnoringHashCodes('FocusScopeNode#00000(Parent Scope Node)\n'
             ' │ context: FocusScope\n'
-            ' │ FOCUSED\n'
-            ' │ debugLabel: "Parent Scope Node"\n'
+            ' │ IN FOCUS PATH\n'
             ' │ focusedChildren: FocusNode#00000(Child)\n'
             ' │\n'
             ' └─Child 1: FocusNode#00000(Child)\n'
             '     context: Focus\n'
-            '     FOCUSED\n'
-            '     debugLabel: "Child"\n'),
+            '     PRIMARY FOCUS\n'),
       );
 
       expect(WidgetsBinding.instance.focusManager.rootScope, hasAGoodToStringDeep);
       expect(
         WidgetsBinding.instance.focusManager.rootScope.toStringDeep(minLevel: DiagnosticLevel.info),
         equalsIgnoringHashCodes('FocusScopeNode#00000(Root Focus Scope)\n'
-            ' │ FOCUSED\n'
-            ' │ debugLabel: "Root Focus Scope"\n'
+            ' │ IN FOCUS PATH\n'
             ' │ focusedChildren: FocusScopeNode#00000(Parent Scope Node)\n'
             ' │\n'
             ' └─Child 1: FocusScopeNode#00000(Parent Scope Node)\n'
             '   │ context: FocusScope\n'
-            '   │ FOCUSED\n'
-            '   │ debugLabel: "Parent Scope Node"\n'
+            '   │ IN FOCUS PATH\n'
             '   │ focusedChildren: FocusNode#00000(Child)\n'
             '   │\n'
             '   └─Child 1: FocusNode#00000(Child)\n'
             '       context: Focus\n'
-            '       FOCUSED\n'
-            '       debugLabel: "Child"\n'),
+            '       PRIMARY FOCUS\n'),
       );
 
       // Add the child focus scope to the focus tree.