Autocomplete: render popup items as

so the highlight shows

#6 in Riparion/riparion-editor — merged 2026-06-02

Problem

The [[/ popup's keyboard navigation worked (the selected row got the active class) but nothing visibly highlighted — in the host and the bundled example. Verified with Playwright: the active row had the right class, but its computed background-color was rgba(0,0,0,0).

Cause

Each item was a <button> with an inline style="…;background:transparent;border:0;" (to strip native button chrome). Inline styles beat class rules, so the host's item_active_class background — and the hover background — were always overridden to transparent.

Fix

Render items as a <div> (role=option) with only cursor:pointer inline — a div has no native chrome to neutralize, so there's no inline background to fight the host's classes. The active/hover backgrounds now paint. Added role=listbox on the menu container.

Verified in the example (computed bg of the selected row is now the real highlight color, screenshot confirms).

Checks

cargo test 20 passed; clippy -D warnings non-web --all-targets + wasm.