Fix verified UI defects closes #593

simon commented

2026-10-16 16:40:24 +02:00

Owner

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Fix verified UI defects (dialogs, keyboard access, upload errors, duplicate toasts): legacy dialogs now close on Escape and return focus to the control that opened them, several controls become keyboard-operable with a visible focus, CSV upload errors are shown and translated, the user form uses theme colors, and every page renders exactly one flash container, so notifications no longer appear twice.

What has been changed?

Close the delete dialog on Escape in its own component
Make the fee and deactivate dialogs operable by keyboard
Bind legacy dialog Escape on the window
Make join form add-field entries keyboard-operable buttons
Show a focus ring on table sort buttons
Show translated upload errors below the CSV field
Keep member picker keys on its input and reload members only on email change
Use theme callouts instead of palette colors in the user form
Center the avatar initial with the daisyUI v5 placeholder class
Use theme styles for the OIDC linking page link and error
Pin the email field to the top of the join form
Announce sortable table reorders in the user's language
Render a single flash container per page

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

CODE_GUIDELINES §8.11 (legacy dialog pattern) is corrected: an element-scoped phx-keydown on a <dialog> never fires in the browser because focus sits on an inner element, so the legacy Escape binding is phx-window-keydown on the dialog. Existing LiveViewTest render_keydown tests did not catch this; it was found in the browser acceptance test.
The member picker in the user form has no search debounce: LiveView debounces all events of an element through one timer, so a debounced search would also delay arrow keys and focus. Each keystroke runs one search (max. 10 results). A debounce with undelayed keys is left for a follow-up issue (also affects the group member picker).
Pages without the app/public layout (password reset and confirmation library pages) no longer render their own flash/reconnect container; their flashes appear on the page they redirect to.
Larger commits: "Make the fee and deactivate dialogs operable by keyboard" and "Pin the email field to the top of the join form" each touch more than 5 files.

## Description of the implemented changes The changes were: - [x] Bugfixing - [ ] New Feature - [ ] Breaking Change - [ ] Refactoring Fix verified UI defects (dialogs, keyboard access, upload errors, duplicate toasts): legacy dialogs now close on Escape and return focus to the control that opened them, several controls become keyboard-operable with a visible focus, CSV upload errors are shown and translated, the user form uses theme colors, and every page renders exactly one flash container, so notifications no longer appear twice. ## What has been changed? - Close the delete dialog on Escape in its own component - Make the fee and deactivate dialogs operable by keyboard - Bind legacy dialog Escape on the window - Make join form add-field entries keyboard-operable buttons - Show a focus ring on table sort buttons - Show translated upload errors below the CSV field - Keep member picker keys on its input and reload members only on email change - Use theme callouts instead of palette colors in the user form - Center the avatar initial with the daisyUI v5 placeholder class - Use theme styles for the OIDC linking page link and error - Pin the email field to the top of the join form - Announce sortable table reorders in the user's language - Render a single flash container per page ## Definition of Done ### Code Quality - [ ] 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 - [x] Tests for new code are written - [x] All tests pass - [ ] axe-core dev tools show no critical or major issues ## Additional Notes - CODE_GUIDELINES §8.11 (legacy dialog pattern) is corrected: an element-scoped `phx-keydown` on a `<dialog>` never fires in the browser because focus sits on an inner element, so the legacy Escape binding is `phx-window-keydown` on the dialog. Existing LiveViewTest `render_keydown` tests did not catch this; it was found in the browser acceptance test. - The member picker in the user form has no search debounce: LiveView debounces all events of an element through one timer, so a debounced search would also delay arrow keys and focus. Each keystroke runs one search (max. 10 results). A debounce with undelayed keys is left for a follow-up issue (also affects the group member picker). - Pages without the app/public layout (password reset and confirmation library pages) no longer render their own flash/reconnect container; their flashes appear on the page they redirect to. - Larger commits: "Make the fee and deactivate dialogs operable by keyboard" and "Pin the email field to the top of the join form" each touch more than 5 files.

simon added 15 commits

2026-10-16 16:40:24 +02:00

fix(custom-field): close the delete dialog on Escape in its own component b281dc95f7

fix(member): make the fee and deactivate dialogs operable by keyboard 9af78faf05

docs(guidelines): bind legacy dialog Escape on the window 77e2c36c0a

fix(settings): make join form add-field entries keyboard-operable buttons 484cecc14d

fix(web): show a focus ring on table sort buttons 00c9e20cee

fix(import): show translated upload errors below the CSV field e24603e10c

fix(user): keep member picker keys on its input and reload members only on email change bf3bc36349

fix(user): use theme callouts instead of palette colors in the user form a35083cccc

fix(sidebar): center the avatar initial with the daisyUI v5 placeholder class 15d456a187

fix(auth): use theme styles for the OIDC linking page link and error 1962599490