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