Navigation items remain focused when opening menus

[olerichter00]

Problem

Some navigation items that open a menu remain focused and show a border at the bottom until the
user clicks somewhere else. On mobile devices, the border at the bottom remains even when the user starts scrolling.

The problem occurs for some nav items because no UnfocusableAnchor anchor is rendered when the Menu is not passed as a prop to NavItem.

Steps to reproduce

User Menu

• Open https://www.artsy.net/
• Click on the user icon or more button in the navigation

Mobile Menu

• Open https://www.artsy.net/artwork/marc-chagall-moses-and-aaron-with-the-elders-the-story-of-the-exodus on a mobile device
• Click the burger menu button in the navigation

Expected Behavior

The items should not remain visually focused when the menu closes or when the user leaves the nav item.

Proposed Solution

I prepared a PR (#6818) that fixes the problem by aligning the behavior with the other nav items
that open a menu.

Alternative Solutions

1. Alternative

A handler could unfocus a nav item as soon as the user leaves with the mouse
using the handleMouseLeave() callback.
This change would have a bigger impact on the user experience though.

2. Alternative

A media query could be used to prevent the nav items from changing
the look when they are focused for devices without a pointing device (e.g. smartphones).

@media (any-hover: hover) {
  &:focus {
    outline: 0;
    border-bottom-color: ${color("black100")};
    z-index: 1;
  }
}

Using the media query wouldn't fix the problem for other devices though.

Note: any-hover has pretty good support https://caniuse.com/mdn-css_at-rules_media_any-hover

[damassi]

cc @dzucconi

[dzucconi]

The items should not remain visually focused when the menu closes or when the user leaves the nav item.

But, these items are what have focus. So this is more of a design choice and not a bug.

We could alternatively style the focus-visible state which we polyfill, and would only display a focus state when using a keyboard as input.

(This does bring up the other issue which is that the focus state of these elements really isn't as prominent as it should be IMO.)

[olerichter00]

You're completely right, in the end, it is a design choice.

The problems I wanted to address here are (please correct me, if I got it wrong):

1. It looks odd when the bottom border remains after the menu closes even if the user starts scrolling (especially on mobile devices).
2. The items don't have a consistent look when focused by touch or with the mouse.

Styling focus-visible looks like a good solution to address both problems!