One mechanism for menus, popovers and tooltips #627

New issue

Closed

opened 2026-10-28 08:28:48 +01:00 by simon · 0 comments

simon commented

2026-10-28 08:28:48 +01:00

Owner

Motivation

Six dropdown mechanisms coexist (server-state <.dropdown_menu>, CSS-focus dropdowns in the sidebar, a popover with anchor positioning, three hand-built absolute divs, filter-builder popovers, <details>). Tooltips come in four mechanisms plus ~22 title= and 5 raw data-tip; the CoreComponent <.tooltip> shows on focus only when it wraps a focusable trigger (many wrap bare icons) and has no aria-describedby, no Escape and is not hoverable, while the most accessible variant (a popover meeting WCAG 1.4.13) lives outside CoreComponents. A hook comment still claims anchor positioning is unsupported in Safari/Firefox (it is Baseline since 01/2026). DESIGN_GUIDELINES §20 defines one mechanism: Popover API + CSS anchor positioning, client-side state.

Visible improvement

Menus open instantly, are never clipped by tables, and work fully with the keyboard; tooltips appear on focus as well as on hover.

Scope (ordered steps, `just ci-dev` green after each)

<.popover> and <.menu_button> (APG Menu Button) on the Popover API with anchor positioning, opened with JS commands; decide the positioning fallback for browsers without anchor positioning.
Migrate action menus: bulk actions, view settings, field visibility, name sort header submenu, hand-built absolute menus (global settings, user form, group detail).
Sidebar: collapsed-group flyout and user menu on the same mechanism.
Keep <.dropdown_menu> only where the server holds pending state (filter popovers); document each remaining use.
Rebuild <.tooltip>: hover and focus, hoverable, Escape, aria-describedby; merge the PopoverTooltip and HoverPopover hooks; fix the outdated comment.
Migrate title= and data-tip (statistics, tables, icons) to <.tooltip>, keeping title= only as the documented overflow hint (§20.2); remove tooltips from disabled controls (explain with help text instead). This includes the <.table row_tooltip> attribute, which renders title= on every clickable row: decide how the row hint is rendered without title= (its screen-reader text in the first cell stays).
Showcase sections: menu button, popover, tooltip (hover, focus, on an icon button).

Out of scope

Combobox and select (U7).
The filter builder's pending-state logic.

Acceptance criteria

DESIGN_GUIDELINES §20.1, §20.2, §8.2, §21.2 (flyouts) are met; the guard has no data-tip exceptions left.
Before/after screenshots: a menu inside the member table (not clipped), sidebar flyout, a tooltip shown via keyboard focus.
Keyboard check per APG Menu Button (open, arrows, Home/End, Escape returns focus, Tab closes); tooltips reachable and dismissible with Escape.
Showcase sections added.
just ci-dev green after every step.

Dependencies

U2 (daisyUI version); U3 (tokens, focus ring).
#554 (colocated hooks) first.
#549 (saved views) builds on the menu mechanism: run U8 before #549.

Anchors (verified against `main` @ `d9093a1f`, re-check before filing)

<.tooltip>: lib/mv_web/components/core_components.ex:453; <.dropdown_menu>: :518
Sidebar CSS dropdowns: lib/mv_web/components/layouts/sidebar.ex
Hooks: assets/js/app.js (PopoverTooltip, SubfieldMenu), assets/js/hooks/hover_popover.js
title= occurrences (34 matches incl. non-tooltip uses, 11 in statistics): lib/mv_web/live/statistics_live.ex
Raw data-tip: 5 in lib/mv_web/live/**

Caution

Client-side open state is invisible to has_element?; cover menus with ui-tagged browser tests.
Do not unify “downwards”: today's popover tooltip is the most accessible variant; keep its WCAG 1.4.13 behavior.

## Motivation Six dropdown mechanisms coexist (server-state `<.dropdown_menu>`, CSS-focus dropdowns in the sidebar, a popover with anchor positioning, three hand-built absolute divs, filter-builder popovers, `<details>`). Tooltips come in four mechanisms plus ~22 `title=` and 5 raw `data-tip`; the CoreComponent `<.tooltip>` shows on focus only when it wraps a focusable trigger (many wrap bare icons) and has no `aria-describedby`, no Escape and is not hoverable, while the most accessible variant (a popover meeting WCAG 1.4.13) lives outside CoreComponents. A hook comment still claims anchor positioning is unsupported in Safari/Firefox (it is Baseline since 01/2026). DESIGN_GUIDELINES §20 defines one mechanism: Popover API + CSS anchor positioning, client-side state. ## Visible improvement Menus open instantly, are never clipped by tables, and work fully with the keyboard; tooltips appear on focus as well as on hover. ## Scope (ordered steps, `just ci-dev` green after each) 1. `<.popover>` and `<.menu_button>` (APG Menu Button) on the Popover API with anchor positioning, opened with `JS` commands; decide the positioning fallback for browsers without anchor positioning. 2. Migrate action menus: bulk actions, view settings, field visibility, name sort header submenu, hand-built absolute menus (global settings, user form, group detail). 3. Sidebar: collapsed-group flyout and user menu on the same mechanism. 4. Keep `<.dropdown_menu>` only where the server holds pending state (filter popovers); document each remaining use. 5. Rebuild `<.tooltip>`: hover and focus, hoverable, Escape, `aria-describedby`; merge the PopoverTooltip and HoverPopover hooks; fix the outdated comment. 6. Migrate `title=` and `data-tip` (statistics, tables, icons) to `<.tooltip>`, keeping `title=` only as the documented overflow hint (§20.2); remove tooltips from disabled controls (explain with help text instead). This includes the `<.table row_tooltip>` attribute, which renders `title=` on every clickable row: decide how the row hint is rendered without `title=` (its screen-reader text in the first cell stays). 7. Showcase sections: menu button, popover, tooltip (hover, focus, on an icon button). ## Out of scope - Combobox and select (U7). - The filter builder's pending-state logic. ## Acceptance criteria - DESIGN_GUIDELINES §20.1, §20.2, §8.2, §21.2 (flyouts) are met; the guard has no `data-tip` exceptions left. - Before/after screenshots: a menu inside the member table (not clipped), sidebar flyout, a tooltip shown via keyboard focus. - Keyboard check per APG Menu Button (open, arrows, Home/End, Escape returns focus, Tab closes); tooltips reachable and dismissible with Escape. - Showcase sections added. - `just ci-dev` green after every step. ## Dependencies - U2 (daisyUI version); U3 (tokens, focus ring). - #554 (colocated hooks) first. - #549 (saved views) builds on the menu mechanism: run U8 before #549. ## Anchors (verified against `main` @ `d9093a1f`, re-check before filing) - `<.tooltip>`: `lib/mv_web/components/core_components.ex:453`; `<.dropdown_menu>`: `:518` - Sidebar CSS dropdowns: `lib/mv_web/components/layouts/sidebar.ex` - Hooks: `assets/js/app.js` (PopoverTooltip, SubfieldMenu), `assets/js/hooks/hover_popover.js` - `title=` occurrences (34 matches incl. non-tooltip uses, 11 in statistics): `lib/mv_web/live/statistics_live.ex` - Raw `data-tip`: 5 in `lib/mv_web/live/**` ## Caution - Client-side open state is invisible to `has_element?`; cover menus with `ui`-tagged browser tests. - Do not unify “downwards”: today's popover tooltip is the most accessible variant; keep its WCAG 1.4.13 behavior.

simon added this to the Minor UI and Feature Polishing | TI I milestone

2026-10-28 08:28:48 +01:00

simon added this to the Sprint 18: Oktober 2026 project

2026-10-28 08:28:48 +01:00

simon referenced this issue from a pull request that will close it,

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

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

simon closed this issue

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

simon referenced this issue from a commit

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

Merge pull request 'One mechanism for menus, popovers and tooltips closes #627' (#630) from issue/mitgliederverwaltung-627 into main