Bug Description

The Help icon is highlighted even when the menu is deactivated.

Steps to reproduce

1. Click on the Help icon, menu dropdown appears
2. Click on the Help icon again, the menu disappears, but the icon stays highlighted.
   This happens both on the Site Kit Service and in product, with different visual treatments:

Let's verify that (1) this is expected behaviour and if yes (2) that this is the expected visual treatment.
cc @aarondruck for an expert consult.

Screenshots

Highlighted icon on Site Kit Service:

Highlighted icon in product:

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Plugin Version [e.g. 22]
• Device: [e.g. iPhone6]

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The following UX bugs with the help visibility icon in the Site Kit header bar (behind helpVisibility feature flag) should be fixed:
  • The blue outline that is displayed e.g. when clicking the menu icon to close the menu should be completely removed (applies to both active and focus state). This should be removed from all header buttons, in fact—see Verify that Help/header icons should be highlighted in inactive state #3026 (comment).
  • When clicking a link from the menu (opens in a new tab) and then going back...
    • ...the menu icon should be visually active but the menu should be closed. It should still be the currently focused item.
    • ...clicking on the menu icon should open the menu again. Currently this is clearly broken, as the first click in this scenario doesn't do anything, and only on the second click it will reopen.
• As a guidance, in terms of the above three bullet points it should behave similar to the question mark icon you can see e.g. in Google Drive. But the help icon should still be visually highlighted upon return, as it is the focused element and that visual indicator is useful to a keyboard user, especially after the menu was closed on clicking a link.

Implementation Brief

• edit the HelpMenu component and remove the <Fragment>
• edit the file assets/sass/components/global/_googlesitekit-dropdown-menu.scss
• add the following to the class .googlesitekit-header_dropdown to the file with:
  &:focus { outline: 0; }
• edit assets/js/components/Menu.js and set a default function for the onSelected prop which sets menuOpen to false

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Check that the dotted blue outline no long appears when the plugin header help icon is focused or active
• Click on one of the links in the dropdown help menu. Switch back to the plugin tab:
  • check that the help icon is still highlighted.
  • check that the dropdown help menu is displayed when the icon is clicked once

Changelog entry

• Fix bug with help visibility icon in header where clicking it wouldn't trigger the menu to open in some scenarios, and also address some visual design problems with it.