Add a new CSS component class for menus.

Review Request #10902 — Created Feb. 16, 2020 and submitted


Review Board


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
non-mouse users.

This change introduces a new .rb-c-menu CSS class for defining a menu
and a .rb-c-menu__item class 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
button menus.

Tested the ARIA tree to ensure that the correct roles and metadata were
set for menus.

Description From Last Updated

This is unfinished.

  2. reviewboard/static/rb/css/ui/menus.less (Diff revision 1)

    This is unfinished.

    1. That's what I get for writing this at 3AM.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (d71b451)