Redesign member view/edit UI with improved accessibility
All checks were successful
continuous-integration/drone/push Build is passing

- Group fields into Personal Data, Custom Fields, and Payment Data sections
- Fix WCAG AA contrast issues and semantic HTML (dt/dd in dl)
- Format mailto links with member name in href attribute
This commit is contained in:
Moritz 2025-12-03 13:34:44 +01:00
parent 0cafdbafcd
commit d24096ceaf
Signed by: moritz
GPG key ID: 1020A035E5DD0824
5 changed files with 906 additions and 314 deletions

View file

@ -27,9 +27,8 @@ msgstr "Bist du sicher?"
msgid "Attempting to reconnect"
msgstr "Verbindung wird wiederhergestellt"
#: lib/mv_web/live/member_live/form.ex:53
#: lib/mv_web/live/member_live/form.ex:100
#: lib/mv_web/live/member_live/index.html.heex:184
#: lib/mv_web/live/member_live/show.ex:58
#, elixir-autogen, elixir-format
msgid "City"
msgstr "Stadt"
@ -40,6 +39,7 @@ msgstr "Stadt"
msgid "Delete"
msgstr "Löschen"
#: lib/mv_web/live/member_live/form.ex:241
#: lib/mv_web/live/member_live/index.html.heex:242
#: lib/mv_web/live/user_live/form.ex:265
#: lib/mv_web/live/user_live/index.html.heex:66
@ -47,15 +47,15 @@ msgstr "Löschen"
msgid "Edit"
msgstr "Bearbeite"
#: lib/mv_web/live/member_live/show.ex:41
#: lib/mv_web/live/member_live/show.ex:116
#: lib/mv_web/live/member_live/show.ex:40
#: lib/mv_web/live/member_live/show.ex:197
#, elixir-autogen, elixir-format
msgid "Edit Member"
msgstr "Mitglied bearbeiten"
#: lib/mv_web/live/member_live/form.ex:47
#: lib/mv_web/live/member_live/form.ex:106
#: lib/mv_web/live/member_live/index.html.heex:112
#: lib/mv_web/live/member_live/show.ex:50
#: lib/mv_web/live/member_live/show.ex:75
#: lib/mv_web/live/user_live/form.ex:46
#: lib/mv_web/live/user_live/index.html.heex:44
#: lib/mv_web/live/user_live/show.ex:50
@ -63,25 +63,26 @@ msgstr "Mitglied bearbeiten"
msgid "Email"
msgstr "E-Mail"
#: lib/mv_web/live/member_live/form.ex:45
#: lib/mv_web/live/member_live/show.ex:48
#: lib/mv_web/live/member_live/form.ex:81
#: lib/mv_web/live/member_live/show.ex:64
#, elixir-autogen, elixir-format
msgid "First Name"
msgstr "Vorname"
#: lib/mv_web/live/member_live/form.ex:50
#: lib/mv_web/live/member_live/form.ex:117
#: lib/mv_web/live/member_live/index.html.heex:220
#: lib/mv_web/live/member_live/show.ex:55
#: lib/mv_web/live/member_live/show.ex:93
#, elixir-autogen, elixir-format
msgid "Join Date"
msgstr "Beitrittsdatum"
#: lib/mv_web/live/member_live/form.ex:46
#: lib/mv_web/live/member_live/show.ex:49
#: lib/mv_web/live/member_live/form.ex:84
#: lib/mv_web/live/member_live/show.ex:65
#, elixir-autogen, elixir-format
msgid "Last Name"
msgstr "Nachname"
#: lib/mv_web/live/member_live/form.ex:44
#: lib/mv_web/live/member_live/index.html.heex:29
#, elixir-autogen, elixir-format
msgid "New Member"
@ -108,49 +109,45 @@ msgstr "Keine Internetverbindung gefunden"
msgid "close"
msgstr "schließen"
#: lib/mv_web/live/member_live/form.ex:51
#: lib/mv_web/live/member_live/show.ex:56
#: lib/mv_web/live/member_live/form.ex:120
#: lib/mv_web/live/member_live/show.ex:98
#, elixir-autogen, elixir-format
msgid "Exit Date"
msgstr "Austrittsdatum"
#: lib/mv_web/live/member_live/form.ex:55
#: lib/mv_web/live/member_live/index.html.heex:148
#: lib/mv_web/live/member_live/show.ex:60
#, elixir-autogen, elixir-format
msgid "House Number"
msgstr "Hausnummer"
#: lib/mv_web/live/member_live/form.ex:52
#: lib/mv_web/live/member_live/show.ex:57
#: lib/mv_web/live/member_live/form.ex:126
#: lib/mv_web/live/member_live/show.ex:124
#, elixir-autogen, elixir-format
msgid "Notes"
msgstr "Notizen"
#: lib/mv_web/live/components/payment_filter_component.ex:94
#: lib/mv_web/live/components/payment_filter_component.ex:144
#: lib/mv_web/live/member_live/form.ex:48
#: lib/mv_web/live/member_live/form.ex:199
#: lib/mv_web/live/member_live/index.html.heex:229
#: lib/mv_web/live/member_live/show.ex:51
#: lib/mv_web/live/member_live/show.ex:162
#: lib/mv_web/live/member_live/show.ex:164
#, elixir-autogen, elixir-format
msgid "Paid"
msgstr "Bezahlt"
#: lib/mv_web/live/member_live/form.ex:49
#: lib/mv_web/live/member_live/index.html.heex:202
#: lib/mv_web/live/member_live/show.ex:54
#, elixir-autogen, elixir-format
msgid "Phone Number"
msgstr "Telefonnummer"
#: lib/mv_web/live/member_live/form.ex:56
#: lib/mv_web/live/member_live/form.ex:97
#: lib/mv_web/live/member_live/index.html.heex:166
#: lib/mv_web/live/member_live/show.ex:61
#, elixir-autogen, elixir-format
msgid "Postal Code"
msgstr "Postleitzahl"
#: lib/mv_web/live/member_live/form.ex:79
#: lib/mv_web/live/member_live/form.ex:211
#, elixir-autogen, elixir-format
msgid "Save Member"
msgstr "Mitglied speichern"
@ -158,58 +155,48 @@ msgstr "Mitglied speichern"
#: lib/mv_web/live/custom_field_live/form.ex:66
#: lib/mv_web/live/custom_field_value_live/form.ex:74
#: lib/mv_web/live/global_settings_live.ex:55
#: lib/mv_web/live/member_live/form.ex:78
#: lib/mv_web/live/member_live/form.ex:48
#: lib/mv_web/live/member_live/form.ex:210
#: lib/mv_web/live/user_live/form.ex:248
#, elixir-autogen, elixir-format
msgid "Saving..."
msgstr "Speichern..."
#: lib/mv_web/live/member_live/form.ex:54
#: lib/mv_web/live/member_live/form.ex:91
#: lib/mv_web/live/member_live/index.html.heex:130
#: lib/mv_web/live/member_live/show.ex:59
#, elixir-autogen, elixir-format
msgid "Street"
msgstr "Straße"
#: lib/mv_web/live/member_live/show.ex:47
#, elixir-autogen, elixir-format
msgid "Id"
msgstr "ID"
#: lib/mv_web/live/member_live/index.html.heex:234
#: lib/mv_web/live/member_live/index/formatter.ex:61
#: lib/mv_web/live/member_live/show.ex:52
#: lib/mv_web/live/member_live/show.ex:303
#, elixir-autogen, elixir-format
msgid "No"
msgstr "Nein"
#: lib/mv_web/live/member_live/show.ex:115
#: lib/mv_web/live/member_live/show.ex:196
#, elixir-autogen, elixir-format, fuzzy
msgid "Show Member"
msgstr "Mitglied anzeigen"
#: lib/mv_web/live/member_live/show.ex:33
#, elixir-autogen, elixir-format
msgid "This is a member record from your database."
msgstr "Dies ist ein Mitglied aus deiner Datenbank."
#: lib/mv_web/live/member_live/index.html.heex:234
#: lib/mv_web/live/member_live/index/formatter.ex:60
#: lib/mv_web/live/member_live/show.ex:52
#: lib/mv_web/live/member_live/show.ex:303
#, elixir-autogen, elixir-format
msgid "Yes"
msgstr "Ja"
#: lib/mv_web/live/custom_field_live/form.ex:110
#: lib/mv_web/live/custom_field_value_live/form.ex:233
#: lib/mv_web/live/member_live/form.ex:137
#: lib/mv_web/live/member_live/form.ex:269
#, elixir-autogen, elixir-format
msgid "create"
msgstr "erstellt"
#: lib/mv_web/live/custom_field_live/form.ex:111
#: lib/mv_web/live/custom_field_value_live/form.ex:234
#: lib/mv_web/live/member_live/form.ex:138
#: lib/mv_web/live/member_live/form.ex:270
#, elixir-autogen, elixir-format
msgid "update"
msgstr "aktualisiert"
@ -219,7 +206,7 @@ msgstr "aktualisiert"
msgid "Incorrect email or password"
msgstr "Falsche E-Mail oder Passwort"
#: lib/mv_web/live/member_live/form.ex:144
#: lib/mv_web/live/member_live/form.ex:276
#, elixir-autogen, elixir-format
msgid "Member %{action} successfully"
msgstr "Mitglied %{action} erfolgreich"
@ -252,7 +239,7 @@ msgstr "Ihr Passwort wurde erfolgreich zurückgesetzt"
#: lib/mv_web/live/custom_field_live/form.ex:69
#: lib/mv_web/live/custom_field_live/index.ex:120
#: lib/mv_web/live/custom_field_value_live/form.ex:77
#: lib/mv_web/live/member_live/form.ex:81
#: lib/mv_web/live/member_live/form.ex:208
#: lib/mv_web/live/user_live/form.ex:251
#, elixir-autogen, elixir-format
msgid "Cancel"
@ -300,6 +287,7 @@ msgid "Listing Users"
msgstr "Benutzer*innen auflisten"
#: lib/mv_web/live/custom_field_value_live/form.ex:60
#: lib/mv_web/live/member_live/form.ex:242
#, elixir-autogen, elixir-format
msgid "Member"
msgstr "Mitglied"
@ -427,6 +415,7 @@ msgstr "aufsteigend"
msgid "descending"
msgstr "absteigend"
#: lib/mv_web/live/member_live/form.ex:241
#: lib/mv_web/live/user_live/form.ex:265
#, elixir-autogen, elixir-format
msgid "New"
@ -509,7 +498,7 @@ msgstr "Benutzer*in wird ohne Passwort erstellt. Aktivieren Sie 'Passwort setzen
msgid "Linked Member"
msgstr "Verknüpftes Mitglied"
#: lib/mv_web/live/member_live/show.ex:62
#: lib/mv_web/live/member_live/show.ex:106
#, elixir-autogen, elixir-format
msgid "Linked User"
msgstr "Verknüpfte*r Benutzer*in"
@ -520,13 +509,12 @@ msgstr "Verknüpfte*r Benutzer*in"
msgid "No member linked"
msgstr "Kein Mitglied verknüpft"
#: lib/mv_web/live/member_live/show.ex:72
#: lib/mv_web/live/member_live/show.ex:116
#, elixir-autogen, elixir-format
msgid "No user linked"
msgstr "Keine*r Benutzer*in verknüpft"
#: lib/mv_web/live/member_live/show.ex:36
#: lib/mv_web/live/member_live/show.ex:38
#: lib/mv_web/live/member_live/show.ex:30
#, elixir-autogen, elixir-format
msgid "Back to members list"
msgstr "Zurück zur Mitgliederliste"
@ -607,12 +595,6 @@ msgstr "Diese E-Mail-Adresse ist bereits mit einem anderen OIDC-Konto verknüpft
msgid "Choose a custom field"
msgstr "Wähle ein Benutzerdefiniertes Feld"
#: lib/mv_web/live/member_live/form.ex:58
#: lib/mv_web/live/member_live/show.ex:77
#, elixir-autogen, elixir-format
msgid "Custom Field Values"
msgstr "Benutzerdefinierte Feldwerte"
#: lib/mv_web/live/custom_field_value_live/form.ex:51
#, elixir-autogen, elixir-format
msgid "Custom field"
@ -649,6 +631,8 @@ msgid "Use this form to manage custom_field records in your database."
msgstr "Verwende dieses Formular, um Benutzerdefinierte Felder in deiner Datenbank zu verwalten."
#: lib/mv_web/components/layouts/navbar.ex:26
#: lib/mv_web/live/member_live/form.ex:135
#: lib/mv_web/live/member_live/show.ex:136
#, elixir-autogen, elixir-format
msgid "Custom Fields"
msgstr "Benutzerdefinierte Felder"
@ -818,11 +802,6 @@ msgstr "Im E-Mail-Programm öffnen"
msgid "Tip: Paste email addresses into the BCC field for privacy compliance"
msgstr "Tipp: E-Mail-Adressen ins BCC-Feld einfügen für Datenschutzkonformität"
#: lib/mv_web/live/member_live/form.ex:40
#, elixir-autogen, elixir-format
msgid "Fields marked with an asterisk (*) cannot be empty."
msgstr "Felder, die mit einem Sternchen (*) markiert sind, dürfen nicht leer bleiben."
#: lib/mv_web/components/core_components.ex:206
#: lib/mv_web/components/core_components.ex:223
#: lib/mv_web/components/core_components.ex:250
@ -853,8 +832,103 @@ msgstr "Nicht bezahlt"
msgid "Payment filter"
msgstr "Zahlungsfilter"
#~ #: lib/mv_web/live/member_live/form.ex:48
#~ #: lib/mv_web/live/member_live/show.ex:51
#: lib/mv_web/live/member_live/show.ex:70
#, elixir-autogen, elixir-format
msgid "Address"
msgstr "Adresse"
#: lib/mv_web/live/member_live/form.ex:37
#: lib/mv_web/live/member_live/show.ex:32
#, elixir-autogen, elixir-format
msgid "Back"
msgstr "Zurück"
#: lib/mv_web/live/member_live/form.ex:65
#: lib/mv_web/live/member_live/show.ex:50
#, elixir-autogen, elixir-format
msgid "Coming soon"
msgstr "Demnächst verfügbar"
#: lib/mv_web/live/member_live/form.ex:57
#: lib/mv_web/live/member_live/show.ex:48
#, elixir-autogen, elixir-format
msgid "Contact Data"
msgstr "Kontaktdaten"
#: lib/mv_web/live/member_live/form.ex:175
#: lib/mv_web/live/member_live/show.ex:160
#, elixir-autogen, elixir-format
msgid "Contribution"
msgstr "Beitrag"
#: lib/mv_web/live/member_live/form.ex:94
#, elixir-autogen, elixir-format
msgid "Nr."
msgstr "Nr."
#: lib/mv_web/live/member_live/form.ex:186
#: lib/mv_web/live/member_live/show.ex:161
#, elixir-autogen, elixir-format
msgid "Payment Cycle"
msgstr "Zahlungszyklus"
#: lib/mv_web/live/member_live/form.ex:166
#: lib/mv_web/live/member_live/show.ex:153
#, elixir-autogen, elixir-format
msgid "Payment Data"
msgstr "Beitragsdaten"
#: lib/mv_web/live/member_live/form.ex:68
#: lib/mv_web/live/member_live/show.ex:52
#, elixir-autogen, elixir-format
msgid "Payments"
msgstr "Zahlungen"
#: lib/mv_web/live/member_live/show.ex:166
#, elixir-autogen, elixir-format
msgid "Pending"
msgstr "Ausstehend"
#: lib/mv_web/live/member_live/form.ex:76
#: lib/mv_web/live/member_live/show.ex:60
#, elixir-autogen, elixir-format
msgid "Personal Data"
msgstr "Persönliche Daten"
#: lib/mv_web/live/member_live/form.ex:111
#: lib/mv_web/live/member_live/show.ex:87
#, elixir-autogen, elixir-format
msgid "Phone"
msgstr "Telefon"
#: lib/mv_web/live/member_live/form.ex:49
#, elixir-autogen, elixir-format
msgid "Save"
msgstr "Speichern"
#: lib/mv_web/live/member_live/form.ex:169
#: lib/mv_web/live/member_live/show.ex:156
#, elixir-autogen, elixir-format
msgid "This data is for demonstration purposes only (mockup)."
msgstr "Diese Daten dienen nur zu Demonstrationszwecken (Mockup)."
#: lib/mv_web/live/member_live/form.ex:190
#: lib/mv_web/live/member_live/show.ex:161
#, elixir-autogen, elixir-format
msgid "monthly"
msgstr "monatlich"
#: lib/mv_web/live/member_live/form.ex:194
#, elixir-autogen, elixir-format
msgid "yearly"
msgstr "jährlich"
#~ #: lib/mv_web/live/member_live/show.ex:47
#~ #, elixir-autogen, elixir-format
#~ msgid "Birth Date"
#~ msgstr "Geburtsdatum"
#~ msgid "Id"
#~ msgstr "ID"
#~ #: lib/mv_web/live/member_live/show.ex:33
#~ #, elixir-autogen, elixir-format
#~ msgid "This is a member record from your database."
#~ msgstr "Dies ist ein Mitglied aus deiner Datenbank."