V14 - Disabled submenu is focused by keyboard actions

[paodb]

Description

A disabled submenu is focusable by keyboard.

Expected outcome

A disabled submenu item should not be focusable nor accessible.

Minimal reproducible example

The error can be reproduced in the current Vaadin14 documentation demo:
vaadin.com/docs/v14/example?embed=menu-bar-disabled-wc.js&import=component/menubar/menu-bar-disabled.ts

Note that the same example in Vaadin 24 works as expected.

Steps to reproduce

Step 1: Once the page is loaded and opened, try to navigate to the share menu using the keyboard either by pressing Tab or the right arrow key.

Step 2: Once the Share menu bar is highlighted, press 'Space' or 'Enter' to open the submenu items.

Step 3: In Share menu, we have two submenu items - 'by email' and 'get link'. Now press down arrow. You might notice that you need to press down arrow twice to reach the enabled menu item 'get link'.

Actual Result:
The disabled item 'by email' is focusable when we press down arrow for the first time. Since no CSS has been added for its focus ring, it's not visible but it can be focused via keyboard actions.

Expected Result:
The submenu item should be accessible when the down arrow is first pressed, while the disabled submenu item "by email" should not be accessible or focusable.

Environment

Vaadin version(s): 14.11.3

Browsers

Issue is not browser related

[web-padawan]

This issue is essentially the same as #4861 which has been recently fixed for V24 by #7111. I will backport the fix to V14.

UPD: note, the disabled item doesn't get focus in this case. The element that is focused is <div id="overlay">.

[johannest]

The issue seems to reproduce still with V14.11.4:

If the first sub menu item is disabled, the first arrow down only opens the menu, you will need two arrow downs to select first enabled item. But when the first sub menu item is enabled the first item is focused with first arrow down.

[web-padawan]

Reopened as the fix was incomplete.

[web-padawan]

The root cause of the issue with disabled item getting focused is the focus() method implementation in ListMixin. It checks for the first item with tabindex="0" and in this case, it is an element with disabled set to true. This has been fixed for V22+ by #2921. I'll backport the fix to vaadin-list-mixin V14 repo, then the issue should go away.