event-editor/multi-choice: Add focus ring around the entire widget

The current behavior of the widget makes it so keyboard focus
outlines the toggle button rather than the entire widget. In some
cases, the outline touches the edges of the label, which makes it
look cramped.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-calendar/-/merge_requests/616>

src/gui/event-editor/gcal-multi-choice.blp

@@ -19,6 +19,7 @@ template $GcalMultiChoice: Box {
   ToggleButton button {
     accessible-role: none;
     toggled => $button_toggled_cb() swapped;
+    state-flags-changed => $button_state_flags_changed_cb() swapped;
 
     styles [
       "flat",

src/gui/event-editor/gcal-multi-choice.c

@@ -316,6 +316,19 @@ popover_destroy_cb (GcalMultiChoice *menu_button)
   gcal_multi_choice_set_popover (menu_button, NULL);
 }
 
+static void
+button_state_flags_changed_cb (GcalMultiChoice *self,
+                               GtkStateFlags    previous_state_flags)
+{
+  GtkStateFlags state_flags;
+
+  g_assert (GCAL_IS_MULTI_CHOICE (self));
+
+  state_flags = gtk_widget_get_state_flags (self->button);
+
+  gtk_widget_set_state_flags (GTK_WIDGET (self), state_flags, TRUE);
+}
+
 /*
  * GObject overrides
  */
@@ -464,9 +477,11 @@ gcal_multi_choice_state_flags_changed (GtkWidget    *widget,
                                        GtkStateFlags previous_state_flags)
 {
   GcalMultiChoice *self = GCAL_MULTI_CHOICE (widget);
+  GtkStateFlags state_flags;
 
-  if (gtk_widget_is_focus (self->button))
+  state_flags = gtk_widget_get_state_flags (widget);
-    gtk_widget_set_state_flags (self->button, GTK_STATE_FLAG_FOCUS_VISIBLE, FALSE);
+  if (state_flags & GTK_STATE_FLAG_FOCUSED)
+    gtk_widget_set_state_flags (widget, GTK_STATE_FLAG_FOCUS_VISIBLE, FALSE);
 
   if (!gtk_widget_is_sensitive (widget))
     {
@@ -636,6 +651,7 @@ gcal_multi_choice_class_init (GcalMultiChoiceClass *class)
 
   gtk_widget_class_bind_template_callback (widget_class, button_clicked_cb);
   gtk_widget_class_bind_template_callback (widget_class, button_toggled_cb);
+  gtk_widget_class_bind_template_callback (widget_class, button_state_flags_changed_cb);
   gtk_widget_class_bind_template_callback (widget_class, key_pressed_cb);
 
   gtk_widget_class_set_css_name (widget_class, "navigator");

src/theme/style.css

@@ -78,10 +78,23 @@ popover.event-popover > contents {
 /* Date chooser */
 
 /* month/year controls */
-datechooser navigator { /* add some space between the two controls */
+
+datechooser navigator {
+  /* add some space between the two controls */
   margin-right: 6px;
   margin-left: 6px;
   margin-bottom: 6px;
+
+  outline: 0 solid transparent;
+  border-radius: 9px;
+  outline-offset: 6px;
+  transition: var(--focus-ring-transition);
+}
+
+datechooser navigator:focus:focus-visible {
+  outline-color: var(--focus-ring-color);
+  outline-width: 2px;
+  outline-offset: 0px;
 }
 
 datechooser navigator label {
@@ -90,6 +103,7 @@ datechooser navigator label {
 
 datechooser navigator button {
   padding: 0;
+  outline: unset;
 }
 
 /* week numbers, with a style resembling GNOME Shell's */