From 576c82b06080aa6ce5715c68a276fed7dd42478d Mon Sep 17 00:00:00 2001
From: Hari Rana <theevilskeleton@riseup.net>
Date: Thu, 17 Jul 2025 16:46:58 -0400
Subject: [PATCH] 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 |  1 +
 src/gui/event-editor/gcal-multi-choice.c   | 20 ++++++++++++++++++--
 src/theme/style.css                        | 16 +++++++++++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/gui/event-editor/gcal-multi-choice.blp b/src/gui/event-editor/gcal-multi-choice.blp
index 2418371d..e7b37800 100644
--- a/src/gui/event-editor/gcal-multi-choice.blp
+++ b/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",
diff --git a/src/gui/event-editor/gcal-multi-choice.c b/src/gui/event-editor/gcal-multi-choice.c
index 308e0359..83658e1f 100644
--- a/src/gui/event-editor/gcal-multi-choice.c
+++ b/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))
-    gtk_widget_set_state_flags (self->button, GTK_STATE_FLAG_FOCUS_VISIBLE, FALSE);
+  state_flags = gtk_widget_get_state_flags (widget);
+  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");
diff --git a/src/theme/style.css b/src/theme/style.css
index bf738f38..744946a3 100644
--- a/src/theme/style.css
+++ b/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 */