batches: clean up dropdown menu buttons
Created by: courier-new
Note: This branch is temporarily based on kr/unset-menu-select-styles
, which applies general style fixes to the underlying Reach UI components that power the set of Menu
Wildcard components and thus impacts the areas of work for this PR.
A small collection of accessibility, consistency, and visual polish tweaks to our "dropdown button"-style components.
- Adds a custom CSS variable for the darker border color per Rob's request in Figma
- Replaces
Menu
usage withPopover
for execution options dropdown to improve accessibility-
MenuList
doesn't allow you to tab to its children. It works more like a native dropdown selector where the parent holds focus so long as it's open and you have to use the arrow keys to navigate options and ultimately select one. That doesn't work so well when we have checkboxes rather than items to select. - I was aware of this earlier but originally thought this was a bug in
MenuList
. Now I understand it's more like expected behavior. - Switching to
Popover
gives us the same floating menu effect, but without locking focus to the parent.
-
- Swaps
.dropdown-toggle
forChevronDownIcon
instead -- see my reasoning (tldr; we're inconsistent with this everywhere, but this icon is the simplest in terms of implementation, matches Wildcard, and looks the best!!) - Updates
DropdownButton
to useMenuList
(ah, it's intended purpose!) and unifies style to matchExecutionOptions
https://user-images.githubusercontent.com/8942601/154394301-b77932cf-4129-4018-82f2-a02faf442a50.mov
https://user-images.githubusercontent.com/8942601/154394307-4bb019ce-1f91-4006-b29f-6a77df950b08.mov
Here's the Storybook story for this branch to play with the updated DropdownButton
.
Test plan
Verified visually in Storybook stories. Manually tested both instances of DropdownButton
(bulk actions and publish-from-preview). Walked through flow with keyboard navigation and regular mouse usage for all components.