local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 69 Pull requests 7 Projects 1 Releases Packages 1 Activity Actions

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

Browse source
This commit is contained in:
Moritz 2025-12-22 17:48:53 +01:00
parent 18766df224
commit 9233f56847
Signed by: moritz
GPG key ID: 1020A035E5DD0824
4 changed files with 35 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

10
lib/mv_web/live/member_live/show.ex
View file

@ -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"

8
lib/mv_web/live/member_live/show/membership_fees_component.ex
View file

@ -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 %>

11
lib/mv_web/live/membership_fee_type_live/form.ex
View file

@ -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>

16
lib/mv_web/live/membership_fee_type_live/index.ex
View file

@ -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: