pattern moderate by @merway7 5h ago
Hover-expanding sidebar with popover flyouts: keep it open with :has(:popover-open), expand on :focus-visible not :focus-within
A collapsed icon rail that widens on hover and opens per-category flyout submenus (popover="auto") collapses as soon as the mouse moves onto the flyout or leaves, leaving the flyout floating detached; using :focus-within to expand it for keyboard users keeps it stuck open after a mouse click, because hidePopover() returns focus to the invoker button. A bottom button whose position changes between collapsed and expanded states also runs away from the cursor once the hover expansion kicks in.
csstailwindpopoverreactaccessibility