Improve member view table behavior+style, fix config settings

simon commented

2026-05-08 12:21:23 +02:00

Owner

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

This PR standardizes interactive table behavior and improves settings robustness.
It makes the new hover/focus-visible row highlight the default for clickable tables, keeps sticky first-column behavior configurable (and optimized for member selection UX), and tightens SMTP source-of-truth handling so ENV-based and UI-based configuration do not conflict.

What has been changed?

Refactored CoreComponents.table to expose interaction state via data-row-interactive and moved default row hover/focus styling to CSS.
Made the new row highlight behavior (hover + :has(:focus-visible)) the default for clickable zebra tables.
Kept sticky-first-column as an explicit table option and preserved sticky-specific selection accent behavior.
Updated member overview table usage to the sticky-first-column mode and refined scrolling behavior (table scrollbar within container, not page-coupled).
Adjusted table-related tests to validate the new interaction contract (attribute/CSS-driven behavior instead of legacy ring classes).
Improved SMTP config handling:
- clearer ENV-vs-Settings behavior (ENV-only mode when host env is set),
- read-only and warning behavior in global settings UI when required env keys are missing,
- updated related config/tests/docs.
Updated docs and changelog (CHANGELOG.md, DESIGN_GUIDELINES.md, CODE_GUIDELINES.md, SMTP concept docs).
Updated gettext catalogs (default.pot, en, de) for new/changed UI strings.

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

Branch includes 4 commits:
- fix: make sure smtp can be set either via env or ui
- fix: make horizontal scrollbars sticky to bottom
- docs: update changelog
- feat: make checkbox column in member view sticky
Full fast suite passed (mix test --exclude slow --exclude ui): 2017 tests, 0 failures (plus expected non-failing warning logs in test output).
Reviewer focus areas:
1. Cross-table UX consistency after moving row interaction styling to component/CSS contract.
2. Sticky table behavior (selection accent stripe, zebra background, keyboard focus visibility).
3. SMTP precedence and UI constraints in global settings when ENV mode is active.
4. Regression risk in tests that previously asserted ring-based row classes.
No breaking API changes expected; behavior change is primarily visual/interaction-level and intentional.

## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring This PR standardizes interactive table behavior and improves settings robustness. It makes the new hover/focus-visible row highlight the default for clickable tables, keeps sticky first-column behavior configurable (and optimized for member selection UX), and tightens SMTP source-of-truth handling so ENV-based and UI-based configuration do not conflict. ## What has been changed? - Refactored `CoreComponents.table` to expose interaction state via `data-row-interactive` and moved default row hover/focus styling to CSS. - Made the new row highlight behavior (`hover` + `:has(:focus-visible)`) the default for clickable zebra tables. - Kept sticky-first-column as an explicit table option and preserved sticky-specific selection accent behavior. - Updated member overview table usage to the sticky-first-column mode and refined scrolling behavior (table scrollbar within container, not page-coupled). - Adjusted table-related tests to validate the new interaction contract (attribute/CSS-driven behavior instead of legacy ring classes). - Improved SMTP config handling: - clearer ENV-vs-Settings behavior (ENV-only mode when host env is set), - read-only and warning behavior in global settings UI when required env keys are missing, - updated related config/tests/docs. - Updated docs and changelog (`CHANGELOG.md`, `DESIGN_GUIDELINES.md`, `CODE_GUIDELINES.md`, SMTP concept docs). - Updated gettext catalogs (`default.pot`, `en`, `de`) for new/changed UI strings. ## Definition of Done ### Code Quality - [x] No new technical depths - [x] Linting passed - [x] Documentation is added were needed ### Accessibility - [x] New elements are properly defined with html-tags - [x] Colour contrast follows WCAG criteria - [x] Aria labels are added when needed - [x] Everything is accessible by keyboard - [x] Tab-Order is comprehensible - [x] All interactive elements have a visible focus ### Testing - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - Branch includes 4 commits: - `fix: make sure smtp can be set either via env or ui` - `fix: make horizontal scrollbars sticky to bottom` - `docs: update changelog` - `feat: make checkbox column in member view sticky` - Full fast suite passed (`mix test --exclude slow --exclude ui`): 2017 tests, 0 failures (plus expected non-failing warning logs in test output). - Reviewer focus areas: 1. **Cross-table UX consistency** after moving row interaction styling to component/CSS contract. 2. **Sticky table behavior** (selection accent stripe, zebra background, keyboard focus visibility). 3. **SMTP precedence and UI constraints** in global settings when ENV mode is active. 4. **Regression risk in tests** that previously asserted ring-based row classes. - No breaking API changes expected; behavior change is primarily visual/interaction-level and intentional.

simon added 4 commits 2026-05-08 12:21:25 +02:00