Refactor search bars + improve search accessibility

src/bazaar.gresource.xml

@@ -60,6 +60,7 @@
     <file preprocess="xml-stripblanks">bz-screenshot-page.ui</file>
     <file preprocess="xml-stripblanks">bz-screenshots-carousel.ui</file>
     <file preprocess="xml-stripblanks">bz-search-filter-popover.ui</file>
+    <file preprocess="xml-stripblanks">bz-search-bar.ui</file>
     <file preprocess="xml-stripblanks">bz-search-page.ui</file>
     <file preprocess="xml-stripblanks">bz-section-view.ui</file>
     <file preprocess="xml-stripblanks">bz-stats-dialog.ui</file>

src/bz-library-page.blp

@@ -8,53 +8,15 @@ template $BzLibraryPage: Adw.Bin {
     Adw.Clamp search_box_clamp {
       margin-start: 12;
       margin-end: 12;
+      margin-top: 10;
+      margin-bottom: 10;
       maximum-size: 375;
-
       visible: bind template.has-apps;
 
-      child: Adw.Bin {
-        halign: fill;
-        margin-top: 10;
-        margin-bottom: 10;
-
-        child: Box {
-          orientation: horizontal;
-          spacing: 8;
-          height-request: 40;
-
-          Image {
-            icon-name: "system-search-symbolic";
-          }
-
-          Text search_bar {
-            hexpand: true;
-            max-length: 50;
-            placeholder-text: _("Search installed apps");
-            notify::text => $search_text_changed(template);
-            activate => $search_text_activate(template);
-          }
-
-          Button clear_button {
-            icon-name: "edit-clear-symbolic";
-            visible: bind $not($is_empty_string(search_bar.text) as <bool>) as <bool>;
-
-            styles [
-              "flat",
-              "circular",
-              "searchbar-button",
-            ]
-
-            clicked => $reset_search_cb(template);
-
-            accessibility {
-              label: _("Clear search");
-            }
-          }
-
-          styles [
-            "search-box",
-          ]
-        };
+      child: $BzSearchBar search_bar {
+        placeholder: _("Search installed apps");
+        search-activated => $search_text_activate(template);
+        search-changed => $search_text_changed(template);
       };
     }
 

src/bz-library-page.c

@@ -23,6 +23,7 @@
 #include "bz-entry-group.h"
 #include "bz-installed-tile.h"
 #include "bz-library-page.h"
+#include "bz-search-bar.h"
 #include "bz-section-view.h"
 #include "bz-template-callbacks.h"
 #include "bz-transaction-tile.h"
@@ -39,7 +40,7 @@ struct _BzLibraryPage
 
   /* Template widgets */
   AdwViewStack       *stack;
-  GtkText            *search_bar;
+  BzSearchBar        *search_bar;
   GtkScrolledWindow  *scroll;
   GtkFilterListModel *filter_model;
   GtkCustomFilter    *filter;
@@ -248,8 +249,7 @@ tile_activated_cb (BzListTile *tile)
 
 static void
 search_text_changed (BzLibraryPage *self,
-                     GParamSpec    *pspec,
-                     GtkText       *entry)
+                     BzSearchBar   *search_bar)
 {
   gtk_filter_changed (GTK_FILTER (self->filter),
                       GTK_FILTER_CHANGE_DIFFERENT);
@@ -258,7 +258,7 @@ search_text_changed (BzLibraryPage *self,
 
 static void
 search_text_activate (BzLibraryPage *self,
-                      GtkText       *entry)
+                      BzSearchBar   *search_bar)
 {
   const char *text = NULL;
 
@@ -273,7 +273,7 @@ static void
 reset_search_cb (BzLibraryPage *self,
                  GtkButton     *button)
 {
-  gtk_text_set_buffer (self->search_bar, NULL);
+  gtk_editable_set_text (GTK_EDITABLE (self->search_bar), "");
 }
 
 static void
@@ -567,7 +567,7 @@ bz_library_page_reset_search (BzLibraryPage *self)
   vadjustment = gtk_scrolled_window_get_vadjustment (self->scroll);
   gtk_adjustment_set_value (vadjustment, 0.0);
 
-  gtk_text_set_buffer (self->search_bar, NULL);
+  gtk_editable_set_text (GTK_EDITABLE (self->search_bar), "");
 }
 
 static void
@@ -592,9 +592,13 @@ has_transactions_changed (BzLibraryPage        *self,
 static void
 set_page (BzLibraryPage *self)
 {
-  guint    n_apps           = 0;
-  guint    n_filtered       = 0;
-  gboolean has_transactions = FALSE;
+  guint       n_apps           = 0;
+  guint       n_filtered       = 0;
+  gboolean    has_transactions = FALSE;
+  const char *message          = NULL;
+  const char *search_text      = NULL;
+
+  search_text = gtk_editable_get_text (GTK_EDITABLE (self->search_bar));
 
   if (self->model != NULL)
     {
@@ -619,6 +623,13 @@ set_page (BzLibraryPage *self)
     adw_view_stack_set_visible_child_name (self->stack, "no-results");
   else
     adw_view_stack_set_visible_child_name (self->stack, "content");
+
+  if (search_text && *search_text)
+    {
+      message = n_filtered == 0 ? _ ("No applications found") : g_strdup_printf (ngettext ("One application found", "%u applications found", n_filtered), n_filtered);
+
+      gtk_accessible_announce (GTK_ACCESSIBLE (self), message, GTK_ACCESSIBLE_ANNOUNCEMENT_PRIORITY_HIGH);
+    }
 }
 
 static gboolean

src/bz-search-bar.blp

@@ -0,0 +1,53 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $BzSearchBar: Widget {
+  height-request: 40;
+  accessible-role: search_box;
+
+  styles [
+    "search-box",
+  ]
+
+  layout-manager: BoxLayout {
+    spacing: 8;
+  };
+
+  Image search_icon {
+    icon-name: "system-search-symbolic";
+    accessible-role: presentation;
+  }
+
+  Text search_text {
+    hexpand: true;
+    placeholder-text: bind template.placeholder;
+    activate => $text_activated_cb(template);
+    changed => $text_changed_cb(template);
+  }
+
+  Adw.Spinner search_busy {
+    visible: bind template.busy;
+    width-request: 16;
+    height-request: 16;
+  }
+
+  Adw.Bin end_widget_bin {}
+
+  Button clear_button {
+    icon-name: "edit-clear";
+    valign: center;
+    focusable: false;
+    visible: bind $has_text_cb(search_text.text);
+    clicked => $clear_text_cb(template);
+
+    styles [
+      "flat",
+      "circular",
+      "searchbar-button",
+    ]
+
+    accessibility {
+      label: _("Clear Search");
+    }
+  }
+}