This PR makes the VTFlyout component more accessible.
I introduce a new composable useFocusContainer, which is used to run callbacks when Focus enters or leaves an element including all of its descendants. We can use this composable in other places like the Sidebar later as well.
New behavior:
Opens menu on hover (current behavior, purely CSS based) as well as on button interaction (click/pressing enter).
mouseleave will also close a menu that was opened by button interaction.
when open, button has aria-expanded="true", otherwise it's "false"
now also has aria-popup="true" set on the button element.
When focus leaves the FocusContainer (a button and all of the links within its menu), menu is closed.
also had to touch the default styles for buttons as for some reason, there's an outline style for focussed buttons that gets unset in the next line. I assume this was a mistake by the author of that CSS?
This PR makes the
VTFlyoutcomponent more accessible.I introduce a new composable
useFocusContainer, which is used to run callbacks when Focus enters or leaves an element including all of its descendants. We can use this composable in other places like the Sidebar later as well.New behavior:
aria-expanded="true", otherwise it's"false"aria-popup="true"set on the button element.