Add a shared search field, combobox and file input closes #625

simon commented

2026-10-28 08:29:47 +01:00

Owner

closes #625

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Search field, combobox and file input: the members overview searches through a shared search field that clears with one button or Escape, the group member picker, the user's member link and the filter field picker use one keyboard-driven combobox that sends no server round trip per key, the join form's Add field menu becomes a keyboard menu button, and the CSV import uses a shared file input that names the chosen file in its errors.

What has been changed?

Add a search field that clears with one button or Escape and keeps focus
Search members with the shared search field
Say when search and filters match no member and offer to clear them
Mark the search field available and show it in the component showcase
Add a combobox that picks one or several entities by keyboard without a server round trip per key
Add members with the shared combobox, searching every member in the database
Offer members whose name or email contains the typed text first when adding to a group
Link a member through the shared combobox and accept only a listed member
Pick a filter field with the shared combobox and close the picker without a page-wide key listener
Link and unlink a member at once, the chosen member shown as a chip in the field
Describe the available combobox, its first-option Enter and its option marker
Open the Add field menu without a server round trip and move through its fields by keyboard
Name the chosen file in upload errors and show its size through the shared file input
Mark the file input available and describe the Add field menu button
Record the shared search field, combobox and file input under Unreleased

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

Part of #188 (U7).
Larger commits: the search field, the combobox component, the group member picker, the user member link (both commits), the filter field picker, the Add field menu and the file input with the CSV import touch more than 5 files or 150 lines each.
Linking a member on an existing user now takes effect at once through "Link" and "Unlink" beside the field, without saving the form; a new user is linked when it is created. The server accepts a picked member only if it was listed for the sent query.
The combobox and the Add field menu follow the WAI-ARIA APG combobox and menu button patterns; their keyboard behavior runs in colocated hooks and was checked in Firefox and Chromium, as LiveViewTest runs no JavaScript.
The filter field picker no longer listens for keys on the whole page; the old ComboBox hook, the search bar component and the member dropdown navigation are removed.

closes #625 ## Description of the implemented changes The changes were: - [ ] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring Search field, combobox and file input: the members overview searches through a shared search field that clears with one button or Escape, the group member picker, the user's member link and the filter field picker use one keyboard-driven combobox that sends no server round trip per key, the join form's Add field menu becomes a keyboard menu button, and the CSV import uses a shared file input that names the chosen file in its errors. ## What has been changed? - Add a search field that clears with one button or Escape and keeps focus - Search members with the shared search field - Say when search and filters match no member and offer to clear them - Mark the search field available and show it in the component showcase - Add a combobox that picks one or several entities by keyboard without a server round trip per key - Add members with the shared combobox, searching every member in the database - Offer members whose name or email contains the typed text first when adding to a group - Link a member through the shared combobox and accept only a listed member - Pick a filter field with the shared combobox and close the picker without a page-wide key listener - Link and unlink a member at once, the chosen member shown as a chip in the field - Describe the available combobox, its first-option Enter and its option marker - Open the Add field menu without a server round trip and move through its fields by keyboard - Name the chosen file in upload errors and show its size through the shared file input - Mark the file input available and describe the Add field menu button - Record the shared search field, combobox and file input under Unreleased ## 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 Part of #188 (U7). Larger commits: the search field, the combobox component, the group member picker, the user member link (both commits), the filter field picker, the Add field menu and the file input with the CSV import touch more than 5 files or 150 lines each. Linking a member on an existing user now takes effect at once through "Link" and "Unlink" beside the field, without saving the form; a new user is linked when it is created. The server accepts a picked member only if it was listed for the sent query. The combobox and the Add field menu follow the WAI-ARIA APG combobox and menu button patterns; their keyboard behavior runs in colocated hooks and was checked in Firefox and Chromium, as LiveViewTest runs no JavaScript. The filter field picker no longer listens for keys on the whole page; the old ComboBox hook, the search bar component and the member dropdown navigation are removed.

simon added 15 commits

2026-10-28 08:29:47 +01:00

feat(components): add a search field that clears with one button or Escape and keeps focus a7e489ea48

feat(member-overview): search members with the shared search field b5d256c7b8

feat(member-overview): say when search and filters match no member and offer to clear them ecfc9f12d7

docs(guidelines): mark the search field available and show it in the component showcase 3e1d4bcf09

feat(components): add a combobox that picks one or several entities by keyboard without a server round trip per key 971cca3e02

feat(groups): add members with the shared combobox, searching every member in the database 6b5da73c52

feat(groups): offer members whose name or email contains the typed text first when adding to a group c757991d7f

feat(users): link a member through the shared combobox and accept only a listed member b74146874d

feat(member-overview): pick a filter field with the shared combobox and close the picker without a page-wide key listener 46137536b9

feat(users): link and unlink a member at once, the chosen member shown as a chip in the field 3831a395eb