Fix up mobile interaction for menu actions.
Review Request #13061 — Created May 23, 2023 and submitted
Interacting with actions located in menus was broken in a few different
ways on mobile. Some of these problems were baked into the menu
implementation from the very beginning, and some are a bit more recent.To fix these issues, this change does several things:
- Hidden menus were being set to have
visibility: hidden
and
opacity: 0
, but this still can allow them to be interacted with.
When in mobile mode, various action menus would overlap, so a click on
something in the "Review" menu was accidentally activating things in
the "Close" menu. - Interaction with a lot of the menus relied entirely on the
:focus
and:hover
states. This kind of worked sometimes with the way that
mobile browsers deal with touch events, but it wasn't reliable, and
barely worked at all with mobile mode in desktop browser devtools.
I've added explicit touch event handlers to improve the interaction. - The "Review" menu in particular is very modal, and takes up a lot of
the screen when working on mobile. I've added an event overlay over
the rest of the page so that taps outside of the menu area will
dismiss the menu.
- Exercised all of the menus and actions using both mobile and desktop
modes. - Ran python tests
- Ran js tests
- Commits:
-
Summary ID 70bb51bd8d378dbb105c7417a17a0f87b14f5a87 fdf990c09cd60eaf93d767bcf944b402e54d2e7f - Diff:
-
Revision 2 (+728 -382)
Checks run (2 succeeded)
flake8
passed.
JSHint
passed.