Merge branch 'main' into feat/421_accessibility

lib/mv_web/live/components/field_visibility_dropdown_component.ex

@@ -188,7 +188,7 @@ defmodule MvWeb.Components.FieldVisibilityDropdownComponent do
 
   defp find_custom_field_name(id, _field_string, custom_fields) do
     case Enum.find(custom_fields, fn cf -> to_string(cf.id) == id end) do
-      nil -> gettext("Custom Field %{id}", id: id)
+      nil -> gettext("Datafield %{id}", id: id)
       custom_field -> custom_field.name
     end
   end

lib/mv_web/live/components/member_filter_component.ex

@@ -65,11 +65,11 @@ defmodule MvWeb.Components.MemberFilterComponent do
       phx-key="Escape"
       phx-target={@myself}
     >
-      <button
+      <.button
         type="button"
-        tabindex="0"
+        variant="secondary"
         class={[
-          "btn gap-2",
+          "gap-2",
           (@cycle_status_filter || map_size(@group_filters) > 0 ||
              active_boolean_filters_count(@boolean_filters) > 0) &&
             "btn-active"
@@ -107,8 +107,8 @@ defmodule MvWeb.Components.MemberFilterComponent do
         >
           {@member_count}
         </.badge>
-      </button>
-      
+      </.button>
+
     <!--
         NOTE: We use a div panel instead of ul.menu/li structure to avoid DaisyUI menu styles
         (padding, display, hover, font sizes) that would interfere with our form controls.
@@ -182,7 +182,7 @@ defmodule MvWeb.Components.MemberFilterComponent do
               </div>
             </fieldset>
           </div>
-          
+
     <!-- Groups: one row per group with All / Yes / No (like Custom Fields) -->
           <div :if={length(@groups) > 0} class="mb-4">
             <div class="text-xs font-semibold opacity-70 mb-2 uppercase tracking-wider">
@@ -249,11 +249,11 @@ defmodule MvWeb.Components.MemberFilterComponent do
               </fieldset>
             </div>
           </div>
-          
+
     <!-- Custom Fields Group -->
           <div :if={length(@boolean_custom_fields) > 0} class="mb-2">
             <div class="text-xs font-semibold opacity-70 mb-2 uppercase tracking-wider">
-              {gettext("Custom Fields")}
+              {gettext("Individual datafields")}
             </div>
             <div class="max-h-60 overflow-y-auto pr-2">
               <fieldset
@@ -316,25 +316,27 @@ defmodule MvWeb.Components.MemberFilterComponent do
               </fieldset>
             </div>
           </div>
-          
+
     <!-- Footer -->
           <div class="mt-4 flex justify-between pt-3 border-t border-base-200">
-            <button
+            <.button
               type="button"
+              variant="neutral"
+              size="sm"
               phx-click="reset_filters"
               phx-target={@myself}
-              class="btn btn-sm"
             >
-              {gettext("Reset")}
-            </button>
-            <button
+              {gettext("Clear filters")}
+            </.button>
+            <.button
               type="button"
+              variant="primary"
+              size="sm"
               phx-click="close_dropdown"
               phx-target={@myself}
-              class="btn btn-primary btn-sm"
             >
               {gettext("Close")}
-            </button>
+            </.button>
           </div>
         </form>
       </div>
@@ -459,7 +461,7 @@ defmodule MvWeb.Components.MemberFilterComponent do
         boolean_filter_label(boolean_custom_fields, boolean_filters)
 
       true ->
-        gettext("All")
+        gettext("Apply filters")
     end
   end
 

lib/mv_web/live/components/sort_header_component.ex

@@ -19,25 +19,28 @@ defmodule MvWeb.Components.SortHeaderComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="tooltip tooltip-bottom" data-tip={aria_sort(@field, @sort_field, @sort_order)}>
-      <button
-        type="button"
-        aria-label={aria_sort(@field, @sort_field, @sort_order)}
-        class="btn btn-ghost select-none"
-        phx-click="sort"
-        phx-value-field={@field}
-        data-testid={@field}
-      >
-        {@label}
-        <%= if @sort_field == @field do %>
-          <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
-        <% else %>
-          <.icon
-            name="hero-chevron-up-down"
-            class="opacity-40"
-          />
-        <% end %>
-      </button>
+    <div>
+      <.tooltip content={aria_sort(@field, @sort_field, @sort_order)} position="bottom">
+        <.button
+          type="button"
+          variant="ghost"
+          aria-label={aria_sort(@field, @sort_field, @sort_order)}
+          class="select-none"
+          phx-click="sort"
+          phx-value-field={@field}
+          data-testid={@field}
+        >
+          {@label}
+          <%= if @sort_field == @field do %>
+            <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
+          <% else %>
+            <.icon
+              name="hero-chevron-up-down"
+              class="opacity-40"
+            />
+          <% end %>
+        </.button>
+      </.tooltip>
     </div>
     """
   end