Menu: first menu item selected on popup

[peconomou929]

Describe the bug

If I create a menu component with submenu headers and menu items, then clicking on any of the submenu headers will activate the first menu item in the menu. This is shown in the image, taken directly from the PrimeReact website.

Take a look at the steps to reproduce the behaviour below.

Reproducer

https://primereact.org/menu/#popup

PrimeReact version

10.3.3

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Go to this subheading of the documentation for the PrimeReact Menu.
2. In the example, click on the header "Profile."
3. Observe as the menu item "New" is activated (given a background color).

You will see two changes associated with this in the HTML:

1. if you look at the menu item "New," the attribute "data-p-focused" is set to true.
2. if you look at the whole menu element, it is given an attribute "aria-activedescendants".

Expected behavior

In the menu component, a menu items is activated only when the user clicks on the item itself.

[melloware]

Looking here at accessibility: https://primereact.org/menu/#accessibility the tab key states "Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence."

But i wonder if that first element is meant to be focused or not?

[peconomou929]

I see, okay. I didn't notice that.

But still, if there is already a menu item in focus, and I click on one of the headers, the focus is brought to the first item. Is this the desired behaviour? Even taking the note about accessibility into consideration, this still feels like a bug, or at least unexpected behaviour.

[akshayaqburst]

@melloware I feel like @peconomou929 is raising a valid bug and have created a fix for the same. PR for review - #5861.

Thanks,

[melloware]

PrimeVue behaves the same way: https://primevue.org/menu/

I think this is intentional because according to ARIA specs when a popup is displayed it should be given focus or the first item should be given.

According to ARIA specs: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/

The menu first item SHOULD have focus when the menu is displayed so this is for accessibility and screen readers.

With focus on the button:
Enter: opens the menu and places focus on the first menu item.
Space: Opens the menu and places focus on the first menu item.

Aria example: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/

[SamuelWei]

@melloware The question is, does the dropdown menu has to act like this only for keyboard input, or is it also mandatory for mouse input?

[melloware]

@SamuelWei I would think it would be either mouse or keyboard. Because that element needs to get focus so the ScreenReader can read to a visually impaired user what the currently selected option is.

[SamuelWei]

My question mainly came from the fact that I find it irritating when using the mouse if the first element is focussed even though my mouse is still on the button. This is different when using the keyboard. Hence the question of whether the Auto. Focus function can be restricted to keyboard input and deactivated when using the mouse.

In this context, it is also interesting that the menu bar does not have this behaviour for either mouse or keyboard control in its dropdowns.

[melloware]

@SamuelWei i think PrimeTek are just following the ARIA guidelines: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions-active-descendant/

Menu's and others are recieving ARIA accessibility updates as we speak so its possible MenuBar will behave this way in the near future.

A lot of government agencies require strict adherence to ARIA and 508 standards to be accepted.

Also ARIA states when there is a popup it SHOULD have focus as you are no longer interacting with the Button.

[bogue]

I'm with @SamuelWei on this one, I ended up here for the same reason. @melloware, totally agree with you on the necessity to stick to ARIA guidelines. However, if you notice the proposed behavior in the example included in the page you linked to, the focus should follow mouse hover as they suggest, instead of remaining on the first item.

[melloware]

OK I reopened the issue

[danksch]

Are aria attributes also causing the hover effect still being present when another item in the menu is being hovered on? (screenshot from the docs, popup section)

[melloware]

Yeah you are hovering over Export and Refresh still has the current active focus. Can you check the PrimeVue showcase and see if it behaves the same?

[melloware]

OK submitted PR to align it with PrimeVue.