Improve and fix MenuAnchor/MenuItemButton UX for desktop

[Fernthedev]

MenuAnchor for Material 3 is great for contextual menus but there are some minor issues related to accessibility. Specifically, keyboard navigation does not auto-select an element when opening the menu. This causes some UX confusion where the user has to navigate further to access the menu he or she just opened, which in my case is not user friendly.

Setup:

• Material 3
• Windows 10 22H2
• Flutter 3.16.2

Relevant PR:

• feat: Add autofocus for MenuItemButton #139396 MenuItemButton doesn't have an autofocus attribute, thereby making it harder to navigate with the keyboard.

Thanks Flutter Team!

[Fernthedev]

I started looking and saw TapRegion was the ancestor widget which handles outside clicks for closing the menu.
This line is responsible for the secondary tap issue mentioned previously.

flutter/packages/flutter/lib/src/widgets/tap_region.dart

Lines 237 to 239 in d7d1572

	if (event is! PointerDownEvent || event.buttons != kPrimaryButton) {
	return;
	}

[huycozy]

Hi @Fernthedev
Using the 1st example at MenuAnchor, I can navigate between menus normally with arrow keys. I'm not sure which case autofocus can be used, could you be more specific?

Screen.Recording.2023-12-04.at.16.17.14.mov

Also, will the linked PR solve the 2nd and 3rd problems above? Or are they other issues?

[Fernthedev]

Hi, thanks for getting back to me. The other issues will not be resolved with the PR. I might look into those if Flutter gives me a direction for resolving them. Specifically, whether if TapRegion should have an option to listen to other mouse buttons, or some other solution.

As for the 1st issue, yes you can navigate the menu with the keyboard. However the autofocus attribute is useful in the case where the focus can be requested for a specific element on menu open. For my use case, this is better as it doesn't rely on Flutter's keyboard navigation to figure out how to focus the menu in a listview (Maybe that's just me or a bug in my code, but I don't think the PR can be disregarded yet anyways). I'll try to get some video footage later today.

Thanks!

[huycozy]

However the autofocus attribute is useful in the case where the focus can be requested for a specific element on menu open.

Thanks for the update. Labeling this point as a feature request.

For two remaining issues, please file separate issues for them for better tracking.

[Fernthedev]

Done, should I adjust this issue to focus on the autofocus feature then?

Here are the new subsequent issues:
#139555
#139556

[HansMuller]

CC @gspencergoog

[gspencergoog]

Yes, let's focus (haha!) on the autofocus issue for this one.

[Fernthedev]

Here's some footage example showcasing the difficulty of navigating to the menu in my desktop app. It also accidentally shows a separate MenuAnchor keyboard bug, which seems harder to resolve since each MenuAnchor is individually controlled.

https://streamable.com/t807zn

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.