fix(a11y): WCAG 2 AA contrast and keyboard access

assets/css/app.css

@@ -99,6 +99,25 @@
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session] { display: contents }
 
+/* WCAG 1.4.12 Text Spacing: allow user stylesheets to adjust text spacing in popovers.
+   Popover content (e.g. from DaisyUI dropdown) must not rely on non-overridable inline
+   spacing; use inherited values so custom stylesheets can override. */
+[popover] {
+  line-height: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+}
+
+/* WCAG 2 AA: success/error text on light backgrounds (e.g. base-200). Use instead of
+   text-success/text-error when contrast ratio of theme colors is insufficient. */
+.text-success-aa {
+  color: oklch(0.35 0.12 165);
+}
+
+.text-error-aa {
+  color: oklch(0.45 0.2 25);
+}
+
 /* ============================================
    Sidebar Base Styles
    ============================================ */

lib/mv_web/live/global_settings_live.ex

@@ -366,9 +366,9 @@ defmodule MvWeb.GlobalSettingsLive do
     <div class="mt-4 p-4 rounded-lg border border-base-300 bg-base-200 space-y-2">
       <p class="font-medium">
         {gettext("Last sync result:")}
-        <span class="text-success ml-1">{gettext("%{count} synced", count: @result.synced)}</span>
+        <span class="text-success-aa ml-1">{gettext("%{count} synced", count: @result.synced)}</span>
         <%= if @result.errors != [] do %>
-          <span class="text-error ml-1">
+          <span class="text-error-aa ml-1">
             {gettext("%{count} failed", count: length(@result.errors))}
           </span>
         <% end %>

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

@@ -66,7 +66,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                   href={Mv.Config.vereinfacht_contact_view_url(@member.vereinfacht_contact_id)}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="link link-primary inline-flex items-center gap-1"
+                  class="link link-accent underline inline-flex items-center gap-1"
                 >
                   {gettext("View contact in Vereinfacht")}
                   <.icon name="hero-arrow-top-right-on-square" class="inline-block size-4" />
@@ -83,7 +83,12 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
                   </button>
                 </div>
                 <%= if @vereinfacht_debug_response do %>
-                  <div class="mt-2 rounded border border-base-300 bg-base-200 p-3 overflow-x-auto max-h-96 overflow-y-auto">
+                  <div
+                    class="mt-2 rounded border border-base-300 bg-base-200 p-3 overflow-x-auto max-h-96 overflow-y-auto"
+                    tabindex="0"
+                    role="region"
+                    aria-label={gettext("Vereinfacht API response")}
+                  >
                     <pre class="text-xs whitespace-pre-wrap font-mono"><%= format_vereinfacht_debug_response(@vereinfacht_debug_response) %></pre>
                   </div>
                 <% end %>

priv/gettext/de/LC_MESSAGES/default.po

@@ -2735,42 +2735,47 @@ msgstr "Für dieses Mitglied existiert kein Vereinfacht-Kontakt."
 msgid "Sync this member from Settings (Vereinfacht section) or save the member again to create the contact."
 msgstr "Synchronisieren Sie dieses Mitglied unter Einstellungen (Bereich Vereinfacht) oder speichern Sie das Mitglied erneut, um den Kontakt anzulegen."
 
-# Vereinfacht API validation messages (Laravel-style, shown when creating/editing members or syncing)
+#: lib/mv_web/live/member_live/show/membership_fees_component.ex
-msgid "The address field is required."
+#, elixir-autogen, elixir-format, fuzzy
-msgstr "Das Adressfeld ist erforderlich."
+msgid "Vereinfacht API response"
+msgstr "Vereinfacht"
 
-msgid "The city field is required."
+#~ # Vereinfacht API validation messages (Laravel-style, shown when creating/editing members or syncing)
-msgstr "Das Ortsfeld ist erforderlich."
+#~ msgid "The address field is required."
+#~ msgstr "Das Adressfeld ist erforderlich."
 
-msgid "The city field must be at least 2 characters."
+#~ msgid "The city field is required."
-msgstr "Das Ortsfeld muss mindestens 2 Zeichen haben."
+#~ msgstr "Das Ortsfeld ist erforderlich."
 
-msgid "The country field is required."
+#~ msgid "The city field must be at least 2 characters."
-msgstr "Das Ländfeld ist erforderlich."
+#~ msgstr "Das Ortsfeld muss mindestens 2 Zeichen haben."
 
-msgid "The email field is required."
+#~ msgid "The country field is required."
-msgstr "Das E-Mail-Feld ist erforderlich."
+#~ msgstr "Das Ländfeld ist erforderlich."
 
-msgid "The email field must be a valid email address."
+#~ msgid "The email field is required."
-msgstr "Das E-Mail-Feld muss eine gültige E-Mail-Adresse sein."
+#~ msgstr "Das E-Mail-Feld ist erforderlich."
 
-msgid "The first name field is required."
+#~ msgid "The email field must be a valid email address."
-msgstr "Das Vornamenfeld ist erforderlich."
+#~ msgstr "Das E-Mail-Feld muss eine gültige E-Mail-Adresse sein."
 
-msgid "The first name field must be at least 2 characters."
+#~ msgid "The first name field is required."
-msgstr "Das Vornamenfeld muss mindestens 2 Zeichen haben."
+#~ msgstr "Das Vornamenfeld ist erforderlich."
 
-msgid "The last name field is required."
+#~ msgid "The first name field must be at least 2 characters."
-msgstr "Das Nachnamenfeld ist erforderlich."
+#~ msgstr "Das Vornamenfeld muss mindestens 2 Zeichen haben."
 
-msgid "The last name field must be at least 2 characters."
+#~ msgid "The last name field is required."
-msgstr "Das Nachnamenfeld muss mindestens 2 Zeichen haben."
+#~ msgstr "Das Nachnamenfeld ist erforderlich."
 
-msgid "The street field is required."
+#~ msgid "The last name field must be at least 2 characters."
-msgstr "Das Straßenfeld ist erforderlich."
+#~ msgstr "Das Nachnamenfeld muss mindestens 2 Zeichen haben."
 
-msgid "The zip code field is required."
+#~ msgid "The street field is required."
-msgstr "Das Postleitzahlenfeld ist erforderlich."
+#~ msgstr "Das Straßenfeld ist erforderlich."
 
-msgid "The zip code field must be at least 2 characters."
+#~ msgid "The zip code field is required."
-msgstr "Das Postleitzahlenfeld muss mindestens 2 Zeichen haben."
+#~ msgstr "Das Postleitzahlenfeld ist erforderlich."
+
+#~ msgid "The zip code field must be at least 2 characters."
+#~ msgstr "Das Postleitzahlenfeld muss mindestens 2 Zeichen haben."

priv/gettext/default.pot

@@ -2734,3 +2734,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Sync this member from Settings (Vereinfacht section) or save the member again to create the contact."
 msgstr ""
+
+#: lib/mv_web/live/member_live/show/membership_fees_component.ex
+#, elixir-autogen, elixir-format
+msgid "Vereinfacht API response"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -2735,42 +2735,47 @@ msgstr ""
 msgid "Sync this member from Settings (Vereinfacht section) or save the member again to create the contact."
 msgstr "Sync this member from Settings (Vereinfacht section) or save the member again to create the contact."
 
-# Vereinfacht API validation messages (Laravel-style, shown when creating/editing members or syncing)
+#: lib/mv_web/live/member_live/show/membership_fees_component.ex
-msgid "The address field is required."
+#, elixir-autogen, elixir-format, fuzzy
-msgstr "The address field is required."
+msgid "Vereinfacht API response"
+msgstr ""
 
-msgid "The city field is required."
+#~ # Vereinfacht API validation messages (Laravel-style, shown when creating/editing members or syncing)
-msgstr "The city field is required."
+#~ msgid "The address field is required."
+#~ msgstr "The address field is required."
 
-msgid "The city field must be at least 2 characters."
+#~ msgid "The city field is required."
-msgstr "The city field must be at least 2 characters."
+#~ msgstr "The city field is required."
 
-msgid "The country field is required."
+#~ msgid "The city field must be at least 2 characters."
-msgstr "The country field is required."
+#~ msgstr "The city field must be at least 2 characters."
 
-msgid "The email field is required."
+#~ msgid "The country field is required."
-msgstr "The email field is required."
+#~ msgstr "The country field is required."
 
-msgid "The email field must be a valid email address."
+#~ msgid "The email field is required."
-msgstr "The email field must be a valid email address."
+#~ msgstr "The email field is required."
 
-msgid "The first name field is required."
+#~ msgid "The email field must be a valid email address."
-msgstr "The first name field is required."
+#~ msgstr "The email field must be a valid email address."
 
-msgid "The first name field must be at least 2 characters."
+#~ msgid "The first name field is required."
-msgstr "The first name field must be at least 2 characters."
+#~ msgstr "The first name field is required."
 
-msgid "The last name field is required."
+#~ msgid "The first name field must be at least 2 characters."
-msgstr "The last name field is required."
+#~ msgstr "The first name field must be at least 2 characters."
 
-msgid "The last name field must be at least 2 characters."
+#~ msgid "The last name field is required."
-msgstr "The last name field must be at least 2 characters."
+#~ msgstr "The last name field is required."
 
-msgid "The street field is required."
+#~ msgid "The last name field must be at least 2 characters."
-msgstr "The street field is required."
+#~ msgstr "The last name field must be at least 2 characters."
 
-msgid "The zip code field is required."
+#~ msgid "The street field is required."
-msgstr "The zip code field is required."
+#~ msgstr "The street field is required."
 
-msgid "The zip code field must be at least 2 characters."
+#~ msgid "The zip code field is required."
-msgstr "The zip code field must be at least 2 characters."
+#~ msgstr "The zip code field is required."
+
+#~ msgid "The zip code field must be at least 2 characters."
+#~ msgstr "The zip code field must be at least 2 characters."