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/bool.go

@@ -23,16 +23,21 @@ func (b *Bool) Changed() bool {
 	return changed
 }
 
-// Hovered returns whether pointer is over the element.
+// Hovered reports whether pointer is over the element.
 func (b *Bool) Hovered() bool {
 	return b.clk.Hovered()
 }
 
-// Pressed returns whether pointer is pressing the element.
+// Pressed reports whether pointer is pressing the element.
 func (b *Bool) Pressed() bool {
 	return b.clk.Pressed()
 }
 
+// Focused reports whether b has focus.
+func (b *Bool) Focused() bool {
+	return b.clk.Focused()
+}
+
 func (b *Bool) History() []Press {
 	return b.clk.History()
 }

widget/button.go

@@ -9,6 +9,7 @@ import (
 	"gioui.org/f32"
 	"gioui.org/gesture"
 	"gioui.org/io/key"
+	"gioui.org/io/pointer"
 	"gioui.org/io/semantic"
 	"gioui.org/layout"
 	"gioui.org/op"
@@ -24,6 +25,9 @@ type Clickable struct {
 	// clicks bounded.
 	prevClicks int
 	history    []Press
+
+	keyTag  struct{}
+	focused bool
 }
 
 // Click represents a click.
@@ -67,16 +71,21 @@ func (b *Clickable) Clicked() bool {
 	return true
 }
 
-// Hovered returns whether pointer is over the element.
+// Hovered reports whether a pointer is over the element.
 func (b *Clickable) Hovered() bool {
 	return b.click.Hovered()
 }
 
-// Pressed returns whether pointer is pressing the element.
+// Pressed reports whether a pointer is pressing the element.
 func (b *Clickable) Pressed() bool {
 	return b.click.Pressed()
 }
 
+// Focused reports whether b has focus.
+func (b *Clickable) Focused() bool {
+	return b.focused
+}
+
 // Clicks returns and clear the clicks since the last call to Clicks.
 func (b *Clickable) Clicks() []Click {
 	clicks := b.clicks
@@ -98,8 +107,12 @@ func (b *Clickable) Layout(gtx layout.Context, w layout.Widget) layout.Dimension
 	dims := w(gtx)
 	c := m.Stop()
 	defer clip.Rect(image.Rectangle{Max: dims.Size}).Push(gtx.Ops).Pop()
-	semantic.DisabledOp(gtx.Queue == nil).Add(gtx.Ops)
+	disabled := gtx.Queue == nil
+	semantic.DisabledOp(disabled).Add(gtx.Ops)
 	b.click.Add(gtx.Ops)
+	if !disabled {
+		key.InputOp{Tag: &b.keyTag}.Add(gtx.Ops)
+	}
 	c.Add(gtx.Ops)
 	for len(b.history) > 0 {
 		c := b.history[0]
@@ -137,10 +150,30 @@ func (b *Clickable) update(gtx layout.Context) {
 				}
 			}
 		case gesture.TypePress:
+			if e.Source == pointer.Mouse {
+				key.FocusOp{Tag: &b.keyTag}.Add(gtx.Ops)
+			}
 			b.history = append(b.history, Press{
 				Position: e.Position,
 				Start:    gtx.Now,
 			})
 		}
 	}
+	for _, e := range gtx.Events(&b.keyTag) {
+		switch e := e.(type) {
+		case key.FocusEvent:
+			b.focused = e.Focus
+		case key.Event:
+			if e.State != key.Press {
+				break
+			}
+			if e.Name != key.NameReturn && e.Name != key.NameSpace {
+				break
+			}
+			b.clicks = append(b.clicks, Click{
+				Modifiers: e.Modifiers,
+				NumClicks: 1,
+			})
+		}
+	}
 }

widget/enum.go

@@ -6,6 +6,8 @@ import (
 	"image"
 
 	"gioui.org/gesture"
+	"gioui.org/io/key"
+	"gioui.org/io/pointer"
 	"gioui.org/io/semantic"
 	"gioui.org/layout"
 	"gioui.org/op"
@@ -17,19 +19,27 @@ type Enum struct {
 	hovered  string
 	hovering bool
 
+	focus   string
+	focused bool
+
 	changed bool
 
-	clicks []gesture.Click
+	keys []*enumKey
-	values []string
 }
 
-func index(vs []string, t string) int {
+type enumKey struct {
-	for i, v := range vs {
+	key   string
-		if v == t {
+	click gesture.Click
-			return i
+	tag   struct{}
+}
+
+func (e *Enum) index(k string) *enumKey {
+	for _, v := range e.keys {
+		if v.key == k {
+			return v
 		}
 	}
-	return -1
+	return nil
 }
 
 // Changed reports whether Value has changed by user interaction since the last
@@ -45,40 +55,75 @@ func (e *Enum) Hovered() (string, bool) {
 	return e.hovered, e.hovering
 }
 
-// Layout adds the event handler for key.
+// Focused reports the focused key, or false if no key is focused.
-func (e *Enum) Layout(gtx layout.Context, key string, content layout.Widget) layout.Dimensions {
+func (e *Enum) Focused() (string, bool) {
+	return e.focus, e.focused
+}
+
+// Layout adds the event handler for the key k.
+func (e *Enum) Layout(gtx layout.Context, k string, content layout.Widget) layout.Dimensions {
 	m := op.Record(gtx.Ops)
 	dims := content(gtx)
 	c := m.Stop()
 	defer clip.Rect(image.Rectangle{Max: dims.Size}).Push(gtx.Ops).Pop()
 
-	if index(e.values, key) == -1 {
+	state := e.index(k)
-		e.values = append(e.values, key)
+	if state == nil {
-		e.clicks = append(e.clicks, gesture.Click{})
+		state = &enumKey{
-		e.clicks[len(e.clicks)-1].Add(gtx.Ops)
+			key: k,
-	} else {
+		}
-		idx := index(e.values, key)
+		e.keys = append(e.keys, state)
-		clk := &e.clicks[idx]
+	}
-		for _, ev := range clk.Events(gtx) {
+	clk := &state.click
-			switch ev.Type {
+	for _, ev := range clk.Events(gtx) {
-			case gesture.TypeClick:
+		switch ev.Type {
-				if new := e.values[idx]; new != e.Value {
+		case gesture.TypePress:
-					e.Value = new
+			if ev.Source == pointer.Mouse {
-					e.changed = true
+				key.FocusOp{Tag: &state.tag}.Add(gtx.Ops)
-				}
+			}
+		case gesture.TypeClick:
+			if state.key != e.Value {
+				e.Value = state.key
+				e.changed = true
 			}
 		}
-		if e.hovering && e.hovered == key {
-			e.hovering = false
-		}
-		if clk.Hovered() {
-			e.hovered = key
-			e.hovering = true
-		}
-		clk.Add(gtx.Ops)
 	}
-	semantic.SelectedOp(key == e.Value).Add(gtx.Ops)
+	for _, ev := range gtx.Events(&state.tag) {
-	semantic.DisabledOp(gtx.Queue == nil).Add(gtx.Ops)
+		switch ev := ev.(type) {
+		case key.FocusEvent:
+			if ev.Focus {
+				e.focused = true
+				e.focus = state.key
+			} else if state.key == e.focus {
+				e.focused = false
+			}
+		case key.Event:
+			if ev.State != key.Press {
+				break
+			}
+			if ev.Name != key.NameEnter && ev.Name != key.NameSpace {
+				break
+			}
+			if state.key != e.Value {
+				e.Value = state.key
+				e.changed = true
+			}
+		}
+	}
+	if clk.Hovered() {
+		e.hovered = k
+		e.hovering = true
+	} else if e.hovered == k {
+		e.hovering = false
+	}
+
+	clk.Add(gtx.Ops)
+	disabled := gtx.Queue == nil
+	if !disabled {
+		key.InputOp{Tag: &state.tag}.Add(gtx.Ops)
+	}
+	semantic.SelectedOp(k == e.Value).Add(gtx.Ops)
+	semantic.DisabledOp(disabled).Add(gtx.Ops)
 	c.Add(gtx.Ops)
 
 	return dims

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))