From 29f262e1a14c1cbcd4abcdd3d7c6378f25a003d8 Mon Sep 17 00:00:00 2001
From: Moritz <moritz.m@local-it.org>
Date: Tue, 24 Feb 2026 11:25:10 +0100
Subject: [PATCH] fix: use pointer-events-none instead of disabled for active
 status button

Replace disabled attribute with pointer-events-none so the active
status button keeps its color (btn-success/warning/error btn-active)
instead of being grayed out by the browser's disabled styling.
---
 .../member_live/show/membership_fees_component.ex | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/mv_web/live/member_live/show/membership_fees_component.ex b/lib/mv_web/live/member_live/show/membership_fees_component.ex
index 72da1da..b8757a0 100644
--- a/lib/mv_web/live/member_live/show/membership_fees_component.ex
+++ b/lib/mv_web/live/member_live/show/membership_fees_component.ex
@@ -224,7 +224,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="paid"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :paid)}
-                      disabled={cycle.status == :paid}
+                      aria-pressed={cycle.status == :paid}
                       title={gettext("Mark as paid")}
                     >
                       <.icon name="hero-check-circle" class="size-4" />
@@ -237,7 +237,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="suspended"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :suspended)}
-                      disabled={cycle.status == :suspended}
+                      aria-pressed={cycle.status == :suspended}
                       title={gettext("Mark as suspended")}
                     >
                       <.icon name="hero-pause-circle" class="size-4" />
@@ -250,7 +250,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                       phx-value-status="unpaid"
                       phx-target={@myself}
                       class={cycle_status_btn_class(cycle.status, :unpaid)}
-                      disabled={cycle.status == :unpaid}
+                      aria-pressed={cycle.status == :unpaid}
                       title={gettext("Mark as unpaid")}
                     >
                       <.icon name="hero-x-circle" class="size-4" />
@@ -1222,14 +1222,15 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
   defp translate_receipt_type(other), do: other
 
   # Returns CSS classes for a cycle status button.
-  # Active (current) status is highlighted with color; others are neutral gray.
+  # Active (current) status is highlighted with color and non-interactive;
+  # inactive buttons are neutral gray. Matches the filter button pattern.
   defp cycle_status_btn_class(current_status, btn_status) do
     base = "join-item btn btn-sm"
 
     case {current_status == btn_status, btn_status} do
-      {true, :paid} -> "#{base} btn-success btn-active"
-      {true, :suspended} -> "#{base} btn-warning btn-active"
-      {true, :unpaid} -> "#{base} btn-error btn-active"
+      {true, :paid} -> "#{base} btn-success btn-active pointer-events-none"
+      {true, :suspended} -> "#{base} btn-warning btn-active pointer-events-none"
+      {true, :unpaid} -> "#{base} btn-error btn-active pointer-events-none"
       _ -> base
     end
   end