From 7f97620439833c2f75bf7d778cba58ebc85eca56 Mon Sep 17 00:00:00 2001
From: Automeris naranja <automerisnaranja@tutanota.com>
Date: Fri, 3 May 2024 00:48:18 -0300
Subject: [PATCH] calendar-row: Add a popover to explain about read-only
 calendars

When a calendar is read-only, a lock icon appears and the tooltip
of this icon shows the "Read-Only Calendar" text. However:

- Tooltips won't work in a touch device
- Orca doesn't read this text

To fix this, use a button with a popover, which contains a text
explaining that the calendar is read-only.
---
 src/gui/calendar-management/calendar-row.ui   | 31 ++++++++++++++++---
 .../calendar-management/gcal-calendars-page.c |  6 ++--
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/gui/calendar-management/calendar-row.ui b/src/gui/calendar-management/calendar-row.ui
index b4cbd400f..3fdcc946d 100644
--- a/src/gui/calendar-management/calendar-row.ui
+++ b/src/gui/calendar-management/calendar-row.ui
@@ -13,13 +13,16 @@
       </object>
     </child>
 
-    <!-- Lock icon for read-only calendars -->
+    <!-- Info button for read-only calendars -->
     <child type="suffix">
-      <object class="GtkImage" id="read_only_icon">
-        <property name="tooltip-text" translatable="yes">Read-Only Calendar</property>
+      <object class="GtkMenuButton" id="read_only_info_button">
+        <property name="tooltip-text" translatable="yes">More Information</property>
         <property name="icon-name">changes-prevent-symbolic</property>
-        <property name="pixel-size">20</property>
         <property name="valign">center</property>
+        <property name="popover">read_only_info_popover</property>
+        <style>
+          <class name="flat"/>
+        </style>
       </object>
     </child>
 
@@ -41,4 +44,24 @@
       </object>
     </child>
   </object>
+
+  <object class="GtkPopover" id="read_only_info_popover">
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="halign">center</property>
+        <property name="margin-start">6</property>
+        <property name="margin-end">6</property>
+        <property name="margin-top">6</property>
+        <property name="margin-bottom">6</property>
+        <property name="label" translatable="yes">This calendar is read-only. No events can be added, changed or deleted.</property>
+        <property name="wrap">True</property>
+        <property name="max-width-chars">50</property>
+        <property name="valign">center</property>
+        <!-- A label needs to be selectable so the screen reader can read it.
+        However, this will cause the label to appear entirely selected upon opening the popover,
+        something that can cause readability issues. The workaround below avoids such issue. -->
+        <property name="selectable" bind-source="read_only_info_popover" bind-property="visible" bind-flags="invert-boolean">True</property>
+      </object>
+    </property>
+  </object>
 </interface>
diff --git a/src/gui/calendar-management/gcal-calendars-page.c b/src/gui/calendar-management/gcal-calendars-page.c
index e3ab0cc7b..27703c61a 100644
--- a/src/gui/calendar-management/gcal-calendars-page.c
+++ b/src/gui/calendar-management/gcal-calendars-page.c
@@ -70,7 +70,7 @@ make_calendar_row (GcalCalendarsPage *self,
   g_autoptr (GdkPaintable) color_paintable = NULL;
   g_autofree gchar *parent_name = NULL;
   g_autoptr (GtkBuilder) builder = NULL;
-  GtkWidget *read_only_icon;
+  GtkWidget *read_only_info_button;
   const GdkRGBA *color;
   GcalManager *manager;
   GtkWidget *icon;
@@ -90,8 +90,8 @@ make_calendar_row (GcalCalendarsPage *self,
   row = g_object_ref (GTK_WIDGET (gtk_builder_get_object (builder, "row")));
 
   /* read-only icon */
-  read_only_icon = GTK_WIDGET (gtk_builder_get_object (builder, "read_only_icon"));
-  gtk_widget_set_visible (read_only_icon, gcal_calendar_is_read_only (calendar));
+  read_only_info_button = GTK_WIDGET (gtk_builder_get_object (builder, "read_only_info_button"));
+  gtk_widget_set_visible (read_only_info_button, gcal_calendar_is_read_only (calendar));
 
   /* source color icon */
   color = gcal_calendar_get_color (calendar);
-- 
GitLab