Visual hierarchy for fields in member view and edit form - closes #231 #247

Merged
moritz merged 2 commits from feature/231_member_view_ui into main 2025-12-03 15:33:02 +01:00
Owner
  • 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

Description of the implemented changes

The changes were:

  • Bugfixing
  • New Feature
  • Breaking Change
  • Refactoring

Definition of Done

Code Quality

  • No new technical depths
  • Linting passed
  • Documentation is added were needed

Accessibility

  • New elements are properly defined with html-tags
  • Colour contrast follows WCAG criteria
  • Aria labels are added when needed
  • Everything is accessible by keyboard
  • Tab-Order is comprehensible
  • All interactive elements have a visible focus

Testing

  • Tests for new code are written
  • All tests pass
  • axe-core dev tools show no critical or major issues

Additional Notes

- 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 ## Description of the implemented changes The changes were: - [ ] Bugfixing - [x] New Feature - [ ] Breaking Change - [ ] Refactoring ## Definition of Done ### Code Quality - [x] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [ ] New elements are properly defined with html-tags - [ ] Colour contrast follows WCAG criteria - [ ] Aria labels are added when needed - [ ] Everything is accessible by keyboard - [ ] Tab-Order is comprehensible - [ ] All interactive elements have a visible focus ### Testing - [ ] Tests for new code are written - [x] All tests pass - [x] axe-core dev tools show no critical or major issues ## Additional Notes <!--- Add any additional information for the reviewers here -->
moritz self-assigned this 2025-12-03 13:37:58 +01:00
moritz added 1 commit 2025-12-03 13:37:59 +01:00
Redesign member view/edit UI with improved accessibility
All checks were successful
continuous-integration/drone/push Build is passing
710cd3538f
- 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
moritz force-pushed feature/231_member_view_ui from 710cd3538f to d24096ceaf 2025-12-03 13:46:11 +01:00 Compare
requested review from rafael 2025-12-03 14:35:40 +01:00
rafael approved these changes 2025-12-03 14:55:35 +01:00
@ -109,2 +241,2 @@
action = if is_nil(member), do: "New", else: "Edit"
page_title = action <> " " <> "Member"
action = if is_nil(member), do: gettext("New"), else: gettext("Edit")
page_title = "#{action} #{gettext("Member")}"
Collaborator

This won't work in german, I think

This won't work in german, I think
moritz marked this conversation as resolved
@ -217,0 +372,4 @@
# -----------------------------------------------------------------
# Returns input type for custom field based on value type
defp custom_field_input_type(:string), do: "text"
Collaborator

These functions should use gettext

These functions should use gettext
Author
Owner

the return values are HTML input types. So a translation doesn't make any sense here.

the return values are HTML input types. So a translation doesn't make any sense here.
moritz marked this conversation as resolved
@ -117,0 +240,4 @@
# Helper Functions
# -----------------------------------------------------------------
defp display_value(nil), do: ""
Collaborator

For nil, this should be an empty string (this is how we do it in other parts of the UI)

For nil, this should be an empty string (this is how we do it in other parts of the UI)
moritz marked this conversation as resolved
@ -117,0 +244,4 @@
defp display_value(""), do: ""
defp display_value(value), do: value
defp format_email_mailto(first_name, last_name, email) do
Collaborator

can we move this somewhere else so we can reuse it in the member overview?

can we move this somewhere else so we can reuse it in the member overview?
moritz marked this conversation as resolved
rafael reviewed 2025-12-03 15:03:19 +01:00
@ -82,0 +50,4 @@
</.button>
</div>
<%!-- Tab Navigation --%>
Collaborator

I think these tabs are confusing at the moment.

I think these tabs are confusing at the moment.
moritz force-pushed feature/231_member_view_ui from d24096ceaf to 2542bcf9e4 2025-12-03 15:31:24 +01:00 Compare
moritz merged commit 5c1a766e87 into main 2025-12-03 15:33:02 +01:00
moritz deleted branch feature/231_member_view_ui 2025-12-03 15:33:03 +01:00
Sign in to join this conversation.
No description provided.