Add a new CSS component class for menus.
Review Request #10902 — Created Feb. 16, 2020 and submitted
We've had a few places in the UI that implemented their own idea of a
drop-down menu. Each of these looked and worked differently, which can
be fine depending on the use case, but we had very little
standardization around them. They also weren't very accessible to
This change introduces a new
.rb-c-menuCSS class for defining a menu
.rb-c-menu__itemclass for menu items. It provides some standard
behavior for a menu's defaults, its opened state, and how items are
It also allows for mixing in some upcoming CSS classes centered around
buttons, for creating a button menu (where each item is just a button).
This class is the first to offer notes on how accessibility should work
and which DOM attributes should be set. The idea is that by including
this as part of the component documentation, we have a basic spec that
dictates how any implementations should behave and what attributes they
should include when using defining the elements. This is something I'm
aiming to do going forward, and should take away a lot of the guess-work
when building implementations.
Made use of this along with some upcoming changes, testing menus and
Tested the ARIA tree to ensure that the correct roles and metadata were
set for menus.
- Fixed some unfinished documentation.
- Removed hover styling, instead requiring all navigation to center around focus.
- Added enhanced focus styling.
Revision 2 (+198 -4)
Checks run (2 succeeded)