A11y: dark mode contrast, sign-in landmark/h1, Banner link discernibility

assets/css/app.css

@@ -108,8 +108,7 @@
   word-spacing: inherit;
 }
 
-/* WCAG 2 AA: success/error text on light backgrounds (e.g. base-200). Use instead of
+/* WCAG 2 AA: success/error/warning text. Light theme: dark tones on light bg; dark theme: light tones on dark bg. */
-   text-success/text-error when contrast ratio of theme colors is insufficient. */
 .text-success-aa {
   color: oklch(0.35 0.12 165);
 }
@@ -118,6 +117,22 @@
   color: oklch(0.45 0.2 25);
 }
 
+.text-warning-aa {
+  color: oklch(0.45 0.14 75);
+}
+
+[data-theme="dark"] .text-success-aa {
+  color: oklch(0.72 0.12 165);
+}
+
+[data-theme="dark"] .text-error-aa {
+  color: oklch(0.75 0.18 25);
+}
+
+[data-theme="dark"] .text-warning-aa {
+  color: oklch(0.78 0.14 75);
+}
+
 /* WCAG 2.2 AA: Badge contrast. DaisyUI .badge-outline uses transparent bg; we use
    Core Component <.badge style="outline"> which adds .bg-base-100. This rule ensures
    outline badges always have a visible background in both themes. */

lib/mv_web/auth_overrides.ex

@@ -32,10 +32,11 @@ defmodule MvWeb.AuthOverrides do
     set :root_class, "md:min-w-md"
   end
 
-  # Replace banner logo with text
+  # Replace banner logo with text (no image in light or dark so link has discernible text)
   override AshAuthentication.Phoenix.Components.Banner do
     set :text, "Mitgliederverwaltung"
     set :image_url, nil
+    set :dark_image_url, nil
   end
 
   # Translate the "or" in the horizontal rule (between password form and SSO).

lib/mv_web/live/auth/sign_in_live.ex

@@ -54,13 +54,15 @@ defmodule MvWeb.SignInLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div
+    <main
       id="sign-in-page"
+      role="main"
       class={@root_class}
       data-oidc-configured={to_string(@oidc_configured)}
       data-oidc-only={to_string(@oidc_only)}
       data-locale={@locale}
     >
+      <h1 class="sr-only">{dgettext("auth", "Sign in")}</h1>
       <%!-- Language selector --%>
       <nav
         aria-label={dgettext("auth", "Language selection")}
@@ -95,7 +97,7 @@ defmodule MvWeb.SignInLive do
         context={@context}
         gettext_fn={@gettext_fn}
       />
-    </div>
+    </main>
     """
   end
 end

priv/gettext/auth.pot

@@ -56,6 +56,8 @@ msgstr ""
 msgid "Reset password with token"
 msgstr ""
 
+#: lib/mv_web/live/auth/sign_in_live.ex
+#, elixir-autogen
 msgid "Sign in"
 msgstr ""
 

priv/gettext/de/LC_MESSAGES/auth.po

@@ -55,6 +55,8 @@ msgstr "Anfrage låuft..."
 msgid "Reset password with token"
 msgstr "Neues Passwort setzen"
 
+#: lib/mv_web/live/auth/sign_in_live.ex
+#, elixir-autogen
 msgid "Sign in"
 msgstr "Anmelden"
 

priv/gettext/en/LC_MESSAGES/auth.po

@@ -52,6 +52,8 @@ msgstr ""
 msgid "Reset password with token"
 msgstr ""
 
+#: lib/mv_web/live/auth/sign_in_live.ex
+#, elixir-autogen
 msgid "Sign in"
 msgstr ""