fix accessibility issues

This commit is contained in:
Moritz 2025-11-06 18:56:22 +01:00 committed by moritz
parent d02461f8ea
commit 918b02a714
6 changed files with 86 additions and 78 deletions

View file

@ -232,61 +232,64 @@ defmodule MvWeb.LinkOidcAccountLive do
~H"""
<div class="mx-auto max-w-sm mt-16">
<%!-- Language Selector --%>
<div class="flex justify-center mb-4">
<nav aria-label={dgettext("auth", "Language selection")} class="flex justify-center mb-4">
<form method="post" action="/set_locale" class="text-sm">
<input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
<select
name="locale"
onchange="this.form.submit()"
class="select select-sm select-bordered"
aria-label={dgettext("auth", "Select language")}
>
<option value="de" selected={Gettext.get_locale() == "de"}>🇩🇪 Deutsch</option>
<option value="en" selected={Gettext.get_locale() == "en"}>🇬🇧 English</option>
</select>
</form>
</div>
</nav>
<.header class="text-center">
{dgettext("auth", "Link OIDC Account")}
<:subtitle>
{dgettext(
"auth",
"An account with email %{email} already exists. Please enter your password to link your OIDC account.",
email: @user.email
)}
</:subtitle>
</.header>
<main>
<.header class="text-center">
{dgettext("auth", "Link OIDC Account")}
<:subtitle>
{dgettext(
"auth",
"An account with email %{email} already exists. Please enter your password to link your OIDC account.",
email: @user.email
)}
</:subtitle>
</.header>
<.form for={@form} id="link-oidc-form" phx-submit="submit" phx-change="validate" class="mt-8">
<div class="space-y-6">
<div>
<.input
field={@form[:password]}
type="password"
label={dgettext("auth", "Password")}
required
/>
</div>
<%= if @error do %>
<div class="rounded-md bg-red-50 p-4">
<p class="text-sm text-red-800">{@error}</p>
<.form for={@form} id="link-oidc-form" phx-submit="submit" phx-change="validate" class="mt-8">
<div class="space-y-6">
<div>
<.input
field={@form[:password]}
type="password"
label={dgettext("auth", "Password")}
required
/>
</div>
<% end %>
<div>
<.button phx-disable-with={dgettext("auth", "Linking...")} class="w-full">
{dgettext("auth", "Link Account")}
</.button>
<%= if @error do %>
<div class="rounded-md bg-red-50 p-4">
<p class="text-sm text-red-800">{@error}</p>
</div>
<% end %>
<div>
<.button phx-disable-with={dgettext("auth", "Linking...")} class="w-full">
{dgettext("auth", "Link Account")}
</.button>
</div>
</div>
</div>
</.form>
</.form>
<div class="mt-4 text-center text-sm">
<.link navigate={~p"/sign-in"} class="text-brand hover:underline">
{dgettext("auth", "Cancel")}
</.link>
</div>
<div class="mt-4 text-center text-sm">
<.link navigate={~p"/sign-in"} class="text-brand hover:underline">
{dgettext("auth", "Cancel")}
</.link>
</div>
</main>
</div>
"""
end