widget,widget/material: make Clickable widgets focusable

This change adds focus and keyboard control to Clickable widgets.
They now consider a press of the enter or return key equivalent to
a click. To keep the change simple, the focus indication is the
same as the hover indication.

References: https://todo.sr.ht/~eliasnaur/gio/195
References: https://github.com/tailscale/tailscale/issues/1611
Signed-off-by: Elias Naur <mail@eliasnaur.com>

widget/material/button.go

@@ -132,7 +132,7 @@ func (b ButtonLayoutStyle) Layout(gtx layout.Context, w layout.Widget) layout.Di
 				switch {
 				case gtx.Queue == nil:
 					background = f32color.Disabled(b.Background)
-				case b.Button.Hovered():
+				case b.Button.Hovered() || b.Button.Focused():
 					background = f32color.Hovered(b.Background)
 				}
 				paint.Fill(gtx.Ops, background)
@@ -168,7 +168,7 @@ func (b IconButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 				switch {
 				case gtx.Queue == nil:
 					background = f32color.Disabled(b.Background)
-				case b.Button.Hovered():
+				case b.Button.Hovered() || b.Button.Focused():
 					background = f32color.Hovered(b.Background)
 				}
 				paint.Fill(gtx.Ops, background)

widget/material/checkbox.go

@@ -34,6 +34,6 @@ func CheckBox(th *Theme, checkBox *widget.Bool, label string) CheckBoxStyle {
 func (c CheckBoxStyle) Layout(gtx layout.Context) layout.Dimensions {
 	return c.CheckBox.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
 		semantic.CheckBox.Add(gtx.Ops)
-		return c.layout(gtx, c.CheckBox.Value, c.CheckBox.Hovered())
+		return c.layout(gtx, c.CheckBox.Value, c.CheckBox.Hovered() || c.CheckBox.Focused())
 	})
 }

widget/material/radiobutton.go

@@ -38,8 +38,10 @@ func RadioButton(th *Theme, group *widget.Enum, key, label string) RadioButtonSt
 // Layout updates enum and displays the radio button.
 func (r RadioButtonStyle) Layout(gtx layout.Context) layout.Dimensions {
 	hovered, hovering := r.Group.Hovered()
+	focus, focused := r.Group.Focused()
 	return r.Group.Layout(gtx, r.Key, func(gtx layout.Context) layout.Dimensions {
 		semantic.RadioButton.Add(gtx.Ops)
-		return r.layout(gtx, r.Group.Value == r.Key, hovering && hovered == r.Key)
+		highlight := hovering && hovered == r.Key || focused && focus == r.Key
+		return r.layout(gtx, r.Group.Value == r.Key, highlight)
 	})
 }

widget/material/switch.go

@@ -99,7 +99,7 @@ func (s SwitchStyle) Layout(gtx layout.Context) layout.Dimensions {
 		return clip.Ellipse(b).Op(gtx.Ops)
 	}
 	// Draw hover.
-	if s.Switch.Hovered() {
+	if s.Switch.Hovered() || s.Switch.Focused() {
 		r := 1.7 * thumbRadius
 		background := f32color.MulAlpha(s.Color.Enabled, 70)
 		paint.FillShape(gtx.Ops, background, circle(thumbRadius, thumbRadius, r))