One mechanism for menus, popovers and tooltips closes #627 #630

Merged

simon merged 29 commits from issue/mitgliederverwaltung-627 into main

2026-10-29 13:41:38 +01:00

simon commented

2026-10-29 13:07:45 +01:00

Owner

closes #627

Description of the implemented changes

The changes were:

Bugfixing
New Feature
Breaking Change
Refactoring

Menus, popovers and tooltips: every menu, pop-up panel and tooltip opens at once in the browser's top layer, is never clipped, closes with Escape or a click outside and returns keyboard focus, through one menu button, one popover and one tooltip component.

What has been changed?

Add a popover and a keyboard menu button that open in the top layer without a server round trip
Choose columns and view settings with checkboxes that stay open while toggling
Open the Actions menu at once and move through it by keyboard, saying in the menu why mailing is unavailable
Open the member sort-field menu through the shared menu button, on the chosen field
Open Add field through the shared menu button so the menu is never clipped
Open the user menu and the collapsed Administration flyout as link lists that close with Escape
Drop the server-state dropdown and the floating panel, and show the menu button and popover in the showcase
Mark the menu button and popover available and settle the fallback without anchor positioning
Let the server open a popover on mount and drop unsaved input when it closes
Open the filter picker and value controls at once, in the top layer, closing with Escape or a click outside
Drop the server-held popup exception now the filter builder opens in the browser
Rebuild the tooltip so it shows on keyboard focus, stays while hovered and closes with Escape
Show sort, payment and menu hints through the one tooltip hook and drop the two older ones
Name collapsed entries in a tooltip that also shows on keyboard focus and closes with Escape
Explain locked fields and link syntax in visible text and show a field's join form text by click
Show the required-field hint through the shared tooltip, on hover only
Drop browser title tooltips from charts, labelled buttons and clickable rows
Keep the tooltip's position classes apart from daisyUI's and let the UI guard reject data-tip, raw tooltips and dropdowns
Describe the rebuilt tooltip, when it describes or stays silent, and where longer help goes
Shorten the Vereinfacht sync hint to tooltip length
Render every tooltip popup through one component
Mark the keyboard position in the Columns and View checkbox rows
Give the user menu the shared focus ring and drop leftovers of the replaced dropdowns
Mark required fields with the asterisk alone, without a hover hint
Remove a field from the form with the ghost × used for every relation
Give the join form text popover more room and the title Text in the join form
Show the user menu's keyboard focus as a round ring on the avatar again
Center the theme toggle under the logo and keep the footer's height when the sidebar collapses
Record the shared menus, pop-up panels and tooltips 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 (U8).

Larger commits: the popover and menu button components, the Columns and View panels, the Actions menu, the sort-field menu, the Add field menu, the removal of the server-state dropdown and floating panel, the filter builder, the rebuilt tooltip and its migration, the visible field hints and the required-field marking touch more than 5 files or 150 lines each.

Popups use the native Popover API with CSS anchor positioning. Browsers without anchor positioning (e.g. Firefox ESR 140) open menus and panels centered over a backdrop and show no tooltips; the trigger's name and description still reach assistive technology (DESIGN_GUIDELINES §20.1, §20.2).

The member filter builder now opens its field picker and value controls in the browser instead of holding the open state on the server; half-entered values are still dropped on close.

The user menu and the collapsed Administration flyout are disclosures of links (no menu roles), following the APG disclosure navigation pattern.

Browser title tooltips are gone from charts, labelled buttons and clickable rows; title remains only as the overflow hint on truncated cells. The UI guard rejects data-tip, raw tooltip popups and daisyUI dropdowns.

Removed: dropdown_menu/1, floating_panel/1, and the PopoverTooltip and HoverPopover hooks (replaced by the Tooltip hook).

closes #627 ## Description of the implemented changes The changes were: - [x] Bugfixing - [x] New Feature - [ ] Breaking Change - [x] Refactoring Menus, popovers and tooltips: every menu, pop-up panel and tooltip opens at once in the browser's top layer, is never clipped, closes with Escape or a click outside and returns keyboard focus, through one menu button, one popover and one tooltip component. ## What has been changed? - Add a popover and a keyboard menu button that open in the top layer without a server round trip - Choose columns and view settings with checkboxes that stay open while toggling - Open the Actions menu at once and move through it by keyboard, saying in the menu why mailing is unavailable - Open the member sort-field menu through the shared menu button, on the chosen field - Open Add field through the shared menu button so the menu is never clipped - Open the user menu and the collapsed Administration flyout as link lists that close with Escape - Drop the server-state dropdown and the floating panel, and show the menu button and popover in the showcase - Mark the menu button and popover available and settle the fallback without anchor positioning - Let the server open a popover on mount and drop unsaved input when it closes - Open the filter picker and value controls at once, in the top layer, closing with Escape or a click outside - Drop the server-held popup exception now the filter builder opens in the browser - Rebuild the tooltip so it shows on keyboard focus, stays while hovered and closes with Escape - Show sort, payment and menu hints through the one tooltip hook and drop the two older ones - Name collapsed entries in a tooltip that also shows on keyboard focus and closes with Escape - Explain locked fields and link syntax in visible text and show a field's join form text by click - Show the required-field hint through the shared tooltip, on hover only - Drop browser title tooltips from charts, labelled buttons and clickable rows - Keep the tooltip's position classes apart from daisyUI's and let the UI guard reject data-tip, raw tooltips and dropdowns - Describe the rebuilt tooltip, when it describes or stays silent, and where longer help goes - Shorten the Vereinfacht sync hint to tooltip length - Render every tooltip popup through one component - Mark the keyboard position in the Columns and View checkbox rows - Give the user menu the shared focus ring and drop leftovers of the replaced dropdowns - Mark required fields with the asterisk alone, without a hover hint - Remove a field from the form with the ghost × used for every relation - Give the join form text popover more room and the title Text in the join form - Show the user menu's keyboard focus as a round ring on the avatar again - Center the theme toggle under the logo and keep the footer's height when the sidebar collapses - Record the shared menus, pop-up panels and tooltips 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 (U8). Larger commits: the popover and menu button components, the Columns and View panels, the Actions menu, the sort-field menu, the Add field menu, the removal of the server-state dropdown and floating panel, the filter builder, the rebuilt tooltip and its migration, the visible field hints and the required-field marking touch more than 5 files or 150 lines each. Popups use the native Popover API with CSS anchor positioning. Browsers without anchor positioning (e.g. Firefox ESR 140) open menus and panels centered over a backdrop and show no tooltips; the trigger's name and description still reach assistive technology (DESIGN_GUIDELINES §20.1, §20.2). The member filter builder now opens its field picker and value controls in the browser instead of holding the open state on the server; half-entered values are still dropped on close. The user menu and the collapsed Administration flyout are disclosures of links (no menu roles), following the APG disclosure navigation pattern. Browser `title` tooltips are gone from charts, labelled buttons and clickable rows; `title` remains only as the overflow hint on truncated cells. The UI guard rejects `data-tip`, raw tooltip popups and daisyUI dropdowns. Removed: `dropdown_menu/1`, `floating_panel/1`, and the `PopoverTooltip` and `HoverPopover` hooks (replaced by the `Tooltip` hook).

simon added 29 commits

2026-10-29 13:07:45 +01:00

feat(components): add a popover and a keyboard menu button that open in the top layer without a server round trip 8c8774b029

feat(member-overview): choose columns and view settings with checkboxes that stay open while toggling 9f5d9f6ff8

feat(member-overview): open the Actions menu at once and move through it by keyboard, saying in the menu why mailing is unavailable 245a2aa3b2

refactor(member-overview): open the member sort-field menu through the shared menu button, on the chosen field 3790d1e900

refactor(join-form): open Add field through the shared menu button so the menu is never clipped ac1505eb53

feat(sidebar): open the user menu and the collapsed Administration flyout as link lists that close with Escape cc173c8da7

refactor(components): drop the server-state dropdown and the floating panel, and show the menu button and popover in the showcase a94c704e80

docs(guidelines): mark the menu button and popover available and settle the fallback without anchor positioning bf5cb5480e

feat(components): let the server open a popover on mount and drop unsaved input when it closes 8caa994ad9

feat(member-overview): open the filter picker and value controls at once, in the top layer, closing with Escape or a click outside fabf003e70