User focus is lost when exiting Account Menu (Accessibility)

[tofumatt]

Bug Description

After exiting the Account Menu (using the Escape key), no element on the screen is focused and the user must press Tab or Shift + Tab to get an element on the page to appear focused.

Steps to reproduce

1. Using keyboard navigation, tab to the user account menu in the top-right of the screen.
2. Open the menu.
3. Move through the menu with the keyboard.
4. Press "Escape" to exit the menu.
5. Focus is expected to be on the user account menu, but it is not focused. There is no visual representation of focus state, and the user must tab to restore a visual focus state.

Screenshots

Focus.lost.when.exiting.Account.Menu.mp4

---

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

Acceptance criteria

• The Account Menu button next to the help button should be focused (including being visibly focused with a visible focus state) when the user exits the Account dropdown menu using the "Escape" key to close the menu.
  • If the user clicks away from the menu, it would be acceptable to blur the focus state, but if they exit the menu with keyboard input (using the Escape key explicitly), the user menu button should definitely be focused afterward.

Implementation Brief

• In assets/js/components/UserMenu/index.js
  • Create a new menuButtonRef const that serves as a ref for the Button using useRef()
  • Assign this menuButtonRef as a ref to the <Button>
  • In the handleMenu callback, set the focus to the button when menuOpen is false.
    • menuButtonRef.current?.focus();
      

      site-kit-wp/assets/js/components/UserMenu/index.js

      Lines 100 to 106 in ce3938d

      	const handleMenu = useCallback( () => {
      	if ( ! menuOpen ) {
      	trackEvent( `${ viewContext }_headerbar`, 'open_usermenu' );
      	}
      	setMenuOpen( ! menuOpen );
      	}, [ menuOpen, viewContext ] );

Test Coverage

QA Brief

• Visit the Google Site Kit dashboard from within the WordPress admin dashboard.
• Using keyboard navigation, tab until focus is set on the user menu.
• Enter the user menu (i.e via pressing Space or Enter).
• Navigate the user menu with the arrow keys (optional).
• Exit the user menu via the Escape key.
• Note that the user menu element should remain in focus.
• Validate that you can enter the user menu yet again (i.e via pressing Space or Enter).
• Exit the user menu once more, focus should remain on the user menu icon.
• Continue to tab to other elements.
• Validate that focus unsets/is no longer set on the user menu.

The below GIF indicates what a successfully functioning version of the above may look like:

Changelog entry

• Ensure focus remains on user menu button when the menu is exited with the keyboard.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Verified that the Account Menu button next to the help button is remained focused (including being visibly focused with a visible focus state) when the user exits the Account dropdown menu, using the “Escape” key to close the menu.

Recording.395.mp4