Fix accessibility issues: add select label, improve contrast, fix heading hierarchy

lib/mv_web/live/member_live/show.ex

@@ -47,7 +47,10 @@ defmodule MvWeb.MemberLive.Show do
       <div role="tablist" class="tabs tabs-bordered mb-6">
         <button
           role="tab"
-          class={["tab", if(@active_tab == :contact, do: "tab-active", else: "")]}
+          class={[
+            "tab",
+            if(@active_tab == :contact, do: "tab-active", else: "!text-gray-800")
+          ]}
           aria-selected={@active_tab == :contact}
           phx-click="switch_tab"
           phx-value-tab="contact"
@@ -57,7 +60,10 @@ defmodule MvWeb.MemberLive.Show do
         </button>
         <button
           role="tab"
-          class={["tab", if(@active_tab == :membership_fees, do: "tab-active", else: "")]}
+          class={[
+            "tab",
+            if(@active_tab == :membership_fees, do: "tab-active", else: "!text-gray-800")
+          ]}
           aria-selected={@active_tab == :membership_fees}
           phx-click="switch_tab"
           phx-value-tab="membership_fees"

lib/mv_web/live/member_live/show/membership_fees_component.ex

@@ -311,17 +311,19 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
             <h3 class="text-lg font-bold">{gettext("Create Cycle")}</h3>
             <form phx-submit="create_cycle" phx-target={@myself}>
               <div class="form-control w-full mt-4">
-                <label class="label">
+                <label class="label" for="create-cycle-date">
                   <span class="label-text">{gettext("Date")}</span>
                 </label>
                 <input
                   type="date"
+                  id="create-cycle-date"
                   name="date"
                   value={@create_cycle_date || ""}
                   phx-change="update_create_cycle_date"
                   phx-target={@myself}
                   class="input input-bordered w-full"
                   required
+                  aria-label={gettext("Date")}
                 />
                 <label class="label">
                   <span class="label-text-alt">
@@ -345,17 +347,19 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                 </div>
               <% end %>
               <div class="form-control w-full mt-4">
-                <label class="label">
+                <label class="label" for="create-cycle-amount">
                   <span class="label-text">{gettext("Amount")}</span>
                 </label>
                 <input
                   type="number"
+                  id="create-cycle-amount"
                   name="amount"
                   step="0.01"
                   min="0"
                   value={Decimal.to_string(@member.membership_fee_type.amount)}
                   class="input input-bordered w-full"
                   required
+                  aria-label={gettext("Amount")}
                 />
               </div>
               <%= if @create_cycle_error do %>

lib/mv_web/live/membership_fee_type_live/form.ex

@@ -48,14 +48,16 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
         />
 
         <div class="form-control">
-          <label class="label">
+          <label class="label" for="membership-fee-type-form_interval">
             <span class="label-text font-semibold">
               {gettext("Interval")}
               <span
                 :if={is_nil(@membership_fee_type)}
                 class="text-red-700 tooltip tooltip-right"
                 data-tip={gettext("This field cannot be empty")}
-              >*</span>
+              >
+                *
+              </span>
             </span>
           </label>
           <select
@@ -67,6 +69,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
             name="membership_fee_type[interval]"
             id="membership-fee-type-form_interval"
             required={is_nil(@membership_fee_type)}
+            aria-label={gettext("Interval")}
           >
             <option value="">{gettext("Select interval")}</option>
             <option
@@ -135,7 +138,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
       <%= if @show_amount_warning do %>
         <dialog id="amount-warning-modal" class="modal modal-open">
           <div class="modal-box">
-            <h3 class="text-lg font-bold">{gettext("Change Amount?")}</h3>
+            <h2 class="text-lg font-bold">{gettext("Change Amount?")}</h2>
             <div class="py-4 space-y-4">
               <div class="alert alert-warning">
                 <.icon name="hero-exclamation-triangle" class="size-5" />
@@ -163,7 +166,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
                 </div>
                 <div class="flex justify-between">
                   <span class="text-base-content/70">{gettext("New amount")}:</span>
-                  <span class="font-mono font-semibold text-primary">
+                  <span class="font-mono font-semibold text-base-content">
                     {MembershipFeeHelpers.format_currency(@new_amount)}
                   </span>
                 </div>

lib/mv_web/live/membership_fee_type_live/index.ex

@@ -57,7 +57,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
       >
         <:col :let={mft} label={gettext("Name")}>
           <span class="font-medium">{mft.name}</span>
-          <p :if={mft.description} class="text-sm text-base-content/60">{mft.description}</p>
+          <p :if={mft.description} class="text-sm text-base-content/70">{mft.description}</p>
         </:col>
 
         <:col :let={mft} label={gettext("Amount")}>
@@ -75,7 +75,11 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
         </:col>
 
         <:action :let={mft}>
-          <.link navigate={~p"/membership_fee_types/#{mft.id}/edit"} class="btn btn-ghost btn-xs">
+          <.link
+            navigate={~p"/membership_fee_types/#{mft.id}/edit"}
+            class="btn btn-ghost btn-xs"
+            aria-label={gettext("Edit membership fee type")}
+          >
             <.icon name="hero-pencil" class="size-4" />
           </.link>
         </:action>
@@ -92,6 +96,14 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
                 else: "text-error"
               )
             ]}
+            aria-label={
+              if get_member_count(mft, @member_counts) > 0,
+                do:
+                  gettext("Cannot delete - %{count} member(s) assigned",
+                    count: get_member_count(mft, @member_counts)
+                  ),
+                else: gettext("Delete membership fee type")
+            }
             title={
               if get_member_count(mft, @member_counts) > 0,
                 do: